/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* custom scroll bar  */
::-webkit-scrollbar       { width      : .3rem; }
::-webkit-scrollbar-track { background : var(--clr-light); }
::-webkit-scrollbar-thumb { background : var(--clr-main); }

/* RESET */
* {
    box-sizing  : border-box;
    margin      : 0;
    padding     : 0;
    font-family : sans-serif; 
    transition  : .3s;
    font-family : var(--font-open-sans);
}
a    { text-decoration : none; }
li   { list-style      : none; }
html { scroll-behavior : smooth; }
body{
    background-color : var(--clr-light);
    overflow         : hidden;
    height           : 100vh;
    width            : 100vw; 
}
nav{
    position : sticky;
    width    : 100%;
    top      : 0;
}

/* LANDING PAGE REVEAL ANIMATION */
.overlay{
    position : relative;
    position : fixed;
    width    : 100vw;
    height   : 100vh;
    z-index  : 9;
    display  : flex;   
}
.bar{
    width      : 10vw;
    height     : 105vh;
    background : var(--clr-main);
    z-index    : 50;
}
.counter{
    position        : fixed;
    width           : 100%;
    height          : 100%;
    display         : flex;
    justify-content : flex-end;
    align-items     : flex-end;
    z-index         : 10;
    color           : var(--clr-light);
    padding         : .2em .4em;
    font-size       : 20vw;
    font-family     : var(--font-bebas-neue);
}

/* DARKMODE */
body:has(#darkmode:checked){
    --clr-light :#111;
    --clr-dark  :#f0f0f0;
}
.sub-header > h2{
    color       : var(--clr-main);
    text-align  : center;
    font-family : var(--font-bebas-neue);
    font-size   : 5rem;
}

/* GLOBAL VARIABLES */
:root{
    --font-size : 16px;

    --font-open-sans  : "Open Sans", sans-serif;
    --font-bebas-neue : "Bebas Neue", sans-serif;

    --clr-light      :#f0f0f0;
    --clr-dark       :#111;
    --clr-main       : #7BA000;
    --darkmode-width : 60px;
    --section-height : 100vh;
}

/* CUSTOM CURSOR */
.cursor{
    position         : fixed;
    width            : 40px;
    height           : 40px;
    margin-left      : -20px;
    margin-top       : -20px;
    border-radius    : 50%;
    border           : 2px solid var(--clr-dark);
    transition       : transform .2s ease;
    transform-origin : center center;
    pointer-events   : none;
    z-index          : 99;
}
.cursor-grow{
    transform        : scale(3);
    background-color : #fff;
    mix-blend-mode   : difference;
    border           : none;
}

/* NAVIGATION */
.navigation{
    display          : flex;
    justify-content  : space-between;
    align-items      : center;
    background-color : var(--clr-light);
    z-index          : 1;
    padding-inline   : 1rem;
}
.nav-logo > a{
    font-family : var(--font-bebas-neue);
    color       : var(--clr-main);
    font-size   : 2rem;
}
.hamburger{
    display         : flex;
    justify-content : center;
    align-items     : center;
}
.hamburger > i {
    padding   : 1.5rem;
    color     : var(--clr-main);
    font-size : 2rem;
}
#hamburger{
    display : none;
}
.fa-xmark{
    display : none;
}
.nav-menu{
    right            : 1%;
    padding          : 1rem 0;
    border-radius    : .5rem;
    z-index          : 1;
    transform        : translateY(-100%);
    position         : fixed;
    background-color : var(--clr-main);
    border           : 1px solid var(--clr-light);
}
.nav-menu > * {
    margin-inline : .5rem;

}
.nav-menu a {
    color   : var(--clr-light);
    display : block;
    padding : 1rem;
}
.nav-menu a:hover {
    background-color : var(--clr-light);
    color            : var(--clr-main);
    border-radius    : .5rem;
}
.darkmode{
    display     : flex;
    align-items : center;
    gap         : 1rem;
    padding     : 1rem;

}
.darkmode:hover{
    background-color : var(--clr-light); 
    border-radius    : .5rem;
}
.darkmode:hover > label{
    color : var(--clr-main);
}
.darkmode > label{
    color       : var(--clr-light);
    user-select :none;
}
.darkmode-content{
    width            : var(--darkmode-width);
    height           : calc(var(--darkmode-width)/2);
    border-radius    : var(--darkmode-width);
    background-color : var(--clr-dark);
}
.darkmode-circle{
    width            : calc(var(--darkmode-width) / 2);
    height           : calc(var(--darkmode-width) / 2);
    border           : 5px solid var(--clr-dark);
    border-radius    : var(--darkmode-width);
    background-color : var(--clr-light);
}
#darkmode{
    display : none;
}

/* LANDING */
.landing{
    display         : flex;
    justify-content : space-evenly;
    align-items     : center;
    height          : var(--section-height);
}
.landing-img>img{
    max-width : 600px;
    width     : 35vw;
    min-width : 300px;
}
.landing-content > p {
    font-size    : 2rem;
    font-weight : bold;
}
.landing-content > p >mark{
    color            : var(--clr-light);
    background-color : var(--clr-main);
    border-radius    : .5rem;
}
.landing-content > h1{
    font-family : var(--font-bebas-neue);
    font-size   : 10rem;
    color       : var(--clr-dark);
}
.landing-btn{
    display : flex;
    gap     : 1rem;
    
}
.landing-btn > a:hover{
    transform : scale(.9);
}
.landing-btn > a:active{
    transform : scale(1);
}
.landing-btn > a:nth-child(1){
    border           : none;
    outline          : none;
    background-color : var(--clr-dark);
    padding          : 1rem 5%;
    border-radius    : .5rem;
    color            : var(--clr-light);
    font-weight      : bold;
}

