@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono:wght@200;400;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');*/

:root{
    --black: #050508;
    --accent: #00b35f;
    --clearly: 20%;
    --white: #eeeeee;
    --cursor: #00f583;
    --cursor-link: #05a9f5;
    --cursor-red: #ff2424;
    --red: #de1616;
}

html::-webkit-scrollbar{
    width: 13px;
}
html::-webkit-scrollbar-thumb{
    background-color: #00b35faa;
    border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover{
    background-color: var(--accent);
}
html::-webkit-scrollbar-track{
    background-color: #050508;
    border-radius: 4px;
}

@supports (scrollbar-color: green black){
    *{
        scrollbar-color: var(--accent) var(--black);
        scrollbar-width: thin;
    }
}

*{
    cursor: none;
}

html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background-color: var(--black);
    color: var(--white);
    font-family: 'Roboto Mono', monospace;
    overflow-y: hidden;
}

a{
    color: var(--white);
    text-decoration: none;
}

#loader{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    padding: 0%;
    border-radius: 0%;
    left: 0%;
    top: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: hidden;
}

.loader-text-error{
    color: var(--white);
    position: absolute;
    text-align-last: center;
    bottom: -40px;
    transition: 0.5s ease;
    opacity: 0;
}

.loader-text-error-show{
    bottom: 50px;
    opacity: 100%;
}

.cursor{
    position: fixed;
    width: 14px;
    height: 14px;
    border: #006b3950 6px solid;
    border-radius: 50%;
    border-top-left-radius: 0;
    pointer-events: none;
    z-index: 1000; 
    opacity: 0;
    top: 0px;
    left: 0px;
}

.cursor-link{
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border-bottom-right-radius: 0;
    background-color: var(--cursor-link);
    top: 100%;
    left: 100%;
    border: #05050850 1px solid;
}

.cursor-blocked{
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 35%;
    top: 100%;
    left: 100%;
    border: var(--cursor-red) 3px solid;
    animation: spin 3s linear infinite;
}

.cursor-border{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-top-left-radius: 0;
    border: var(--cursor) 4px solid;
    transform: translate(-20%, -20%);
}

.animation-ambient{
    position: absolute;
    top: 103%;
    left: 103%;
    animation: spin 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.90) infinite;
}

.cursor-loading{
    width: 7px;
    height: 7px;
    border: var(--cursor-link) 3px solid;  
    border-left: transparent 3px solid;  
    border-right: transparent 3px solid;  
    border-bottom: var(--cursor-link) 3px solid;  
    animation: spin 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.90) infinite;
    border-radius: 25px;
}

.spinner{
    border: var(--accent) 6px solid;
    height: 120px;
    width: 120px;
    animation: spin 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.90) infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner div{
    font-size: 22px;
    color: var(--accent);
    font-weight: 900;
    animation: spin 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.90) infinite;
}

@keyframes spin{
    to{
        rotate: 360deg;
    }
}

#container{
    display: none;
}

#projectjump{
    position: absolute;
    top: 300px;
    opacity: 0;
    pointer-events: none;
}

#socialjump{
    position: absolute;
    background-color: #00b35f;
    width: 10px;
    height: 10px;
    top: -450px;
    opacity: 0;
    pointer-events: none;
}

.BackgroundText{
    color: var(--accent);
    opacity: var(--clearly);
    font-size: 25px;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow-wrap: break-word;
    overflow-y: hidden;
}

.Vignette{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 400px var(--black) inset;
}

.Title{
    font-size: 50px;
    font-weight: 900;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1.5s ease;
    z-index: 0;
}

.text-animation{
    font-size: 40px;
    letter-spacing: 2.5px;
}

.TopBar{
    position: fixed;
    margin: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: all 1.5s ease;
    background-color: #05050800;
    z-index: 100;
}

.TopBar-animation{
    height: 75px;
    background-color: #050508ff;
}

