root{
    color-scheme: light;

}
*{
    box-sizing: border-box;
}

@font-face {
    font-family: Rubik;
    src: url(fonts/Rubik-VariableFont_wght.ttf);
}
@font-face {
    font-family: Rubik;
    src: url(fonts/Rubik-Italic-VariableFont_wght.ttf);
    font-style: italic;
}
body{
    font-family: Rubik;
    padding: 0;
    margin:0;
    font-size:100px;
    font-weight: 400;
    line-height: 100%;
}
p{
    font-size: 25%;
    line-height: 150%;
}

.header{
    background-color: black;
    width:100%;
    height: 100%;
    padding:5%;
    margin: 0;
}
.headerlogo{
    width: 50%;
    max-width: 500px;
    min-width: 200px;
    margin:auto;

    padding: 0%;
}
.navbar{
    position: sticky;
    width:100%;
    top:0;
    margin:0;
    padding:0;

    background-color: white;

    display: flex;
    flex:row;
    box-shadow: -5px +10px 10PX 0px rgba(0, 0, 0, 0.381);
}
.navbar a{
    text-align: center;
    text-decoration:none;
    font-size:25%;
    font-style: normal;
    font-weight: bolder;
    color: rgb(87, 87, 87);
    margin:auto;

    transition: color 0.2s;
    transition: transform 0.2s;
}

.navbar a:hover{
    transform: translate(0,-10px) ;
    color: rgb(237, 48, 48);

}

.navbar a.selected{
    color: black;
    transform: translate(0,0);
}

.main-title{
    font-size:50%;
    text-align: center;
    margin-top:10%;
    
}

.main-text h1{
    margin:0;
    font-weight: bolder;
}

.main-text h2{
    font-size:75%;
    font-weight: bolder;
}

.main-text h4{
    font-size:50%;
    font-weight: bolder;
}
.main-text{
    max-width: 1000px;
    margin:auto;
    padding-left:min(100px, 25%);
    padding-right:min(100px, 25%);
}