/* ABOUT */
.about{
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 5rem;
    padding         : 5rem 0;
}
.about-container{
    display         : flex;
    gap             : 5rem;
    justify-content : center;
    align-items     : center;
}
.about-container-reverse{
    flex-direction : row-reverse;
}
.about-content{
    display     : flex;
    align-items : center;
}
.about-content > p{
    width     : 40ch;
    color     : var(--clr-dark);
    font-size : .9rem;
}
.about-img > img {
    width  : 250px;
    filter : grayscale();
}
.about-img > img:hover {
    filter    : none;
    transform : scale(1.1);
}
.about-img-one > img{
    transform     : rotate(10deg);
    border-radius : .5rem;
}
.about-img-two > img{
    transform     : rotate(-10deg);
    border-radius : .5rem;
}

/* PROJECTS */
.projects{
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 3rem;
    padding        : 5rem 0;
}
.cards{
    display         : flex;
    justify-content : center;
    gap             : 1rem;
    
}
.cards:hover > :not(:hover){
    opacity   : .5;
    transform : scale(.9);
}
.card{
    background-color : var(--clr-light);
    padding          : 1rem;
    border           : 1px solid var(--clr-main);
    width            : 50%;
}
.card-body > p{
    color : var(--clr-main);
}
.card > img {
    height     : 200px;
    object-fit : contain;
}
.card > a {
    background-color : var(--clr-main);
}
.card-title{
    color       : var(--clr-main);
    font-family : var(--font-bebas-neue);
    padding     : 1rem 0;
    font-size   : 2rem;
}
.card-tag{
    border        : 1px solid var(--clr-main);
    border-radius : 100px;
    padding       : .5rem 1.5rem;
    font-size     : .9rem;
    color         : var(--clr-main);
    margin-bottom : .5rem;
    display       : inline-block;
}
.card-tag:hover{
    background-color : var(--clr-main);
    color            : var(--clr-light);
}
#card-btn{
    background-color : var(--clr-main);
    padding          : .8rem 2rem;
    color            : var(--clr-light);
    border-radius    : .5rem;
    display          : block;
    text-align       : center;
    margin           : 2rem 0;
}
#card-btn:hover{
    transform : scale(.9);
}

/* TOOLS */
.tools{
    display          : flex;
    flex-direction   : column;
    align-items      : flex-start;
    padding          : 5rem;
    background-color : var(--clr-main);
    gap              : 3rem;
}
.tools-header > h2{
    color : var(--clr-light);
}
.tools-container{
    display   : flex;
    flex-wrap : wrap;
    gap       : 1rem;
}
.tools-content{
    display          : flex;
    padding          : 1rem 2rem;
    background-color : var(--clr-light);
    color            : var(--clr-dark);
    justify-content  : center;
    align-items      : center;
    border-radius    : .5rem;
    gap              : 1rem;
}

/* CONTACT */
.contact{
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 5rem;
    padding        : 5rem;
    width          : 100vw;
}
.contact-content{
    width         : 80%;
    padding       : 2rem;
    min-width     : 350px;
    max-width     : 800px;
    border        : 1px solid var(--clr-main);
    border-radius : .5rem;
    gap           : 1rem;
}
.contact-inputs{
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}
.contact-inputs input{
    height           : 50px;
    padding          : 1rem;
    background-color : var(--clr-light);
    border           : 1px solid var(--clr-dark);
    color            : var(--clr-dark);
}
.contact-inputs label{
    color : var(--clr-main);
}
.contact-inputs textarea{
    background-color : var(--clr-light);
    color            : var(--clr-dark);
    height           : 200px;
    padding          : 1rem;
    border           : 1px solid var(--clr-dark);
}
.contact-inputs button{
    padding          : 1rem 2rem;
    background-color : var(--clr-main);
    color            : var(--clr-light);
    border           : none;
    border-radius    : .5rem;
}

/* FOOTER */
.footer{
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    text-align       : center;
    padding          : 5rem 0;
    background-color : var(--clr-main);
}
.follow{
    display : flex;
    gap     : 2rem;
}
.follow > a {
    color     : var(--clr-light);
    font-size : 3rem;
}
.footer-content{
    display     : flex;
    align-items : center;
    margin-top  : 2rem;
    gap         : 3rem;
}
.footer-content > p{
    font-size   : .8rem;
    color       : var(--clr-light);
    font-weight : bold;
}

/* RESPONSIVE */
@media (max-width:1280px){
    .card{
        width : 350px;
    }
    .cursor{
        display : none;
    }
}
@media (max-width:950px){
    .cards{
        flex-direction : column;
    }
    .landing-content > h1{
        font-size : 5rem;
    }
    .landing{
        flex-direction : column;
        gap: 1rem;
    }
    .landing-content{
        display        : flex;
        flex-direction : column;
        text-align     : center;
    }
    .about-container{
        flex-direction : column;
    } 
    .tools-content{
        flex-grow : 1;
    }
    .landing-btn{
        justify-content: center;
        align-items: center;
    }
    .landing-btn > a {
        width: 100%;
    }
}

@media (max-width:400px){
    .tools{
        flex-direction : column;
        align-items    : center;
    }
}