.Left{
    position: absolute;
    font-size: 25px;
    top: 50%;
    transform: translate(0, -50%);
    opacity: 0%;
    transition: opacity 2s ease;
    background-color: var(--black);
    z-index: 1;
    border-bottom: var(--black) 8px solid;
    border-top: var(--black) 8px solid;
}

.Left span{
    margin-left: 25px;
    border: 0px #00b35f50 solid;
    background-color: #00b35f00;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.1s linear;
}

.Left span:hover{
    background-color: var(--accent);
    border-top: 4px #00b35f00 dashed;
    border-bottom: 4px #00b35f00 dashed;
}

.Right{
    position: absolute;
    font-size: 25px;
    top: 50%;
    transform: translate(0, -50%);
    right: 0px;
    opacity: 0%;
    transition: opacity 2s ease;
    background-color: var(--black);
    z-index: 1;
    border-bottom: var(--black) 8px solid;
    border-top: var(--black) 8px solid;
}

.Right span{
    margin-right: 25px;
    border: 0px #00b35f50 solid;
    background-color: #00b35f00;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.1s linear;
}

.Right span:hover{
    background-color: var(--accent);
    border-top: 4px #00b35f00 dashed;
    border-bottom: 4px #00b35f00 dashed;
}

.content{
    opacity: 0.5%;
    transition: 2s ease;
}

.opacity-animation{
    opacity: 100%;
}

.hi{
    position: absolute;
    width: 600px;
    top: 50%;
    left: 55%;
    background-color: var(--black);
    border-bottom: 3px var(--accent) dashed;
    border-top: 3px var(--accent) dashed;
    padding: 15px;
    border-radius: 25px;
    transform: translate(-90%, -50%);
}

.hello{
    position: absolute;
    top: -30px;
    transform: translate(0, -50%);
    font-size: 30px;
    font-weight: 900;
    background-color: var(--black);
    padding-top: 5px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    border: var(--accent) 3px dashed;
    border-bottom: 0px;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.hi span{
    font-size: 25px;
}

.hi img{
    width: 500px;
    height: 500px;
}

.backgroundimagelaptop{
    position: absolute;
    background-color: #0505089a;
    width: 500px;
    height: 500px;
    top: 0px;
    right: -505px;
    transform: translate(0, -25%);
    border-radius: 50%;
    filter: blur(0.7px);
}

.infomy{
    bottom: -50px;
    width: 100%;
    left: 0;
    height: 50px;
    position: absolute;
    display: flex;
}

.infomy div{
    margin-left: 15px;
    margin-right: 65px;
    background-color: var(--black);
    border: var(--accent) 3px dashed;
    padding-bottom: 70px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.infomy img{
    position: relative;
    top: 10px;
    margin-top: 5px;
    height: 40px;
    width: 40px;
    filter: invert(100%);
}

.infomy span{
    position: relative;
    top: -20%;
    margin-left: 10px;
    font-size: 25px;
    font-weight: 900;
}

#projects{
    position:absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
}

.titleprojects{
    font-size: 40px;
    font-weight: 900;
}

.typesprojects{
    position: absolute;
    left: 51%;
    transform: translate(-50%, 0%);
    width: 1150px;
    height: 400px;
    display: flex;
    margin-top: 25px;
}

.typeproject{
    position: relative;
    background-color: var(--black);
    width: 500px;
    height: 400px;
    margin-right: 5px;
    border: 2px var(--accent) dashed;
    border-radius: 2px;
}

.describeproject{
    position: absolute;
    top: 80px;
    left: 5%;
    text-align: center;
    height: 75%;
    width: 90%;
    font-size: 20px;
    font-weight: 900;
}

.discribeprojecttext{
    font-weight: 400;
    font-size: 18.5px;
}

.discribebutton{
    border: var(--accent) 2px solid;
    position: absolute;
    width: 90%;
    left: 5%;
    height: 75px;
    bottom: 15px;
    font-size: 25px;
    color: var(--accent);
    text-align: left;
    overflow: hidden;
    transition: 0.3s cubic-bezier(.57,.12,.47,.95);
}

.discribebutton:hover{
    color: black;
}

.discribebutton:hover img{
    transition: 0.7s cubic-bezier(.57,.12,.47,.95);
    filter: brightness(-100%);
}

.discribebutton::before{
    content: "";
    position: absolute;
    left: -5%;
    top: -5%;
    height: 110%;
    width: 5%;
    border-radius: 30px;
    background-color: var(--accent);
    transition: 0.5s cubic-bezier(.57,.12,.47,.95);
}

.discribebutton:hover::before{
    width: 110%;
    background-color: var(--accent);
}

.discribebutton p{
    position: absolute;
    transform: translate(10%, -10%);
}

.discribebutton img{
    position: relative;
    height: 45px;
    transform: translate(0, -10%);
    right: -240px;
}

.typesprojects span{
    position: relative;
    top: 25px;
    margin-left: 70px;
    font-size: 30px;
}

.typesprojectsimg{
    position: absolute;
    filter: invert(100%);
    width: 25px;
    left: 30px;
    top: 33px;
}

#socials{
    position:absolute;
    bottom: -700px;
    left: 50%;
    transform: translate(-50%, 200%);
    margin-left: 5px;
}

