/* GENERAL STYLING */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0; 
    padding: 0;
}

body{
    font-family: "Poppins", sans-serif;
}

html{
    scroll-behavior: smooth;
}

p{
    color: rgb(85,85,85);
}

/* TRANSITIONS */

a, .btn{
    transition: all 300ms ease;
}

/* DESKTOP NAV */

nav, .nav-links{
    display: flex;
}

nav{
    justify-content: space-around;
    align-items: center;
    height: 17vh;
}

.nav-links{
    gap: 2rem;
    list-style: none;
    font-size: 1.5rem;
}

a{
    color: black;
    text-decoration: none;
    text-decoration-color: gray;
}

a:hover{
    color: grey;
    text-decoration: underline;
    text-decoration-color: rgb(181,181,181);
    text-underline-offset: 1rem;
    /* -> We don't wan't underline of a link text to be touching and intersecting through text */
    
}

.logo{
    font-size: 2rem;
}
/* When we hover over logo cursor changes and we don't want that (to make it appear more like logo than ever) */
.logo:hover{
    cursor: default;
}

/* HAMBURGER MENU */

#hamburger-nav{
    display: none;

    /* *********** This is that devilish line which took me 1 hour to debug */
}



.hamburger-menu{
    position: relative;
    display: inline-block;
}

.hamburger-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer;
    position: relative;
}

.hamburger-icon span{
    width: 100%;
    height: 2px;
    background-color: black;
    transition: all 0.3 ease-in-out;
}

.menu-links{
    position: absolute;
    /* Poistions the menu(4 links of about , contact, project) relative to it's nearest positioned ancestor (in this case hamburger-nav) */
    /* This is done to place menu right below hamburger menu icon */
    top: 100%;
    /* background-color: white; */
    /* sets menu background to white */
    right: 0; 
    /* Moves menu below hamburger icon : which means menu-links are positioned the height of its parent element below the top*/
    /* makes sure that all menu links are touching to right i.e. 0px away from right side */
    width : fit-content;
    /* ensures menu's width automatically adjusts to fit its content */
    max-height: 0;
    /* initially hides menu by collapsing its height to zero. This is important for slide down effect. */
    overflow: hidden;
    /* Ensures that any content overflowing the max height is hidden. This keeps the menu links hidden when the menu is closed */
    transition: all 0.3s ease-in-out;
    /* smooth animates changes(like expanding the menu) over 0.3 seconds */
}



/* This class styles actual links inside the hamburger menu */

.menu-links a{
    display: block;
    /* Makes link take up its own line, stacking vertically. */
    padding: 10px;
    /* Adds spaces inside each link, making it easier to click  */
    text-align: center;
    /* Centers the text inside each link */
    font-size: 1.5rem;
    /* send's font size 1.5 times the base font size of the document. */
    color: black;
    /* sets link text color to black */
    text-decoration: none;
    /* Removes the underline from the links  */
    transition: all 0.3 ease-in-out;
    /* Add's smooth animation when link style change(e.g. on hover) */

}


.menu-links li{
    list-style: none;
    /* To remove bullet points */

}

/* Following css is targeted when open class is added to menu-links */
.menu-links.open{
    max-height: 300px;
}


/* Next 3 selectors about targeting 3 span elements when open class is added
Here we want to make appear like cross when we click hamburger icon */

/* Next css rotates the first line 45 degrees and shifts it slightly down and right */
/* Starts forming top diagonal of "X" */
/* After rotation moves downward and right */
.hamburger-icon.open span:first-child{
    transform: rotate(45deg) translate(10px, 5px);
}

/* span : :nth-child(2) targets the middle line of hamburger icon when the open class is added */
/* we want to remove it so that only two lines are left to form diagonal */

.hamburger-icon.open span:nth-child(2){
    opacity: 0;
}

/* span : :last-child targets the last line of hamburger icon when the open class is added */
/* Rotates the line -45 degrees and shifts it slightly down and right */
/* After rotation moves upward and left (due to nature of rotation) */
.hamburger-icon.open span:last-child{
    transform: rotate(-45deg) translate(10px, -5px);
}


