*{margin:0; padding:0;}
.afacad-regular {
    font-family: "Afacad", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.afacad-medium {
    font-family: "Afacad", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
html {
    background-color: #0c0c0c;
    color: white;
}
html p{
    color: #A0B9D0;
}
nav{
    text-align: center;
}
nav a{
    padding: 2vh 1vh;
    display: inline-block;
    font-size: 2.25vh;
    color: #5D6F80;
    text-decoration: none;
    font-weight: 500;
    position: relative;
}
nav a.active, nav a:hover{
    color: #6699CA;
}
nav a.active::after, nav a:hover::after{
    content: "";
    position: absolute;
    left: calc(50% - .35vh);top: 1vh;
    width: .7vh;height: .7vh;
    border-radius: .7vh;
    background-color: #6699CA;
}
header{
    width: 100%;
    max-width: 700px;
    margin: auto;
    text-align: center;
}
#banner{
    padding: 2vh;
    width: 8vh;
    display: inline-block;
    background-color: #000000;
    box-shadow: 1vh 1vh 0px rgba(0, 0, 0, 0.3);
}
#banner h1{line-height: 3vh;font-size: 3vh;margin-top: 1.5vh;}
#banner h2{line-height: 2.2vh;font-size: 2.2vh;letter-spacing: .5vh;}
#banner img{
    margin-top: 2vh;
    height: 6vh;
}
header p{
    padding: 2vh;
    font-size: 2.5vh;
    color: #5D6F80;
}
main{
    width: 100%;
    max-width: 700px;
    margin: auto;
}
main > div *{
    display: inline-block;
    vertical-align: middle;
}
main h2{
    font-weight: 500;
    margin-left: .5vh;
    font-size: 2.5vh;
}
main img{
    height: 2.5vh;
    position: relative;
    top: .2vh;
}
main article{
    padding: 2vh;
    margin-top: 2vh;
    border: .3vh solid #A0B9D019;
    background-color: #0c0c0c;
    box-shadow: 1vh 1vh 0px rgba(0, 0, 0, 0.3);
    color: #5D6F80;
    cursor: pointer;
}
main article:hover{
    background-color: #171717;
}
main article h2{
    display: inline-block;
}
main article span{
    float: right;
    font-weight: 500;
    font-size: 2vh;
    margin-top: .5vh;
}