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

@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&family=Raleway: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;
    /* -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

main{
    display: flex;
    flex-direction: column;
}

/* ########################################################## */
/* ########################################################## */
/* ########################################################## */
/* ########################################################## */
/* ########################################################## */
/* ########################################################## */

/* ----------------------------------------------------------------- */
/* navbar/sidebar */

::-webkit-scrollbar{
    width: 12px;
    background-color: #282828;
}

::-webkit-scrollbar-thumb{
    background-color: rgb(109, 106, 106);
    height: 100px;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #CCCCCC;
}




.nav-wrapper{
    background-color: #282828;
    display: flex;
    position: fixed;
    align-items: center;
    width: 100%;
    height: 45px;
    font-family: 'Poppins',sans-serif;
    color: white;
    box-shadow: 0px 0px 6px 2.5px rgba(0,0,0,0.5);
    z-index: 4385;
}

.logodiv{
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    flex: 1;
}

.logodiv img{
    width: 35px;
    height: 30px;
    filter: invert(91%) sepia(6%) saturate(6%) hue-rotate(331deg) brightness(88%) contrast(98%);
}

.logodiv h1{
    color: #cccccc;
    padding: 0 3px;
    font-family: 'Prompt', sans-serif;
    border: 2px  solid;
    display: flex;
    align-items: center;
    height: 26px;
}

.nav--links{
    display: flex;
    gap: 1.5vw;
    height: 100%;
    align-items: center;
    justify-content: right;
    padding: 0 30px 0 10px;
    flex: 3;
}

.nav--links a{
    text-decoration: none;
    color: white;
}

.nav--links li{
    list-style: none;
    padding: 0 17px;
    height: 32px;
    display: flex;
    align-items: center;
}

.nav--links li:hover, .nav--links a:hover{
    background-color: #CCCCCC;
    color: #282828;
    transition: 0.2s;   
    border-radius: 2px; 
}

.hakdog{
    border: #cccccc 1px solid;
    border-radius: 2px;
}

.darkmode-div{
    padding-top: 2px;
    height: 100%;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.darkmode-div i{
    font-size: 1.5rem;
}
.darkmode-div i:active{
    transform: rotate(360deg);
    transition: .5s;
}

.nav--icon{
    display: none;
}

/* end of navbar/sidebar */
/* ----------------------------------------------------------------- */
/* main content */
/* intro */
#intro{
    background: linear-gradient(to right, #CCCCCC, white 95%); 
    transition: 1s;
    height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-top: 30px;
}

.intro--first{
    /* margin-left: 20px; */
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    flex-grow: 1;
    justify-content: flex-end;
}

.intro--first > h1{
    font-family: 'Prompt', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 7rem);
}
/* clamp(3.2rem, 4vw, 7rem) */
.name{
    position: relative;
}

.n{
    color: transparent;
    text-shadow: -1px 1px 2px rgba(255, 255, 255, 0.4),3px -3px 0 black;
    transition: 1s;
}

.name::before{
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    top: -10px;
    left: 30px;
    content: "HI THERE, I'M";
    font-size: clamp(1rem, 1.5vw, 5rem);
    font-weight: 300;
    font-style: italic;
}

.intro--first > p{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1vw, 5rem);
}

