@font-face {
    font-family: Fantasque;
    src: url(fanta.ttf);
}

@font-face {
    font-family: Fantasque;
    src: url(fanta-bold.ttf);
    font-weight: bold;
}

* {
    margin: 0px;
    padding: 0px;
    font-family: Fantasque;
    font-weight: bold;
    color: #d8d5cf;
    border-color: #434343;
    background-color: #181a1b;
}

body {
    margin: 0px 15%;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2%;
    font-size: 300%;
    font-weight: bold;
    height: 15%;
    border-bottom-style: dotted;
    background-color: #262a2b;
}

nav > h1 {
    text-align: center;
}

a, h1 {
    background-color: #262a2b;
}

@media (pointer:none), (pointer:coarse) {
    main {
        padding: 5% 10%;
        font-size: 100%;
        height: 60%;
        border-bottom-style: dotted;
        background-color: #262a2b;
    }
}

@media (pointer:fine) {
    main {
        padding: 5% 10%;
        font-size: 200%;
        height: 60%;
        border-bottom-style: dotted;
        background-color: #262a2b;
    }
}

blockquote {
    padding: 3%;
    margin-left: 5%;
    background-color: #262a2b;
}

footer {
    padding: 2%;
    position: fixed;
    bottom: 0px;
    background-color: transparent;
}

footer > a {
    background-color: transparent;
}