/* elements */
html {
    background-color: #202120;
    overflow-x: hidden;
}
body {
    font-family: "Quicksand", sans-serif;
    color: whitesmoke;
    margin: 0;
}
header {
    position: fixed;
    display: flex;
    align-items: center;
    padding-left: calc(1vmax - 1vmin);
    width: 100vw;
    z-index: 2;
}
header img {
    height: calc(50px + 2vmin);
}
header h1 {
    font-size: calc(25px + 1vmin);
    padding-left: calc(10px + calc(1vmax - 1vmin));
}
footer {
    padding-bottom: calc(1vmax - 1vmin);
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 1;
}
footer img {
    height: calc(10px + 1vmin);
    padding-left: calc(1vmax - 1vmin);
}
footer h1 {
    font-size: calc(5px + 0.5vmin);
    padding-left: calc(1vmax - 1vmin);
}
/* classes */
.full {
    height: 100vh;
    width: 100%;
}
.dark {
    background-color: #202120;
}
.blue {
    background-color: #009dde;
}
.darkgr {
    background-image: linear-gradient(to right, #202120ff, #20212000);
}
.bluegr {
    background-image: linear-gradient(to right, #009ddeff, #009dde00);
}
.right {
    text-align: right;
}
.header {
    position: sticky;
    display: block;
    height: calc(50px + 5vmin);
    top: 0;
    width: 100%;
    min-width: calc(320px + 1vw);
    z-index: 1;
}
.normal {
    font-weight: 750;
}
.large {
    font-size: calc(25px + 7.5vmin);
}
.quote {
    font-family: "AnkoSemBd", "Times New Roman";
    font-style: italic;
    color: whitesmoke;
    margin: 0;
}
.center {
    display: flex;
    align-items: center;
}
.centerbd {
    justify-content: center;
}
.rightbd {
    justify-content: right;
}
.content {
    height: calc(100vh - 2*calc(50px + 5vmin));
}
.award {
    padding: calc(1vmax - 1vmin);
    text-align: center;
}
/* ids */
#i01 h1 {
    font-size: calc(25px + 2.5vmin);
    padding-right: calc(5vmax - 5vmin);
}
#i02 h2 {
    font-size: calc(10px + 2.5vmin);
    padding-right: calc(5vmax - 5vmin);
}
#i02 p {
    font-size: calc(10px + 1vmin);
    padding-right: calc(5vmax - 5vmin);
}