@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400&display=swap');
:root{
    --navbarColor:rgb(9, 24, 47);
    --bodyColor:rgb(10, 25, 47);
    --hoverTextColor:rgb(95, 243, 209);
    --linkHoverColor:rgba(95, 243, 209, .2)
}
*{
    margin:0;
    padding:0;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: var(--bodyColor);
    font-family: 'Hanken Grotesk', sans-serif;
    position: relative;
}
::-webkit-scrollbar{
    width: 5px;
    background:transparent;
}
::-webkit-scrollbar-thumb{
    background-color: var(--hoverTextColor);
    border-radius: 5px;
}
/* Navbar Styles */
.mela-logo{
    width: 100px;
    margin-top: 10px;
    cursor: pointer;
}
.navbar{
    height: 8vh;
    width: 100vw;
    background: var(--navbarColor);
    color:white;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    position: fixed;
    top:0;
    display: flex;
    justify-content: space-between;
    z-index:1;
}
.navbar ul{
    width: 25%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin-right: 50px;
}
.navbar ul a {
    text-decoration: none;
    color:white;
    transition:all 400ms;
}
.navbar ul a:hover{
    color:var(--hoverTextColor);
    filter:drop-shadow(0 0 12px var(--hoverTextColor));
}
.navbar ul li:last-of-type a{
    padding:10px 10px;
    color:var(--hoverTextColor);
}
.navbar ul li:last-of-type{
    padding:10px 0px;
    border:2px solid var(--hoverTextColor);
    border-radius: 5px;
    cursor: pointer;
    transition: all 200ms;
}
.navbar ul li:last-of-type:hover{
    background-color: rgba(95, 243, 209, .1);
}
.hamburger-btn, .close-hamburger-btn{
    display: none;
}
.close-hamburger-btn{
    width: 50px;
    height: 50px;
}
.x-icon{
    height: 100%;
    width: 100%;
}
.burger-line{
    height: 3px;
    width: 100%;
    background-color: white;
}
.line2{
    width: 75%;
}
.line3{
    width: 50%;
}
/* Sidebar Styles */
.sidebar{
    height: 8vw;
    position: fixed;
    right: 15px;
    bottom: 10px;
}
.sidebar ul{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
}
.mobile-sidebar{
    display: none;
}
.github-icon, .linkedin-icon{
    width: 20px;
    height: 20px;
    cursor: pointer;
    color:white;
    transition: all 300ms;
}
.github-icon:hover{
    color:var(--hoverTextColor);
    filter:drop-shadow(0 0 10px var(--hoverTextColor));
}
.linkedin-icon:hover{
    fill:var(--hoverTextColor);
    filter:drop-shadow(0 0 10px var(--hoverTextColor));
}
/* Sections*/
.introduction{
    height: 50vh;
    margin-bottom: 30vh;
    scroll-margin-top:20vh;
    font-size: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.introduction-h2{
    position: relative;
    color:var(--hoverTextColor);
    opacity: 0;
    transition: all .9s;
}
.introduction-h2 p{
    font-size: .3em;
    color:white;
}
.introduction h2::before{
    content:"Hi, my name is";
    font-size:.4em;
    position: absolute;
    top: -30px;
    color:white;
}
.introduction h2::after{
    content:"I'm a Full-Stack Developer";
    font-size:.35em;
    position: absolute;
    bottom:-25px;
    right:0;
    color:white;
}
.about-me{
    width: 50%;
    font-size: 1.25em;
    line-height: 1.5;
    scroll-margin-top: 10vh;
    margin-left: -5vw;
    opacity: 0;
    transition: all .9s;
}
.about-me h2{
    width: 100%;
    font-size: 2em;
    margin-bottom: 25px;
    color:var(--hoverTextColor);
    position: relative;
    z-index: -1;
}
.about-me h2::after, .projects-section h2::after{
    content:"";
    width: 250px;
    height: 1px;
    background-color: rgba(255, 255, 255, .5);
    position: absolute;
    top:50%;
    left:35%;
}
/* Projects Section */
.sections-wrapper{
    width: 55vw;
    margin:auto;
    margin-top: 10vw;
    color:white;
}
.projects-section{
    max-width: 100%;
    margin-top: 10%;
    margin-left: -5vw;
    opacity: 0;
    scroll-margin-top: 10vh;
    font-size: 1.25em;
    transition: all .9s;
}
.projects-section h2{
    width: 100%;
    font-size: 2em;
    color:var(--hoverTextColor);
    position: relative;
    margin-bottom: 10%;
}
.projects-section h2::after{
    left:15%;
}
.projects{
    width:100%;
    height:fit-content;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20%;
    opacity: 0;
}
.projects-left{
    margin-left: -10%;
    transition: all .9s;
}
.projects-right{
    margin-left: 15%;
    transition: all .9s;
}
.projects-img{
    width: 100%;
}
.mobile-projects{
    width: 100%;
}
.projects-description{
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding:0 10px;
}
.projects-description p{
    text-align: center;
}
.projects-tags3, .projects-tags2, .mobile-projects-tags2, .mobile-projects-tags3{
    font-size: .8em;
    color:rgba(255, 255, 255, .5);
    display:flex;
    justify-content: space-between;
}
.projects-tags2{
    width: 25%;
}
.projects-tags3{
    width: 50%;
}
.mobile-projects-tags3{
    width: 100%;
}
.projects h3{
    margin-bottom: 10px;
    font-size: 1.5em;
    color:var(--hoverTextColor)
}
.projects-links{
    margin-top:15px;
}
.projects-links a{
    text-decoration: none;
    color:var(--hoverTextColor);
    margin:0px 15px;
    position: relative;
    transition: color 100ms, filter 400ms;
}
.projects-links a:hover{
    filter:drop-shadow(0 0 10px var(--hoverTextColor))
}
.projects-links a:active{
    color:rgb(55, 175, 147);
}
/* This class is used to show elements on scroll */
.visible-elements{
    opacity: 1;
    margin-left: 0;
}
/* Contact Section */
.contact{
    height: 40vh;
    margin:25% 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    opacity: 0;
    transform: translateY(200px);
    transition: all .9s;
}
.visible-contact-section{
    opacity: 1;
    transform: translateY(0);
}
.contact h2{
    font-size: 3.5em;
}
.contact p{
    font-size: 1.4em;
}
.contact a{
    padding:20px 40px;
    border:1px solid var(--hoverTextColor);
    border-radius: 5px;
    text-decoration: none;
    color:var(--hoverTextColor);
    transition:all 200ms;
}
.contact a:hover{
    background-color: rgba(95, 243, 209, .1);
}
/* Media Queries */
/* Laptops */
@media only screen and (max-width:1280px){
     /* Navbar */
    .navbar ul{
        width: 35vw;
    }
    .sections-wrapper{
        width: 65vw;
    }
    .introduction{
        margin:25vh 0;
    }
    /* About Section */
    .about-me{
        width: 100%;
    }
    .about-me h2::after{
        left:22%;
    }
    /* Projects Section */
    .projects-section h2::after{
        left:18.5%;
    }
    .projects-tags2{
        width: 30%;
    }
    .projects-tags3{
        width: 45%;
    }
    .contact{
        margin:25vh 0;
    }
}   
@media only screen and (max-width:1024px){
    body, html{
        overflow-x:hidden;
    }
    .navbar ul{
        width: 50%;
        font-size: 1.1em;
    }
    .sections-wrapper{
        width: 80vw;
    }
    .introduction{
        text-align: center;
    }
    .introduction h2{
        font-size: 1.2em;
    }
    .projects-tags{
        width: 50%;
    }
    .contact{
        height: 65vh;
    }
}
@media only screen and (max-width:768px){
    .navbar ul{
        width: 60%;
        font-size: 1em;
    }
    /* Introduction Section */
    .introduction-h2{
        min-width: 54%;
    }
    /* About section */
    .about-me h2::after{
        left:35%;
    }
    /* Projects */
    .projects{
        flex-direction: column;
    }
    .projects:nth-of-type(1), .projects:nth-of-type(3), .projects:nth-of-type(5), .projects:nth-of-type(7){
        flex-direction: column-reverse;
    }
    .projects-section h2::after{
        left:30%;
    }
    .projects-links{
        margin-top: 100px;
    }
    .projects-links a {
        border:1px solid var(--hoverTextColor);
        padding:10px 15px;
        border-radius: 10px;
        transition:all linear 200ms;
    }
    .projects-links a:hover{
        background-color: var(--linkHoverColor);
        filter:none;
    }
    .projects-image-wrapper{
        margin-bottom: 50px;
    }
    .projects-tags3{
        width: 100%;
    }
    .mobile-projects-image-wrapper{
        width: 60%;
    }
    .contact h2{
        font-size: 3em;
    }
    .contact p {
        font-size: 1.3em;
        text-align: center;
    }
}
@media only screen and (max-width:540px){
    .navbar{
        height: 7vh;
    }
    .navbar ul{
        display: none;
    }
    .mela-logo{
        width: 50px;
    }
    .hamburger-btn{
        margin-top: 4%;
        margin-right: 5%;
    }
    .hamburger-btn, .close-hamburger-btn{
        display: flex;
        width: 40px;
        height: 25px;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }
    .close-hamburger-btn{
        height: 50px;
        transform: scale(1.5) translate(10px, 20px);
    
    }
    .mobile-sidebar{
        width: 80vw;
        height: 100vh;
        background-color: var(--navbarColor);
        border-left: 1px solid rgba(255, 255, 255, .2);
        position: fixed;
        display: block;
        z-index: 4;
        top:0;
        right: -80vw;
        box-shadow: 0 0 5px rgba(255, 255, 255, .3);
        transition: all 350ms ease-in-out;
    }
    .mobile-sidebar ul{
        height: 35%;
        list-style: none;
        margin-top: 35%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
    }
    .list-elems {
        opacity: 0;
        margin-left: 15px;
        transition:all 250ms ease-in;
    }
    .active-li{
        opacity:1;
        margin-lefT:0;
    }
    .mobile-sidebar a {
        min-width: 100%;
        min-height: 100%;
        display: block;
        color:white;
        text-decoration: none;
        font-size: 1.5em;
        line-height: 2.5;
    }
    .active-mobile-sidebar{
        right: 0;
    }
    .dark-div{
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .5);
        position: fixed;
        top:0;
        left:0;
        z-index: 1;
        display: none;
    }
    .activeDark{
        display: block;
    }
    /* Introduction */
    .introduction h2{
        font-size: 1.2em;
    }
    /* About me */
    .about-me h2::after{
        left:48%;
    }
    /* Projects */
    .projects-description{
        font-size: .9em;
    }
    .mobile-projects-image-wrapper{
        width: 80%;
    }
    .sidebar{
        width: 30%;
        right: 50%;
        position: absolute;
        transform: translateX(50%);
    }
    .sidebar ul{
        display: flex;
        flex-direction: row;
    }
}
/* iPhone 14 Pro Max/13 Pro Max/12 Pro Max */
@media only screen and (max-width:430px){
    .navbar{
        height: 6vh;
    }
    .hamburger-btn, .close-hamburger-btn{
        height: 25px;
        width: 35px;
        align-self: center;
        margin-top:0;
    }
    /* The div that contains the github and linkedin icons */
    .sidebar{
        width: 60%;
    }
    /* Mobile Sidebar */
    .mobile-sidebar{
        width: 100vw;
        right: -100vw;
    }
    .active-mobile-sidebar{
        right:0;
    }
    .mobile-sidebar ul{
        height: 45%;
    }
    /* Sections Wrapper */
    .sections-wrapper{
        width: 95vw;
        padding-bottom: 100px;
    }
    /* Introduction Section */
    .introduction h2{
        font-size: 1em;
    }
    /* About me Section */
    .about-me h2, .projects-section h2{
        font-size: 1.5em;
    }
    .about-me h2::after{
        width: 200px;
        left:42%;
    }
    /* Projects Section */
    .projects-section h2::after{
        left: 150px;
    }
    .mobile-projects-img-wrapper{
        width: 70%;
    }
    .mobile-projects-img{
        height: 90%;
    }
    .projects-tags2, .projects-tags3{
        width: 35%;
        margin-bottom: 50px;
        font-size: .7em;
    }
    .projects-tags3{
        width: 55%;
    }
    .mobile-projects-tags3{
        width: 95%;
    }
    .projects-links{
        font-size: 1em;
    }
    .contact{
        margin-bottom: 10vh;
    }
}
@media screen and (max-width:376px) {
    .contact h2{
        font-size: 2em;
    }
    .contact p{
        font-size: 1em;
    }
}