/* Note : translation happens after rotation, which decides the nature of translation */
/*        for first line it's right and downwards, while for last line it's left and upwards */


/* following three css code has purpose to remove all cross effects when open class is remove */

/* this turns back first rotated span line to it's orignal position */
.hamburger-icon span:first-child
{
    transform : none;
}

/* makes middle span element appear back again */
.hamburger-icon span:nth-child(2)
{
    opacity: 1;
}

/* makes last line of span back horizontal when open class is not present */
.hamburger-icon span:last-child
{
    transform : none;
}

/* SECTIONS */

section{
    padding-top: 4vh;
    /* Adds vertical spacing 4% of viewport height at the top of each <section> */
    /* Ensures the content inside the section does not stick to the very top, improving readibility     */
    height: 96vh;
    /* Set's the section height to 96% of the viewport height: .
    This helps ensure the section occupies almost the remaining visible screen area, maintaining full screen effect */
    margin: 0 10rem;
    /* Adds horizontal margins of 10 rem on both left and right sides */
    /* centers the section content within the viewport while maintaining a consistent gap from edges */
    box-sizing: border-box;
    /* Ensures padding and borders are included in total dimensions of the scroll-snap-destination.
    Prevents unwanted size overflow caused by padding or borders */
    /* Usually Width = Conten + Padding + Border, which can be tedious to always calculate hence border box ensures that everything adjusts itself so that final height is the one specified by you. */
    min-height: fit-content;
    /* Ensures the section is tall enough to fit all its content if the content exceeds 96vh */
     /* Prevents content overflow when the content height exceeds the viewport */
}
.section-container{
    display: flex;
    /* This is about about section section-container */
}

/* PROFILE SECTION */
#profile{
    display: flex;
    /* Ensures it's child elements 1. Profile Picture and 2. text are laid out in a row  */
    justify-content: center;
    /* Centers the child elements horizontally within section */
    gap: 5rem ;
    /* spacing between profile picture and text is made 5 rem */
    height: 80vh;
    /* Sets the profile section's height to 80% of the viewport height */
    /* This keeps the section compact while maintaining a full-screen design approach */
}

.section__pic-container{
    display: flex;
    /* We use display flex because it enables us easily use flex properties to align our image-rendering */
    /* This also ensures that our layout is flexible for future if you need to add any element */
    height: 400px;
    /* Ensures consistent height of image regardless of it's dimensions or content. */
    width: 400px;
    /* Ensures consistent width of image */
    margin: auto 0;
    /* margin: top-bottom left-right; */
    /* auto automatically adjusts the top and bottom margins to push the image into middle of the parent container */
    /* 0 signifies don't add any extra space to the left or right of the element : meaning it will stay where it's positioned based on other layout */
}

.section__text{
    align-self: center;
    /* This centers the .section__text vertically within parent container (Which is a flex container) */
    text-align: center;
    /* Ensures all the text inside is centered horizontally. This makes text look neat and aligned in center */
}

.section__text p{
    font-weight: 600;
    /* Makes the text inside p tag in text section bolder but not as heavy font-weight: 700(bold).  */
    /* Add's emphasis on text making it stand out slightly more than normal text. */
}

.section__text__p1{
    text-align: center;
    /* This is redundant here since .section__text already has text-align:center; However it ensures the centering apples even if .section__text's centering is removed or modified */
}

.section__text__p2{
    font-size: 1.75rem;
    /* Increases the size of the text inside p2 paragraph to 1.75 times the root font size making text larger */
    margin-bottom: 1rem;
    /* Adds a vertical space below the paragraph. i.e. full stack developer so that below buttons to download cv and contact look better and apart */
}

.title{
    font-size: 3rem;
    /* Sets font size of name Rutuj Raut which is title to 3 times the root font size
    this makes text significantly larger, which is typical for headings to make them visually dominant */
    text-align: center;
    /* Another redundant unrequired thing  */
}

