@font-face {
    font-family: "Noto Emoji Grayscale";
    src: url("/fonts/noto-emoji-grayscale.ttf") format("truetype");
}
@font-face {
    font-family: "Noto Emoji Color";
    src: url("/fonts/noto-emoji-color.ttf") format("truetype");
}

html {
    color: #333;
    font-family: sans-serif;
}
body {
    background: #793500;
    margin: 0;
}

header {
    background: #ddd;
    border-bottom: 2px solid #d8d8d8;
    padding: 1em;
}

header > .slogan {
    font-size: 1.333em;
    font-style: italic;
    margin-left: 1em;
}

/* Main menu. */
nav.main {
    color: white;
    float: right;
}
nav.main > ul {
    display: inline;
    padding-left: 0;
}
nav.main > ul > li {
    display: inline-block;
}
nav.main a:any-link {
    background: #dd891a;
    border: 1px solid #b56800;
    border-radius: .25em;
    color: white;
    display: inline-block;
    margin-bottom: .25em;
    padding: .5em;
    text-decoration: none;
    transition: background 1s ease;
}
nav.main a:any-link:hover {
    background: #f39d31;
    border-color: #dd891a;
}
nav.main a:any-link.active {
    background: #ffb348;
    border-color: #e38e21;
}

main {
    background: #eee;
    border-bottom: 2px solid #ccc;
    box-shadow: inset 0 47px 10px -50px black;
    min-height: 5em;
    padding: .5em;
}

footer {
    color: white;
    margin: 0 auto;
    max-width: 70em;
    padding: .5em;
}

/* Individual UI elements. */

span.emoji {
    font-family: "Noto Emoji Grayscale", emoji;
}

article {
    font-family: serif;
    margin: 0 auto;
    max-width: 70em;
}
article img {
    background: #e7e7e7;
    border: 1px solid #ccc;
    border-radius: .5em;
    float: right;
    max-width: min(20em, 50%);
    padding: .5em;
}
article:after {
    clear: both;
    content: "";
    display: table;
}

article.alert {
    border: 1px solid #ccc;
    border-radius: .5em;
    margin-bottom: .25em;
    padding: 1em;

    &.error {
        background: #fcbaba;
        border: 1px solid #a33;
    }
    &.warning {
        background: #fce7ba;
        border: 1px solid #aa8233;
    }
    &.info {
        background: #babafc;
        border: 1px solid #33a;
    }
    &.success {
        background: #bafcba;
        border: 1px solid #3a3;
    }
}