.intro--second{
    /* margin-left: 20px; */
    text-align: center;
    background-color: transparent  ;
    flex-grow: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.intro--second a{
    -webkit-tap-highlight-color: transparent;
    height: 25px;
    margin-top: 35px;
}

.j{
    font-size: clamp(1.8rem, 3vw, 5rem);
    color: transparent;
    text-shadow: -1px 1px 2px rgba(255, 255, 255, 0.5), 2px -3px 0 
    black;
    transition: 1s;
}
/* clamp(2.5rem, 3vw, 6rem) */
.intro--second i:active{
    transition: 1s;
    scale: 3;
}

/* end of intro */
/* ----------------------------------------------------------------- */
/* projects */
#projects{
    background: linear-gradient(to right, #CCCCCC, white 95%);
    transition: 1s;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr 4fr;
    gap: 20px;
    text-align: center;
    justify-items: center;
    padding-bottom: 150px;
}

.projectContainer{
    color: black;
    display: flex;
    justify-content: left;
    align-items: center;
    height: fit-content;
    margin-bottom: 25px;
    width: 90%;
    transition: 1s;
    overflow: hidden;
    background-color: white;
    padding: 20px;
    box-shadow: inset -3px 3px 15px 0px black;
}

.sec{
    justify-content: right;
}

.sec > .projectImg{
    margin: 20px;
}

.sec > .project--detail{
    padding-left: 20px;
}

.projectContainer > img{
    width: 40%;
    margin-left: 20px;
    filter: drop-shadow(-4px 4px 2px rgba(0,0,0,0.5));
    filter: invert(0);
    transition: 1s;
}

.project--detail{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 55%;
    height: 100%;
    border-radius: 2px;
    padding: 20px;
}

.project--detail > p, .project--detail > h2, .project--detail > h4{
    text-align: left;
}

.project--detail > a{
    display: flex;
    width: fit-content;
    height: fit-content;
    align-self: center;
    text-decoration: none;
    margin-top: 10px;
}

.line{
    height: 400px;
    width: 10px;
    background: linear-gradient(to right, #CCCCCC, white 95%);
    box-shadow:-1px 1px 1px rgba(0,0,0,0.5),
                0.5px -0.5px 1px rgba(0,0,0,0.5),
                -1px 1px 1px black,
                -2px 2px 3px rgba(0,0,0,0.9);
    margin-left: 50px;
    transition: 1s;
}

.line2{
    height: 400px;
    width: 10px;
    background: linear-gradient(to right, #CCCCCC, white 95%);
    box-shadow:-1px 1px 1px rgba(0,0,0,0.5),
                0.5px -0.5px 1px rgba(0,0,0,0.5),
                -1px 1px 1px black,
                -2px 2px 3px rgba(0,0,0,0.9);
    margin-right: 50px;
    transition: 1s;
}

.btn{
    background-color: #282828;
    border: none;
    cursor: pointer;
    color: #CCCCCC;
    border-radius: 1px;
    width: 135px;
    height: 40px;
    transition: 1s;
}

#projects h2{
    font-size: clamp(2rem, 2vw, 9rem);
    font-family: 'Poppinsw',sans-serif;
    font-weight: 800;
    margin-bottom: 10px;
    color: #ebebeb;
    text-shadow:-2px 2px 2px rgba(0,0,0,0.5),
                0.5px -0.5px 1px rgba(0,0,0,0.5),
                -1px 1px 1px black,
                -3px 3px 6px rgba(0,0,0,0.9);
}

#projects i{
    font-size: 0.8rem;
}

#projects > h1{
    grid-row-start: 1;
    font-family: 'Prompt', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 3vw, 6rem);
    font-style: italic;
    text-decoration: underline;
    place-self: center;
}

.seemore{
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}

.seemore > a{
    color: black;
}

/* end of projects */
/* ----------------------------------------------------------------- */
/* skills */

#skills{
    display: flex;
    background: linear-gradient(to right, #CCCCCC, white 95%);
    height: fit-content;
    width: 100%;
    flex-direction: column;
    gap: 70px;
    padding-bottom: 120px;
    transition: 1s;
}

#skills > h1{
    font-family: 'Prompt', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 3vw, 6rem);
    font-style: italic;
    text-decoration: underline;
    text-align: center;
}

.tech{
    display: flex;
}

.title{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.titleH3{
    font-size: 1.7rem;
    font-weight: 900;
    color: transparent;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.4),2px -2px 0 black;
    transition: 1s;
}

.skillIcon{
    font-size: 9rem;
    color: transparent;
    text-shadow: -1px 1px 2px rgba(255, 255, 255, 0.5), 2px -3px 0 
    black;
    transition: 1s;
}

.details{
    position: relative;
    width: 75%;
    height: fit-content;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 15px;
}

.details::before{
    content: '';
    position: absolute;
    left: 0;
    display: block;
    height: 100%;
    min-height: 198px;
    border: 1px solid black;
}

.descrip{
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-right: 10px;
    flex: 2;
    line-height: 1.5rem;
    font-family: 'Poppins',sans-serif;
}

.learned{
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    flex-wrap: wrap;
}