#socials-container{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}

/* ICONS */

.icon {
    cursor: pointer;
    height: 2rem;
}

/* BUTTONS */

.btn-container{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn{
    font-weight: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;
}

.btn-color-1, .btn-color-2{
    border: rgb(53,53,53) 0.1rem solid;
}

.btn-color-1:hover, .btn-color-2:hover{
    cursor: pointer;
}

.btn-color-1, .btn-color-2:hover{
    background: rgb(53,53,53);
    color: white;
}

.btn-color-1:hover{
    background: rgb(0,0,0);

}

.btn-color-2{
    background: none;
}

.btn-color-2:hover{
    border: rgb(255,255,255) 0.1rem solid;
}

.btn-container{
    gap: 1rem;
}


/* ABOUT SECTION */

#about{
    position: relative;
    /* It allows child element like arrow to be positioned relative to this parent section */
    /* without relative absolutely positioned chidren wouldn't align properly */
}

.about-containers{
    gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;

    /* making about-containers flex horizontally alignss experience and education sections */
}


.about-details-container{
    justify-content: center;
    flex-direction: column;
    /* This class represents experiance education and about me paragraph and we want it to be column wise */
}

.about-containers,.about-details-container{
    display: flex;
}


.about-pic{
    border-radius: 2rem;
    /* Some asthetic looks */
}

.arrow{
    position: absolute;
    /* we want arrow to be allowed with respection to whole about section */
    right: -5rem;
    /* places 5 rem from right */
    bottom: 2.5rem;
    /* places 2.5 rem below about section */
}



.details-container{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex : 1;
    /* flex :1 is equivalant to writing flex-grow : 1; flex-shrink: 1; flex-basis:0; */
    /* flex-grow : 1; elements in container are allowed to grow equally with other siblings */
    /* flex-shrink : 1; means elements will decrease size equally */
    /* flex-basis: 0; set's starting width of .detail-container to 0, meaning its size will primarily depend on flex grow and available space in container */
    background: white;
    border-radius: 2rem;
    border: rgb(53,53,53) 0.1rem solid; 
    /* color set black for formality */
    border-color: rgb(163, 163, 163);
    text-align: center;
    
}

.section-container{
    gap: 4rem;
    height: 80%;
}

.section__pic-container{
    height: 400px;
    width: 400px;
    margin: auto 0;
    /* sets top and bottom margin to such that picture is in center and left,right margin to zero */
}

#experience{
    position: relative;
}

.experience-sub-title{
    color: rgb(85,85,85);

    font-weight: 600;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.experience-details-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    gap: 2rem;
}

.article-container{
    display: flex;
    text-align: initial;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
}

.article{
    display: flex;
    width: 10rem;
    justify-content: space-around;
    gap: 0.5rem;
}

.icon{
    display: flex;
    cursor: default;
}

/* PROJECT SECTION */

#projects{
    position: relative;
}

.color-container{
    border-color: rgb(163, 163, 163);
    background-color: rgb(250, 250, 250);
}

.project-img{
    border-radius: 2rem;
    width: 90%;
    /* This sets width of image 90% compared to it's parent container */
    /* We set 90% so that it leaves some space inside container */
    height: 90%;
    /* This sets height of image 90% compared to it's parent container */
}


.project-title{
    margin: 1rem;
    color: black;
}


.project-btn{
    color: black;
    border-color: rgb(163, 163, 163);
}


/* CONTACT */

#contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70vh;
}

.contact-info-upper-container{
    display: flex;
    justify-content: center;
    border: rgb(53,53,53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    background-color: rgb(250, 250, 250);
    margin: 2rem auto;
    border-radius: 2rem;
    padding: 0.5rem;
}

.contact-info-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem;
}

.contact-info-container p{
    font-size: larger;
}

.contact-icon{
    cursor: default;
}

.email-icon{
    height: 2.5rem;
}

/* Footer */

footer{
    height: 26vh;
    margin: 0 1rem;
}

footer p{
    text-align: center;
}