html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}





@font-face {
    font-family: Anton;
    src: url(fonts/Anton-Regular.ttf);
}

@font-face {
    font-family: Prompt;
    src: url(fonts/Prompt-Regular.ttf);
}

@font-face {
    font-family: PromptBold;
    src: url(fonts/Prompt-SemiBold.ttf);
}




::-webkit-scrollbar {
    appearance: none;
    background: linear-gradient(#8da28e, #9e83b8, #8da28e);
}

::-webkit-scrollbar-track {
    background: linear-gradient(#8da28e, #9e83b8, #8da28e);
}






body {
    height: 545vh;
    font-size: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #9e83b8, #8da28e);
    color: white;
    position: relative;
}



#NavBar {
    position: absolute;
    width: 90%;
    left: 4%;
    top: 1.3%;
    display: flex;
    justify-content: flex-start;
    gap: 2%;
}

#NavBar :hover {
    text-decoration: underline;
}

#NavMe {
    font-family: Prompt, sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    color: #ebe5d9;
    background-color: transparent;
    border: none;
}

#NavWork {
    font-family: Prompt, sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    color: #ebe5d9;
    background-color: transparent;
    border: none;
}

#NavContact {
    font-family: Prompt, sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    color: #ebe5d9;
    background-color: transparent;
    border: none;
}




#back-to-top {
    font-size: 1.2rem;
    position: fixed;
    bottom: 3%;
    right: 2%;
    background-color: transparent;
    color: #ebe5d9;
    border: none;
    cursor: pointer;
}

#back-to-top:hover {
    text-decoration: underline;
}



.container {
    position: absolute;
    text-align: left;
    left: 4%;
    top: 15%;
}

#TitleHome {
    font-size: 6.8rem;
    font-family: Anton, sans-serif;
    margin: 0;
    color: #ebe5d9;
    line-height: 0.5;
}

#UnderTitle {
    font-size: 1.3rem;
    font-family: Prompt, sans-serif;
    margin: 0;
    color: #ebe5d9;
}





#aboutmephoto2 {
    position: absolute;
    color: #ebe5d9;
    right: 13%;
    top: 22%;
    opacity: 70%;
    width: 13%;
}

#AboutMePhoto2 {
    border-radius: 8px;
}

#aboutmephoto {
    position: absolute;
    color: #ebe5d9;
    right: 13%;
    top: 22%;
    opacity: 40%;
    width: 13%;
}

#AboutMePhoto {
    border-radius: 8px;
}



#aboutmetitle {
    position: absolute;
    font-family: PromptBold, sans-serif;
    font-size: 2.5rem;
    color: #ebe5d9;
    left: 13%;
    top: 23.1%;
}

#aboutmetext {
    position: absolute;
    font-family: Prompt, sans-serif;
    text-align: justify;
    font-size: 1.1rem;
    color: #ebe5d9;
    left: 20%;
    top: 25%;
    right: 29%;
}






#worktitle {
    position: absolute;
    font-family: PromptBold, sans-serif;
    text-align: left;
    font-size: 2.5rem;
    color: #ebe5d9;
    left: 13%;
    top: 37%;
}



#SVWIM {
    position: absolute;
    left: 20%;
    top: 73.6%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#SVWIMRadius {
    border-radius: 8px;
}

#SVWIMTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#SVWIMTitle:hover {
    text-decoration: underline;
}

#SVWIMYear {
    color: #ebe5d9;
    text-decoration: none;
}

#SVWIMYear:hover {
    text-decoration: underline;
}





#PR {
    position: absolute;
    left: 20%;
    top: 40.2%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#PRRadius {
    border-radius: 8px;
}

#PRTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#PRTitle:hover {
    text-decoration: underline;
}

#PRYear {
    color: #ebe5d9;
    text-decoration: none;
}

#PRYear:hover {
    text-decoration: underline;
}





#Unity {
    position: absolute;
    left: 20%;
    top: 82%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#UnityRadius {
    border-radius: 8px;
}

#UnityTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#UnityTitle:hover {
    text-decoration: underline;
}

#UnityYear {
    color: #ebe5d9;
    text-decoration: none;
}

#UnityYear:hover {
    text-decoration: underline;
}



#ABL {
    position: absolute;
    right: 19.8%;
    top: 70.1%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#ABLRadius {
    border-radius: 8px;
}

#ABLTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#ABLTitle:hover {
    text-decoration: underline;
}

#ABLYear {
    color: #ebe5d9;
    text-decoration: none;
}

#ABLYear:hover {
    text-decoration: underline;
}



#RR {
    position: absolute;
    right: 19.8%;
    top: 60.2%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#RRRadius {
    border-radius: 8px;
}

#RRTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#RRTitle:hover {
    text-decoration: underline;
}

#RRYear {
    color: #ebe5d9;
    text-decoration: none;
}

#RRYear:hover {
    text-decoration: underline;
}



#IN {
    position: absolute;
    left: 20%;
    top: 53.7%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#INRadius {
    border-radius: 8px;
}

#INTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#INTitle:hover {
    text-decoration: underline;
}