.titlesocials{
    position:absolute;
    bottom: -700px;
    left: 50%;
    transform: translate(-50%, 230%);
    font-size: 40px;
    font-weight: 900;
}

.boxofsocials{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.boxofsocials div{
    height: 100px;
    width: 100px;
    border: 0;
    border-bottom: transparent 5px solid;
    border-radius: 20px;
    text-align: center;
    transition: 0.2s ease;
    background-color: #050508aa;
    margin-right: 5px;
    margin-left: 5px;
}

.boxofsocials div:hover{
    height: 110px;
    width: 110px;
    border: 0;
    border-bottom: var(--accent) 5px solid;
    margin-right: 15px;
    margin-left: 15px;
}

.boxofsocials img{
    width: 50%;
    margin-top: 25px;
}

#textsocial{
    position: absolute;
    bottom: -50px;
    transition: 0.1s ease;
    font-size: 20px;
}
/*
#friends{
    position: absolute;
    bottom: -1700px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
}

.titlefriends{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -1550px;
    font-size: 40px;
    font-weight: 900;
    font-family: 'Pacifico', cursive;
    letter-spacing: 50px;
}

.friendclass{
    background-color: var(--black);
    height: 150px;
    width: 340px;
    margin-left: 150px;
    border-radius: 10px;
    border: var(--white) 1px double;
}

.friendclass span{
    font-size: 70px;
    font-weight: 900;
    font-family: 'Pacifico', cursive;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    transform: translate(0, -50%);
    color: var(--white);
    z-index: 1;
    opacity: 25%;
}

.friendclass p{
    font-size: 15.6px;
    margin-top: 7px;
    margin-left: 6px;
    margin-right: 6px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0px;
}

.friendimg{
    position: relative;
    left: -150px;
    z-index: 1;
}

.friendimg{
    background-color: var(--black);
}

.friendimg img{
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 25%;
    position: absolute;
    height: 130px;
    border: var(--accent) 3px solid;
    box-shadow: var(--accent) 0px 0px 5px;
}
*/

.bottom{
    margin: 0px;
    left: 0px;
    color: var(--black);
    box-shadow: var(--accent) 0px 0px 20px;
    width: 100%;
    position: absolute;
    bottom: -1700px;
    background-color: var(--accent);
    font-size: 20px;
    height: 200px;
    display: flex;
}

.bottom span{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.bottom div{
    margin-top: 1.5%;
}

.bottomleft{
    margin-left: 45px;
}

.bottomright{
    position: absolute;
    right: 0px;
    margin-right: 45px;
    text-align: right;
}

.bottomcontent{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    text-align: center;
}

.bottom p{
    margin: 0;
    position: relative;
}

.bottom a{
    color: black;
    border-bottom: var(--black) 3px solid;
}

.bottom a:hover{
    color: var(--cursor);
    border-bottom: var(--cursor) 3px solid;
}

.pbottomfirst{
    font-weight: 900;
}