.learnedDiv{
    display: flex;
    align-items: center;
    background-color: #282828;
    color: #e2e1e1;
    font-weight: 400;
    font-size: 1.2rem;
    height: 35px;
    width: fit-content;
    padding: 0 10px;
    transition: 1s;
}


/* end of skills  */
/* ----------------------------------------------------------------- */
/* about me */

#about{
    background: linear-gradient(to right, #CCCCCC, white 95%);
    transition: 1s;
    height: fit-content;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 40px;
    align-items: center;
    gap: 30px;
}

#about > h1{
    place-self: center;
    font-family: 'Prompt', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 3vw, 6rem);
    font-style: italic;
    text-decoration: underline;
}

.aboutdesc{
    place-self: center;
    width: 85vw;
}

.interest{
    display: flex;
    flex-direction: column;
    height: fit-content;
    gap: 25px;
}

.interest > h2{
    font-size: clamp(2rem, 2vw, 8rem);
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
}

.interest div{
    transition: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 60px;
    width: 100%;
    gap: 10vw;
}

.interest div div{
    width: 30vw;
}
/* end of about me */
/* ----------------------------------------------------------------- */
/* foot */
.foot{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 100%;
    height: 50px;
}

.clamp{
    font-size: clamp(0.8rem, 1.3vw, 4rem);
    font-family: 'Poppins', sans-serif;
}

.mobile{
    display: none;
}

.q{
    display: none;
}

@media only screen and (max-width: 601px){

    /* nav */


    .mobileNav{
        position: absolute;
        top: -205px;
        background-color: #282828;
        width: 100%;
        height: 235.3px;
        flex-direction: column;
        justify-content: flex-end;
        transition: 1s;
        z-index: 0;
        padding-bottom: 10px;
        box-shadow: 0px 0px 6px 2.5px rgba(0,0,0,0.5);
    }

    .darkmode-div{
        background-color: #282828;
        z-index: 0;
        height: 100%;
        padding: 0;
        box-shadow: none;
    }

    .logodiv{
        z-index: 5;
        background-color: #282828;
    }

    .q{
        height: 80%;
        width: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px white solid;
        margin-right: 4px;
        z-index: 2;
    }
    .q i{
        font-size: 23px;
    }
    .q i:active{
        transform: rotate(360deg);
        transition: 0.5s;
    }
    .fa-xmark{
        font-size: 4rem;
        color: red;
    }

    /* navEnd */

    /* projects */
    #projects{
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 80px;
    }

    #projects img{
        padding: 0;
        margin: 20px 0px 0px 0px;
        width: 90%;
    }

    .projectContainer{
        padding: 0;
        margin: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 97%;
    }

    .line{
        background: linear-gradient(to right, #CCCCCC, white 95%);
        padding: 0;
        margin: 0;
        height: 10px;
        width: 100%;
    }
    .line2{
        background: linear-gradient(to right, #CCCCCC, white 95%);
        padding: 0;
        margin: 0;
        height: 10px;
        width: 100%;
        order: 2;
    }

    .project--detail{
        width: 90%;
        display: flex;
        align-items: center;
    }

    .project--detail > p, .project--detail > h2, .project--detail > h4{
        text-align: center;
    }

    .sec{
        margin-top: 30px;
    }

    .sec > .project--detail{
        order: 3;
    }
    .sec > .projectImg{
        order: 1;
        padding-bottom: 0;
    }
    /* projectsend */

    /* skills */
    #skills{
        display: flex;
        align-items: center;
        height: fit-content;
    }

    .details::before{
        display: none;
    }

    .details{
        grid-column-start: 1;
        grid-column-end: 3;
        width: 95%;
        padding-top: 10px;
    }

    .title{
        width: 100%;
    }

    .tech{
        display: grid;
        grid-template-columns: 0.7fr 1fr;
    }

    .learned{
        gap: 3px;
        width: 90%;
    }

    .mob{
        border-left: 5px #282828 solid;
        transition: 1s;
    }

    .learnedDiv{
        font-size: .7rem;
    }
    /* skillsend */

    .mobile{
        display: flex;
    }

    .desktop{
        display: none;
    }
}

/* ################################################################ */
/* ################################################################ */
/* ################################################################ */
/* ################################################################ */
/* ################################################################ */
/* ################################################################ */
/* ################################################################ */