#INYear {
    color: #ebe5d9;
    text-decoration: none;
}

#INYear:hover {
    text-decoration: underline;
}



#FOL {
    position: absolute;
    right: 19.8%;
    top: 40.2%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#FOLRadius {
    border-radius: 8px;
}

#FOLTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#FOLTitle:hover {
    text-decoration: underline;
}

#FOLYear {
    color: #ebe5d9;
    text-decoration: none;
}

#FOLYear:hover {
    text-decoration: underline;
}


#Sketches {
    position: absolute;
    right: 19.8%;
    top: 51%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#SketchesRadius {
    border-radius: 8px;
}

#SketchesTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#SketchesTitle:hover {
    text-decoration: underline;
}

#SketchesYear {
    color: #ebe5d9;
    text-decoration: none;
}

#SketchesYear:hover {
    text-decoration: underline;
}





#Blender {
    position: absolute;
    left: 20%;
    top: 64.4%;
    width: 26.5%;
    font-family: PromptBold, sans-serif;
}

#BlenderRadius {
    border-radius: 8px;
}

#BlenderTitle {
    color: #ebe5d9;
    text-decoration: none;
}

#BlenderTitle:hover {
    text-decoration: underline;
}

#BlenderYear {
    color: #ebe5d9;
    text-decoration: none;
}

#BlenderYear:hover {
    text-decoration: underline;
}






#contacttitle {
    position: absolute;
    font-family: PromptBold, sans-serif;
    font-size: 2.5rem;
    color: #ebe5d9;
    left: 13%;
    top: 94%;
}

#contacttext {
    position: absolute;
    font-family: Prompt, sans-serif;
    text-align: left;
    font-size: 1.3rem;
    color: #ebe5d9;
    left: 20%;
    top: 100%;
    padding-bottom: 15%;
}


#mail {
    color: #ebe5d9;
    text-decoration: none;
}

#mail:hover {
    text-decoration: underline;
}

#LinkedInButton {
    background-color: transparent;
    color: #ebe5d9;
    border: none;
    font-size: 1.3rem;
    font-family: Prompt, sans-serif;
}

#LinkedInButton:hover {
    text-decoration: underline;
}

#InstaButton {
    background-color: transparent;
    color: #ebe5d9;
    border: none;
    font-size: 1.3rem;
    font-family: Prompt, sans-serif;
}

#InstaButton:hover {
    text-decoration: underline;
}






@media (max-width:1000px) {
    body {
        height: 540vh;
        font-size: 1vw;
    }



    #NavBar {
        width: 90%;
        left: 4%;
        top: 0.8%;
    }

    #NavMe {
        font-size: 0.9rem;
    }

    #NavWork {
        font-size: 0.9rem;
    }

    #NavContact {
        font-size: 0.9rem;
    }


    #back-to-top {
        display: none;
    }


    .container {
        top: 14.5%;
    }

    #TitleHome {
        font-size: 5rem;
    }

    #UnderTitle {
        font-size: 0.95rem;
    }





    #aboutmephoto2 {
        left: 0%;
        top: 20.1%;
        width: 27%;
    }

    #aboutmephoto {
        display: none;
    }

    #aboutmetitle {
        font-size: 2rem;
        left: 10%;
        top: 20%;
    }

    #aboutmetext {
        font-size: 0.9rem;
        left: 13.5%;
        top: 21.5%;
        right: 13.5%;
    }



    #worktitle {
        font-size: 2rem;
        top: 40%;
        left: 10%;
    }




    #FOL {
        font-size: 0.65rem;
        right: 13.5%;
        top: 42%;
        width: 50%;
    }


    #PR {
        font-size: 0.65rem;
        left: 13.5%;
        top: 47%;
        width: 50%;
    }


    #Sketches {
        font-size: 0.65rem;
        right: 13.5%;
        top: 53.5%;
        width: 50%;
    }


    #IN {
        font-size: 0.65rem;
        left: 13.5%;
        top: 57.7%;
        width: 50%;
    }


    #RR {
        font-size: 0.65rem;
        right: 13.5%;
        top: 62.7%;
        width: 50%;
    }


    #Blender {
        font-size: 0.65rem;
        left: 13.5%;
        top: 67.2%;
        width: 50%;
    }


    #ABL {
        font-size: 0.65rem;
        right: 13.5%;
        top: 71.2%;
        width: 50%;
    }


    #Unity {
        font-size: 0.65rem;
        left: 13.5%;
        top: 79.7%;
        width: 50%;
    }


    #SVWIM {
        font-size: 0.65rem;
        left: 36.5%;
        top: 83.8%;
        width: 50%;
    }







    #contacttitle {
        font-size: 2rem;
        right: 15%;
        left: 10%;
        top: 92%;
    }

    #contacttext {
        font-size: 0.9rem;
        left: 13.5%;
        right: 0%;
        top: 99%;
        padding-bottom: 50%;
    }


    #LinkedInButton {
        font-size: 0.9rem;
    }

    #InstaButton {
        font-size: 0.9rem;
    }


}