@font-face {
    font-display: swap;
    font-family: "Dymo";
    src:
        url(/fonts/Dymo.otf) format("opentype"),
        url(/fonts/Dymo.ttf) format("truetype"),
        url(/fonts/Dymo.woff) format("woff"),
        url(/fonts/Dymo.woff2) format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "gartentika";
    src:
        url(/fonts/gartentika.otf) format("opentype"),
        url(/fonts/gartentika.ttf) format("truetype"),
        url(/fonts/gartentika.woff) format("woff"),
        url(/fonts/gartentika.woff2) format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "gtw";
    src:
        url(/fonts/gtw.otf) format("opentype"),
        url(/fonts/gtw.ttf) format("truetype"),
        url(/fonts/gtw.woff) format("woff"),
        url(/fonts/gtw.woff2) format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "WhiteAngelica";
    src:
        url(/fonts/WhiteAngelica.otf) format("opentype"),
        url(/fonts/WhiteAngelica.ttf) format("truetype"),
        url(/fonts/WhiteAngelica.woff) format("woff"),
        url(/fonts/WhiteAngelica.woff2) format("woff2");
}
body {
    background: #000;
    color: #ccc;
    font-family: "gtw", serif;
    font-size: 100%;  /* Usually 16px. */
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    margin: 0;
}
.page {
    margin: 0 auto;
}
@media(min-width: 960px) {
    .page {
        max-width: 59.5rem;
    }
    .song .cover {
        float: right;
        margin: 0 0 0.5rem 1rem;
    }
}
header {
    background: url(/pics/header.png) no-repeat;
    color: #ddd;
    font-family: "gartentika", sans-serif;
    font-size: 3rem;
    margin: 0;
    padding: 4rem 2rem 2rem;
    text-align: right;
}
header p {
    margin: 0;
}
header a:link, header a:hover, header a:visited, header a:active {
    background: transparent;
    border-style: none;
    color: #ddd;
    text-decoration: none;
}
nav {
    backdrop-filter: blur(0.25rem);
    background: #eee9;
    border-bottom: 0.0625rem solid #999;
    color: #000;
    margin: -4rem -2rem 2rem -2rem;
    position: sticky;
    top: 0;
}
nav ul {
    display: block;
    margin: 0;
    padding: 0.5rem 2rem;
}
nav li {
    display: inline-block;
    margin-right: 1rem;
}
nav li:last-child {margin-right: 0}
nav li#credits {transform: rotate(1deg)}
nav li#home {transform: rotate(2deg)}
nav li#music {transform: rotate(-1deg)}
main nav a:active, main nav a:hover, main nav a:link, main nav a:visited {
    border: none;
    color: #900;
    font-family: Dymo, sans-serif;
    font-size: 2rem;
    font-weight: normal;
    padding: 0;
    text-decoration: none;
}
nav a::after, nav a::before {content: "…"}
main {
    background: #eee;
    color: #000;
    line-height: 2.5rem;
    margin: 0;
    padding: 4rem 2rem 2rem 2rem;
}
h1, h2 {
    background: transparent;
    font-family: "WhiteAngelica", sans-serif;
    font-weight: normal;
    color: #009;
}
h1 {
    border-bottom: 0.0625rem solid #009;
    font-size: 2rem;
    margin: 1rem -0.5rem 2rem;
}
h2 {
    font-size: 1.5rem;
    margin: 2rem -0.25rem 1rem;
}
p {
    margin: 2.5rem 0;
}
main a {
    border-bottom: 0.125rem dotted #666;
    text-decoration: none;
}
main a:link {
    background: transparent;
    color: #600;
}
main a:hover {
    background: transparent;
    color: #900;
}
main a:visited {
    background: transparent;
    color: #300;
}
main a:active {
    background: #900;
    color: #eee;
}
ul.streams {
    display: inline;
    margin: 0;
    padding: 0;
}
ul.streams li {display: inline}
ul.streams li::before {content: "| "}
footer {
    margin: 0;
    padding: 2rem;
}