body{
background-color: black;
margin: 0;
position:relative;
overflow-x:hidden;
}

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

button{
background: none;
border: none;
}

/* ! top bar ! */

#scroll-to-top{
    z-index: 3;
    position: fixed;
    top: 1vh;
    right: 2vw; 
    color: white;
    text-decoration: none;
    font-size: 5em;
    opacity: .4;
    transform: scaleX(1.5);
    transition: all .4s;
}

#scroll-to-top:hover{
    opacity: 1;
    transform: scaleX(2);
}


#source{
    z-index: 3;
    position: fixed;
    top: 95vh;
    left:5vh ;
    color: white;
    text-decoration: none;
    font-size: 2em;
    opacity: .4;
    transition: all .4s;
}



#source:hover{
    opacity: 1;
}

/* !main elements! */
.page{
height: 100vh;
display: flex;
align-items: center;
}

.background-pattern{
position: absolute;
height: 100vh;
width: 100vw;

background-image: 
radial-gradient(circle at -100% 0%, #aa0cff, #0000ff, #000000);
background-size: 120vmin 120vmin;
position: absolute;
opacity: .35;
z-index: 1;
animation: moveGradient 10s alternate infinite;
}

@keyframes moveGradient {
    0% {
            background-position: 0% 100%;
            
        }
    100% {
            background-position: 45% 0%;
        
        }
}

/* ! menu ! */

.menu-items{
margin-left: 10vw;
display: flex;
align-items: center;
text-align: center;
position: relative;
flex-direction: column;
z-index: 2;
}

.menu-item{
padding: 5vh;
color: white;
opacity: .5;
text-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
font-size: 4em;
text-decoration: none;
font-family:'Franklin Gothic Medium';
transition: all .8s;
}

.main-menu-item{
    opacity:1;
}


.menu-items:hover > .menu-item{
opacity: .2;
transform: scale(.85);

}

.menu-items:hover > .menu-item:hover{
    opacity: 1;
    transform: scale(1.15);
}

/* ! content ! */

.content-container{
display: flex;
justify-content: center;
align-items:center;
}

.content{
display: flex;
text-align: center;
position: absolute;
z-index: 3;
text-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
color: white;
font-size: .8em;
font-family: 'Franklin Gothic Medium';
opacity: 0;
transition: all 1s;
transform: translateX(100vw);
}

.content-selected{
    opacity:1;
    transform: scale(1.8) translateX(20vw);
} 

.button-selected{
    transform: scale(1.65);
    opacity: 1;
}

::-webkit-scrollbar {
    /* setting scrollbars to hidden */
    width: 0vh;
}


/* ! about me ! */
.logo{
    height: 5vh;
    margin: 5vh;
    padding: 1vh;
    transition: all .5s;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
}



.logo:hover{
    transform: scale(1.2);
    background-color: #ffffff;
}

#links{
    display:flex;
    justify-content: center;
    align-content: center;
}

#bio{
    flex-direction: column;
}


/* ! projects ! */

.project{
    margin-right: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.project-img{
    max-width: 20vw;
}

.project-link{
    font-size: 1.2em;
    border-width: 3px;
    border-style: solid;
    color: #ffffff;
    padding: 1vh;
    border-color: #ffffff;
    transition: all .6s;
}

.project-link:hover{
    border-radius: 50%;
}
/* ! experience ! */

#resume{
    height: 45vh;
    flex-direction: column;
}

.resume-caption{
    color:#ffffff;
    opacity: 0;
    padding: 1vh;
    transition: all .5s;
}

#resume:hover > .resume-caption{
    opacity: 1;
    transform: scale(1.2);
}

#skills{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
}

.skill-section{
    padding: 3vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
    

.skill{
margin: 1vh;
padding: .5vh;
text-align: center;
width: fit-content;
min-width: 4vw;
border-style: solid;
transition: all .5s;
}

.skill.one:hover{
    padding-top: 2vh;
    padding-bottom: 2vh;
}
.skill.one:hover::before{
    content: "1+ year";
    }

.skill.two:hover{
    padding-top: 3vh;
    padding-bottom: 3vh;
}
.skill.two:hover::before{
    content: "2+ years";
    }

.skill.lt:hover{
    padding-top: 1vh;
    padding-bottom: 1vh;
}
.skill.lt:hover::before{
    content: ">1 year";
    }
    

.skill:hover span {
    display: none
    }