body {
background-color: #1c1c1c;
font-size: 24px;
font-family: karla;
color:darkgrey;
margin:0;
}

/*-- Links --*/
a{
color:#00BBFF;
font-weight:bold;
text-decoration:none;
}

a:hover{
text-decoration:none;
}

/*-- Font --*/
@font-face {
font-family: karla;
src: url(fonts/Karla-Regular.ttf);
}

/*-- Flex --*/
.flex{
display:flex;
justify-content:center;
flex-direction:row;
gap:1em;
margin-top:1em;
}


/*-- Sidebar --*/
.sidebar{
order:1;
padding:50px;
width: 100%;
max-width: 300px;
}

.nav{
position:sticky;
}

.nav a{
}

.nav li{
list-style-type:none;
margin-top:1em;
margin-bottom:1em;
}

/*-- Main --*/
.main{
order: 2;
width: 100%;
max-width: 1620px;
padding:20px;
}

/*-- Mobile --*/
@media only screen and (max-width: 800px) {
.flex {
flex-direction: column;
}
.flex{
        max-width: unset;
}
}

@media only screen and (max-width: 500px){
.flex{
max-width: 100%;
height:auto;
}
}