/* RESET DEFAULT BROWSER STYLES
Removes default margin and padding from all elements
and makes width calculations easier with border-box */
*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* BODY STYLE
Sets background color, main font, text color and page padding */
body{
background:#EBB4BF; /* pink background */
font-family:'Poppins',sans-serif; /* main font */
color:#4C1513; /* dark red text */
padding:40px; /* space around page content */
}


/* ABOUT BUTTON
Styles the button positioned on the top-right of the page */
.about-btn{
position:absolute; /* allows precise positioning */
top:30px; /* distance from top */
right:40px; /* distance from right */
background:#4C1513; /* dark red background */
color:#EBB4BF; /* pink text */
padding:8px 18px; /* space inside button */
border-radius:20px; /* rounded corners */
text-decoration:none; /* removes underline from link */
font-weight:500; /* medium bold text */
}


/* MAIN CONTAINER
Holds the left and right sections of the layout */
.container{
max-width:1200px; /* maximum width of content */
margin:auto; /* centers container horizontally */
display:flex; /* enables flexbox layout */
justify-content:space-between; /* spreads items left and right */
align-items:flex-start; /* aligns items at the top */
gap:50px; /* space between left and right sections */
}


/* LEFT SIDE
Contains introduction text and tags */
.left{
flex:1; /* takes equal flexible space */
}


/* HELLO TEXT
Small introduction text above the name */
.hello{
font-size:18px;
margin-bottom:10px;
color:#4C1513; /* dark red */
}


/* NAME STYLE
Large name heading */
.name{
font-family:'Playfair Display',serif; /* elegant font */
font-size:70px; /* large size */
margin-bottom:20px;
color:#4C1513;
}


/* INTRO PARAGRAPH
Description text about yourself */
.intro{
font-size:14px;
line-height:1.7; /* improves readability */
margin-bottom:20px;
max-width:450px; /* limits line width */
color:#4C1513;
}


/* TAG CONTAINER
Displays tags such as skills or interests */
.tags{
display:flex;
gap:10px; /* space between tags */
flex-wrap:wrap; /* allows tags to move to next line */
margin-bottom:20px;
}


/* TAG STYLE
Individual tag appearance */
.tags span{
background:#4C1513; /* dark red */
color:#EBB4BF; /* pink text */
padding:6px 16px; /* inside spacing */
border-radius:20px; /* pill shape */
font-size:12px;
}


/* CONTACT INFORMATION
Styles email, phone, etc. */
.contact p{
font-size:13px;
margin-bottom:8px;
color:#4C1513;
}


/* RIGHT SIDE
Contains the photos */
.right{
flex:1; /* equal width with left section */
display:flex;
flex-direction:column; /* stack items vertically */
align-items:center; /* center items horizontally */
}


/* PHOTO AREA
Container for main photo and polaroid image */
.photo-area{
position:relative; /* allows absolute positioning inside */
}


/* MAIN PHOTO */
.main-photo{
width:270px;
border-radius:6px; /* slightly rounded corners */
box-shadow:0 10px 20px rgba(0,0,0,0.3); /* depth effect */
}


/* POLAROID IMAGE */
.polaroid{
position:absolute; /* positioned relative to photo-area */
bottom:-30px; /* moves it below the main photo */
left:-60px; /* moves it left */
background:#4C1513; /* dark red frame */
padding:10px;
transform:rotate(-5deg); /* slight tilt effect */
box-shadow:0 10px 20px rgba(0,0,0,0.3);
}


/* IMAGE INSIDE POLAROID */
.polaroid img{
width:160px;
display:block; /* removes extra spacing */
}


/* PHOTO TAGS
Tags displayed below the photo */
.photo-tags{
display:flex;
gap:10px;
margin-top:40px;
flex-wrap:wrap;
}


/* INDIVIDUAL PHOTO TAG */
.photo-tags span{
background:#4C1513;
color:#EBB4BF;
padding:6px 16px;
border-radius:20px;
font-size:12px;
}


/* EDUCATION SECTION
Displays school and education information */
.education{
max-width:1200px;
margin:80px auto 40px auto; /* top and bottom spacing */
display:flex;
justify-content:space-between; /* spread items */
}


/* EDUCATION TITLE */
.education h2{
font-family:'Playfair Display',serif;
margin-bottom:10px;
color:#4C1513;
}


/* SCHOOL NAME */
.school{
font-weight:500;
margin-top:10px;
color:#4C1513;
}


/* SKILLS SECTION
Contains skill ratings and personal skills */
.skills{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
gap:60px; /* space between skill columns */
}


/* SKILLS TITLE */
.skills h2{
font-family:'Playfair Display',serif;
margin-bottom:20px;
color:#4C1513;
}

/* PERSONAL SKILLS TAG CONTAINER */
.skill-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
max-width:400px;
}


/* PERSONAL SKILL TAG */
.skill-tags span{
background:#4C1513;
color:#EBB4BF;
padding:6px 16px;
border-radius:20px;
font-size:12px;
}


/* RESPONSIVE DESIGN
Adjusts layout for smaller screens like tablets or phones */
@media(max-width:900px){

/* stacks left and right sections vertically */
.container{
flex-direction:column;
align-items:center;
text-align:center;
}

/* stacks skill columns */
.skills{
flex-direction:column;
}

/* stacks education items */
.education{
flex-direction:column;
gap:30px;
}

}

/* --- FOOTER CONTAINER --- */
.footer {
  display: flex;
  align-items: center;   
  justify-content: center; 
  height: 80px;
  color: #4C1513;        
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  border-top: 2px solid #EBB4BF; 
  
}

/* --- THE TEXT & ICON WRAPPER --- */
.footer p {
  margin: 0;
  font-size: 14px;
  display: flex;        
  align-items: center;    
  gap: 8px;           
}

.footer-icon {
  font-size: 1.2em;    
}
}