:root {
    --black-color: #1d1d1f;
    --white-color: #f5f5f7;
    --sapphire-blue: #0F52BA;
    --royal-blue: #4169E1;
    --steel-blue: #4682B4;
    --teal-blue: #008080;
    --seafoam-green: #9FE2BF;
    --mid-night-blue: #191970;
    --font-family: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--white-color);
}

hr {
    background-color: var(--black-color);
    border: 3px solid var(--mid-night-blue);
    width: 100%;
}

/* Utility Classes */
.grid {
    display: grid;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-center-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flex-column {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.flex-align-items {
    display: flex;
    align-items: center;
}

.margin-top-10vh {
    margin-top: 10vh;
}

/* navbar */
nav {
    align-items: center;
    justify-content: space-between;
    height: 12vh;
    background-color: var(--black-color);
}

li {
    list-style: none;
}

#nav-title-li {
    font-size: 2rem;
    padding-left: 1.5rem;
    font-family: var(--font-family);
    color: var(--white-color);
    /* font-weight: 300; */
}

#nav-resume-li {
    margin-right: 1rem;
    border-radius: 50px;
}
#nav-resume-li > a {
    padding: 0.8rem 1rem;
    font-size: 1.3rem;
    font-family: var(--font-family);
    color: var(--seafoam-green);
    text-decoration: none;
    border-radius: inherit;
    border: 1px solid green;
    transition: background-color 0.4s ease-out, border 0.4s ease-out;
}

#nav-resume-li > a:hover {
    background-color: #9fe2bf13;
    border: 1px solid #9fe2bf13;
}
@media screen and (max-width: 470px) {
    nav {
        height: 8vh;
    }

    nav>li {
        font-size: 1.5rem;
    }
}

/* Section-1: Introduction */
#introSection {
    grid-template-areas:
        'profile-pic description';
    height: 95vh;
    grid-template-columns: 1fr 1fr;
    border-bottom: 5px solid var(--mid-night-blue);
    margin-bottom: 2rem;
    /* background-color: brown; */
}

#profilePicDiv {
    grid-area: profile-pic;
    /* background-color: brown; */
    height: 100%;
}

#profilePic {
    background-color: var(--black-color);
    height: 330px;
    width: 330px;
    border: 10px solid orangered;
    border-radius: 50%;
    margin-bottom: 2rem;
    box-shadow: 0px 0px 23px 0px var(--black-color);
}

#profilePic>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#introName {
    color: var(--royal-blue);
    font-size: 2.5rem;
    font-family: var(--font-family);
}

#introDescriptionDiv {
    /* background-color: brown; */
    grid-area: description;
    height: 100%;
}

#introDescriptionDiv>p {
    color: var(--black-color);
    font-family: var(--font-family);
    font-size: 2.5rem;
    padding: 2rem;
}

/* Media queries for Introduction Section */
@media screen and (max-width: 1290px) {
    #introSection {
        height: 90vh;
    }
}

@media screen and (min-width: 750px) and (max-width: 960px) {
    #introSection {
        grid-template-columns: 2fr 3fr;
    }

    #introDescriptionDiv>p {
        padding: 2rem 1.5rem 0rem 4rem;
        font-size: 2rem;
    }

    #profilePic {
        height: 200px;
        width: 200px;
    }

    #introName {
        font-size: 2rem;
    }
}

@media screen and (max-width: 749px) {
    #introSection {
        grid-template-areas:
            'profile-pic'
            'description';
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr;
        height: 85vh;
    }

    #profilePicDiv {
        flex-direction: row;
    }

    #introName {
        display: none;
    }

    #profilePic {
        margin: 2rem;
        height: 220px;
        width: 220px;
    }

    #introDescriptionDiv>p {
        font-size: 1.8rem;
        padding: 0rem 3rem;
    }
}

@media screen and (max-width: 599px) {
    #introSection {
        grid-template-rows: 1fr 1fr;
        height: 76vh;
    }

    #introDescriptionDiv>p {
        font-size: 1.5rem;
        text-align: center;
    }

    #profilePic {
        height: 180px;
        width: 180px;
    }
}

