* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #0EA8F5;
    font-family: 'Poppins', sans-serif;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    transition: .5s;
}

.logo {
    color: #24262C;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;

    & a{
        text-decoration: none;
        color: #24262C;
        cursor: pointer;
    }
}

.nav-links {
    display: flex;
    width: 30%;
    justify-content: space-around;

    & li{
        list-style: none;
    }

    & a{
        color: #24262C;
        text-decoration: none;
        letter-spacing: 3px;
        font-weight: bold;
        font-size: 14px;

        &:hover{
            color: white;
            transition: 0.5s;
        }
    }
}

.burger {
    display: none;
    cursor: pointer;
    & div{
    
        width: 25px;
        height: 3px;
        background-color: #24262C;
        margin: 5px;
    }
}

.container{
    padding: 0 20vw;
    text-align: center;

    & .heading {
        font-size: 20px;
        padding-top: 15vh;
        text-align: center;
        color: rgb(44, 46, 49);
        font-family: 'Poppins', sans-serif;
        letter-spacing: 1px;
    }

    & h3{
        font-size: 18px;
        font-weight: normal;
    }
    & img#bannerImg{
        padding-top: 9.5vh;
        padding-bottom: 7vh;
        max-width: 100%;
        max-height: 100%;
    }
}

.topAboutMe {
    background-color: #0EA8F5;
    background-position-x: 100vw;
    margin: 0px 0px;
}

.aboutHeading {
    color: rgb(255, 255, 255);
    padding: 120px 80px 40px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1.5px;
    font-size: 20px;

    & p {
        margin-top: 5vh;
        font-weight: normal;
        font-size: 18px;
        
        & strong {
            color: rgb(44, 46, 49);
        }
    }
}

.aboutCard{
    padding: 3vh 2vw;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: -100px;
    z-index: 1;
}
.aboutSkill h1{
    margin-bottom: 15px;
    text-transform: uppercase;
}
.aboutDetails {
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1vw;
    border-bottom: 1px rgb(184, 182, 182) solid;
    
    & .itemCard {
        & img#cardIcon{
            max-width: 30%;
            max-height: auto;
            margin: 0px 25%;
        }
        & h2{
            margin-top: 3vh;
            margin-bottom: 3vh;
        }
        & li{
            list-style: none;
        }
        & #skillHeading{
            color: #0EA8F5;
        }
    }
}

.bio-bullet {
    position: relative;
    display: inline-block;
}

.bio-bullet::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(17, 0, 255, 0.154);
    z-index: -1;
    transition: width 1s ease-in-out;
}

.bio-bullet.highlighted::before {
    width: 100%;
}

@keyframes highlight {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.bio-bullet.highlighted {
    animation: highlight 2s ease-in-out;
}

.linkItems{
    width: 100%;
    padding-top: 40px;
    padding-bottom: 180px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;

    & img{
        width: 100px;
        opacity: 0.7;
        
        &:hover{
        opacity: 1;
    }
    }

    
}

.project .projectCardContainer {
    width: 100%;
    height: 100%;
    margin-top: 80px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.projectCard {
    margin: 20px;
    padding: 10px;
    background-color: #0EA8F5;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 40% 60%;
    box-shadow: 2px 2px rgb(221, 220, 220);
    transition: all 0.8s;

    & .projectPic{
        width: 100%;
        margin: auto 0;
    }

    & img{
        width: 100%;
        height: 150px;
        object-fit: contain;
    }
    & p{
        margin: auto 0;
        font-size: 15px;
    }

    &:hover{
        background-color: #06415e;
        color: white;
    }

    .projectDesc{
        display: flex;
        flex-direction: column;
        max-height: 100%;
        padding: 10px;
    
        & button{
            padding: 5px;
            font-size: 14px;
            border-radius: 8px;
            border-style: none;
            color: rgb(255, 255, 255);
            background-color: rgb(44, 46, 49);
            &:hover{
                background-color: rgb(10, 10, 10);
                color: rgb(67, 170, 238);
                cursor: alias;
            }
        }
    } 
}

.container .Links {
    & .linkHeading{
        padding-top: 100px;
        padding-bottom: 50px;
        color: rgb(44, 46, 49);
    }
}

[data-scroll] {
    transition: all 2s;
  }
  [data-scroll="in"] {
    opacity: 1;
    transform: translateY(50);
  }
  [data-scroll="out"] {
    opacity: 0;
    transform: translateY(100px);
  }
@media screen and (min-width: 1400px) {
    .container{
        width: 1400px;
        margin: 0 auto;
        padding: 0px 200px;
    }
}
@media screen and (max-width: 1400px){
    .container{
        padding: 0px 100px;
    }
}


@media screen and (max-width: 1024px){
    .container{
        padding: 0px 50px;
    }
    .nav-links{
        width: 60%;
    }
    .aboutCard{
        position: relative;
        top: -10vh;
    }
    .aboutHeading{
        font-size: 15px;
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .aboutDetails{
        padding: 0vh;
    }
    .project .projectCardContainer .projectCard {
        display: grid;
        grid-template-columns: 30% 70%;
    }
    .project .projectCardContainer .projectCard p{
        font-size: 1.5vw;
    }
    .project .projectCardContainer #projectCard h2{
        padding: 70px 0;
        font-size: 22px;
    }
}

@media screen and (max-width: 768px){
    body{
        overflow-x: hidden;
    }

    .nav-links{
        position: absolute;
        right: 0;
        height: 40vh;
        top: 8vh;
        background-color: #0EA8F5;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .nav-links li{
        opacity: 0;
    }

    .burger{
        display: block;
    }

    .container {
       padding: 0px 10px;
    }

    .container .heading {
        font-size: 15px;
    }

    .container h3{
        font-size: 15px;
    }

    .aboutHeading{
        font-size: 15px;
        padding-top: 100px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .aboutHeading p{
        font-size: 15px;
    }

    .aboutCard {
        top: -80px;
    }

    .aboutDetails{
        padding-bottom: 3vh;
    }
    .project .projectCardContainer{
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px 10px;
    }
    .project .projectCardContainer .projectCard{
        padding: 10px;
        margin: 0px auto 5px;
        max-height: 100%;
        width: 320px;
        display: grid;
        grid-template-columns: 1fr;

    }
    .project .projectCard .projectDesc{
        overflow: hidden;
        padding: 10px;
    }

    .project .projectCard .projectDesc p{
        padding: 5px;
        font-size: 3vw;
    }

    .linkItems{
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        gap: 8px;
    }

    .linkItems #linkLogo{ 
        width: 120px;
        border-style: solid;
        border-width: 1px;
        border-color:  #323232;
        padding: 8px;

        & img {
            object-fit: contain;
            height: 20px;
        }
    }

    img#cardIcon {
        width: 40px;
        max-width: 48px;
    }

}

.nav-active {
    transform: translateX(0%);
}

.nav-off{
    transform: translateX(100%);
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translate(0px);
    }
}