@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    padding: 0;
    margin: 0;
    color: #eeeeee;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
}

html {
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    background: #22222d;
    background: linear-gradient(180deg, #22222d 0%, #2a2724 100%);
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    overflow: hidden;
}

button{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

header{
    width: 100%;
    background-color: #1c1c21;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header::after{
    content: " ";
    width: 100%;
    height: 1px;
    background: #44444d;
    background: linear-gradient(90deg, #22222d00 0%, #44444d 30%, #44444d 70%, #22222d00 100%);
}

h1{
    font-weight: lighter;
    line-height: 60px;
    font-size: 40px;
}

nav{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

nav::before, nav::after{
    content: ' ';
    flex-grow: 5;
}

nav > button{
    height: 40px;
    flex-basis: 200px;
    min-width: 200px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

nav > button > div{
    width: min-content;
    font-size: 20px;
    font-weight: lighter;
    color: #aaaaaa;
    transition: color 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

nav > button > div::after{
    content: "";
    width: 0;
    border-top: #888888 solid 1px;
    height: 0px;
    transition: width 0.1s ease-in-out;
}

nav > button:hover > div{
    color: #eeeeee;
}

nav > button:hover > div::after{
    width: 110%;
}

@media (max-width:600px){
    nav{
        flex-direction: column;
        height: min-content;
        padding-bottom: 10px;
    }
    nav > button{
        width: 100%;
        flex-basis: 0;
        height: 40px;
        padding: 5px;
    }
}



main{
    overflow-y: auto;
    flex-grow: 1;
}



footer{
    width: 100%;
    background-color: #181717;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999999;
    line-height: 25px;
}

footer::before{
    content: " ";
    width: 100%;
    height: 1px;
    background: #44444d;
    background: linear-gradient(90deg, #2a272400 0%, #44444d 30%, #44444d 70%, #2a272400 100%);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}
 
::-webkit-scrollbar-thumb {
    background-color: #424249; 
    border-radius: 5px;
}

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