/* Section-3: Skills (4 skills) */
#skillSection {
    grid-template-areas:
        'skills skills skills skills'
        'web btrap c cpp';
    grid-template-rows: 1fr 3fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* border-bottom: 10px solid var(--mid-night-blue); */
    padding-bottom: 3rem;
    height: 80vh;
}

#topic-skills {
    grid-area: skills;
    font-family: var(--font-family);
    padding-left: 4.5rem;
    font-size: 2.5rem;
    color: var(--black-color);
    margin-bottom: 2rem;
}

#skill-web {
    /* background-color: crimson; */
    grid-area: web;
}

.skill-info {
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--font-family);
    color: var(--sapphire-blue);
    margin-top: 15px;
}

#skill-web>img {
    /* border-radius: 50%; */
    object-fit: contain;
    height: 70%;
    width: 80%;
    /* border: 5px solid var(--mid-night-blue); */
}

#skill-bootstrap {
    /* background-color: darkolivegreen; */
    grid-area: btrap;
}

#skill-bootstrap>img {
    background-color: var(--seafoam-green);
    border-radius: 50%;
    object-fit: contain;
    height: 50%;
    width: 55%;
    padding: 2rem 2.5rem;
    border: 10px solid var(--mid-night-blue);
    margin-top: 0.5rem;
}

#skill-c {
    /* background-color: blue; */
    grid-area: c;
}

#skill-c>img,
#skill-cpp>img {
    background-color: var(--seafoam-green);
    border-radius: 50%;
    object-fit: contain;
    height: 50%;
    width: 55%;
    padding: 2rem 2.5rem;
    border: 10px solid var(--mid-night-blue);
}

#skill-cpp {
    /* background-color: darkgoldenrod; */
    grid-area: cpp;
}

/* Media queries for skills section */
@media screen and (min-width: 700px) and (max-width: 960px) {
    #skillSection {
        height: 60vh;
    }
}

@media screen and (min-width: 451px) and (max-width: 699px) {
    #skillSection {
        grid-template-areas:
            'skills skills'
            'web btrap'
            'c cpp';
        grid-template-rows: 1fr 2fr 2fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 450px) {
    #skillSection {
        grid-template-areas:
            'skills'
            'web'
            'btrap'
            'c'
            'cpp';
        height: 160vh;
        grid-template-rows: 1fr 3fr 3fr 3fr;
        grid-template-columns: 1fr;
        margin-top: 5vh;
    }

    #topic-skills {
        font-size: 1.8rem;
    }

    #skill-bootstrap>img,
    #skill-c>img {
        margin-top: 0rem;
        width: 50%;
        height: 20%;
        padding: 6rem 2rem;
    }
}

/* Section-4: Projects */
#projectSection {
    grid-template-areas:
        'projects projects'
        'netflix temp';
    grid-template-rows: 1fr 5fr;
    grid-template-columns: 1fr 1fr;
    height: 90vh;
}

#topic-projects {
    grid-area: projects;
    font-family: var(--font-family);
    padding-left: 4.5rem;
    font-size: 2.5rem;
    color: var(--black-color);
}

#netflix-clone {
    /* background-color: cornflowerblue; */
    grid-area: netflix;
    padding: 1rem;
}

#temp-cnvtr {
    /* background-color: aqua; */
    grid-area: temp;
    padding: 1rem;
}

#netflix-clone>div,
#temp-cnvtr>div {
    justify-content: space-around;
    width: 70%;
    height: 10vh;
}

#netflix-clone>div>a>button,
#temp-cnvtr>div>a>button {
    font-size: 1.2rem;
    background-color: var(--sapphire-blue);
    padding: 1rem;
    width: 120px;
    border-radius: 50px;
    font-family: var(--font-family);
    color: var(--white-color);
    border: none;
}

button:hover {
    cursor: pointer;
}

#netflix-clone>div>a,
#temp-cnvtr>div>a {
    color: var(--black-color);
    text-decoration: none;
    outline: none;
}

.project-img {
    /* border: 2px solid red; */
    border: 5px solid var(--teal-blue);
    height: 60%;
    width: 70%;
    border-radius: 23px;
    box-shadow: 0px 0px 10px 0px var(--teal-blue);
    aspect-ratio: 16/9;
    margin-bottom: 2rem;
    object-fit: cover;
}

