/* Starter Stylesheet for our project.
-----------------------------------------------
Please read the comments to understand what
this code does. 

Refer to w3schools.com for help
-----------------------------------------------
*/

/*  This removes the default browser settings */
* {
    margin: 0; 
    padding: 0;
}

/*  
    This sets the outer container for your site.
    To use it, you will need to create division tag
    to hold the content. Give it an id="wrapper".
    I would look like this...
        <div id="wrapper">
    Put this division right after the body tag
    and close it right before the close of the body tag
*/

/* GENERAL PAGE SETTINGS */
body {
    margin: 0; /* removes default spacing around page */
    font-family: "Georgia", serif; /* gives a classic theatre-style font */
}
/* Reset default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

/* Main container */
.container {
  max-width: 900px;
  margin: 40px auto;
  background: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Header section */
.header {
  text-align: center;
  margin-bottom: 20px;
}

/* Profile image */
.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;       /* Makes it circular */
  object-fit: cover;        /* Prevents distortion */
  margin-bottom: 15px;
  border: 4px solid #ddd;
}

/* Name */
.header h1 {
  font-size: 2rem;
  margin-bottom: 5px;
}

/* Subtitle (job title) */
.header p {
  color: #777;
}

/* Section titles */
.section {
  margin-top: 25px;
}

.section h2 {
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #5c5757;
}

/* Lists (experience, skills, etc.) */
ul {
  list-style: none;
}

ul li {
  margin-bottom: 10px;
}

/* Job titles */
.job-title {
  font-weight: bold;
}

/* Dates */
.date {
  float: right;
  color: #888;
  font-size: 0.9rem;
}

/* Clear floats */
.clear {
  clear: both;
}

/* Links */
a {
  color: #0077cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Responsive design */
@media (max-width: 600px) {
  .container {
    padding: 20px;
  }

  .profile-img {
    width: 120px;
    height: 120px;
  }
}
/* HEADER STYLING */
header {
    background-image: url("curtain.jpg");
    background-size: cover;
    background-position: center;

    height: 100vh;

    color: white;
    text-align: center;

    /* REMOVE vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* pushes content to the TOP */

    padding-top: 40px; /* adds space from very top */

    
    height: 100vh; /* makes header take up full screen height */

    color: white; /* makes all text white */

    text-align: center; /* centers text horizontally */

    display: flex;
    flex-direction: column;
    justify-content: center; /* centers content vertically */

}
/* MAIN TITLE */
h1 {
    font-size: 60px; /* makes your name large */
    margin-bottom: 10px; /* space below name */
}

/* SUBTITLE */
h2 {
    font-size: 40px;
    margin-bottom: 30px;
}

/* NAVIGATION BAR */
nav ul {
    list-style-type: none; /* removes bullet points */
    padding: 0;
}

/* NAV ITEMS (horizontal layout) */
nav ul li {
    display: inline; /* makes items go side by side */
    margin: 0 15px; /* space between links */
}

/* NAV LINKS */
nav ul li a {
    text-decoration: none; /* removes underline */
    color: white;
    font-size: 20px;

    /* smooth hover effect */
    transition: 0.3s;
}

/* HOVER EFFECT (when mouse is over link) */
nav ul li a:hover {
    color: #ff4d4d; /* lighter red when hovering */
}
footer { 
    position: absolute;
    bottom: 100;
    height: 200px;
    width: 100%;
    color : black;
    background-color: white;
}

body {
    background-image: url(../_images/Absract.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    padding-bottom: 10px;
    width:1400 px;
}
img1, img2, img3, img4, img5, img6 {
  		max-width: 100%;  
 		height: auto;     
  		display: block;  
}

#wrapper {
  
    margin: 0 auto;
    width: 1080px;
    min-height: 1920px;
    position: top;

    margin: 0 auto;
    width: somepixels;
    background-color: white;
    color: black;
}

nav {
 /* GENERAL PAGE SETTINGS */
body {
    margin: 0; /* removes default spacing around page */
    font-family: "Georgia", serif; /* gives a classic theatre-style font */
}

/* HEADER STYLING */
header {
    /* Background image (your curtain) */
    background-image: url("curtain.jpg"); /* make sure your image file is named this */
    
    background-size: cover; /* makes image fill the whole area */
    background-position: center; /* keeps it centered */
    
    height: 100vh; /* makes header take up full screen height */

    color: white; /* makes all text white */

    text-align: center; /* centers text horizontally */

    display: flex;
    flex-direction: column;
    justify-content: center; /* centers content vertically */
}

/* MAIN TITLE */
h1 {
    font-size: 60px; /* makes your name large */
    margin-bottom: 10px; /* space below name */
}

/* SUBTITLE */
h2 {
    font-size: 40px;
    margin-bottom: 30px;
}

/* NAVIGATION BAR */
nav ul {
    list-style-type: none; /* removes bullet points */
    padding: 0;
}

/* NAV ITEMS (horizontal layout) */
nav ul li {
    display: inline; /* makes items go side by side */
    margin: 0 15px; /* space between links */
}

/* NAV LINKS */
nav ul li a {
    text-decoration: none; /* removes underline */
    color: white;
    font-size: 20px;

    /* smooth hover effect */
    transition: 0.3s;
}

/* HOVER EFFECT (when mouse is over link) */
nav ul li a:hover {
    color: #ff4d4d; /* lighter red when hovering */
}
/* 
    The is the syntax to set a background image.
    Copy the 2 styles below and put them in the tag
    you want to add a background image to. 
    Then, change the image to your image. 
*/
< div id="wrapper">