.project {
    font-size: 2rem;
    color: var(--teal-blue);
    font-family: var(--font-family);
}

/* Media queries for projects section */
/* @media screen and (max-width: 400px) {
    #projectSection {
        grid-template-areas:
        'projects'
        'netflix'
        'temp';
        grid-template-rows: 1fr 3fr 3fr;
        height: 100vh;
    }
} */

@media screen and (max-width: 960px) {
    #projectSection {
        grid-template-areas:
            'projects'
            'netflix'
            'temp';
        grid-template-rows: 1fr 3fr 3fr;
        height: 120vh;
    }
}

/* Section-5: Experience */
#experienceSection {
    grid-template-areas:
        'experience'
        'oasis';
    grid-template-rows: 1fr 3fr;
    height: 65vh;
    align-items: center;
    background-color: #9FE2BF;
    padding: 3rem 0rem;
    /* border-top-right-radius: 12px; */
    /* border-bottom-right-radius: 12px; */
    /* width: 95%; */
}

#topic-experience {
    grid-area: experience;
    font-family: var(--font-family);
    padding-left: 4.5rem;
    font-size: 2.5rem;
    /* margin-bottom: 2rem; */
    color: var(--mid-night-blue);
}

#topic-experience>h1 {
    width: 90%;
    border-bottom: 3px solid var(--mid-night-blue);
}

#exp-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: 3rem 3rem 3rem 8rem;
    border-radius: 8px;
    box-shadow: 0px 0px 5px 0px var(--steel-blue);
}

#exp-1 {
    /* background-color: blue; */
    color: var(--royal-blue);
    width: 100%;
    font-size: 2.5rem;
}

#exp-1-pos {
    font-size: 1.5rem;
    color: #1d1d1feb;
}

#oasis {
    grid-area: oasis;
    font-family: var(--font-family);
}

/* Media queries for Experience section */
@media screen and (max-width: 960px) {
    #experienceSection {
        grid-template-areas:
            'experience'
            'oasis';
        grid-template-rows: 1fr 3fr;
        height: 50vh;
    }
}

/* Last Section: Contact Me */
footer {
    grid-template-areas:
        'contact-me contact-me contact-me'
        'contact social address';
    height: 60vh;
    grid-template-rows: 1fr 4fr;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: var(--black-color);
    /* margin-top: 15vh; */
}

#topic-contact {
    grid-area: contact-me;
    color: var(--white-color);
    font-family: var(--font-family);
    padding: 2rem 3rem;
}

#contacts {
    /* background-color: brown; */
    display: flex;
    flex-direction: column;
    padding-top: 4.5rem;
    grid-area: contact;
    color: var(--white-color);
    padding-left: 3rem;
}

#contacts>span {
    font-family: var(--font-family);
    font-size: 1.3rem;
    line-height: 2rem;
}

#contacts>a>button {
    font-family: var(--font-family);
    color: var(--black-color);
    font-weight: 400;
    width: 160px;
    font-size: 1.1rem;
    padding: 0.8rem 0rem;
    margin: 0.5rem 0rem;
    border-radius: 50px;
    border: none;
}

#contacts>a {
    /* background-color: #008080; */
    width: 0;
    height: 0;
}

#social {
    /* background-color: aqua; */
    grid-area: social;
    font-family: var(--font-family);
    color: var(--white-color);
}

.social-handles {
    /* background-color: #191970; */
    box-sizing: border-box;
    width: 90%;
    margin: 0.5rem 1rem;
}

.social-handles>a>span {
    color: var(--white-color);
    padding: 0.4rem 1rem;
}

.social-handles>a {
    text-decoration: none;
    /* background-color: #008080; */
}

.social-handles>a:hover>span {
    text-decoration: underline;
}

#address {
    /* background-color: blanchedalmond; */
    grid-area: address;
    flex-direction: column;
}

#address>span {
    color: var(--white-color);
    font-family: var(--font-family);
    font-size: 1.2rem;
}

#topic-address {
    text-decoration: underline;
}

/* Media queries for footer section */
@media screen and (max-width: 500px) {
    footer {
        grid-template-areas:
            'contact-me'
            'contact'
            'address'
            'social';
        grid-template-rows: 1fr 3fr 3fr 3fr;
        height: 120vh;
    }
}