@font-face {
    /*
     * Source: https://www.1001fonts.com/cuppajoe-font.html
     * By: Nick Curtis
     * License: 1001Fonts Free For Commercial Use License (FFC)
     */
    font-family: cuppa-joe;
    src: url("/static/CuppaJoe.ttf");
}

body {
    background-color: #303030;
    color: #f0f0f0;
    margin-left: 3em;
    margin-right: 3em;
}

a,
a:visited {
    color: #d4f032;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#header h1 {
    font-family: cuppa-joe;
    font-size: 72pt;
    line-height: 60%;
    margin-bottom: 0;
    padding-bottom: 0;
}

#header h1 a,
a:hover {
    color: #f0f0f0;
    text-decoration: none;
}

#header p.slogan {
    font-family: sans-serif;
    font-size: 24pt;
    margin-top: 0;
}

#header p.slogan strong {
    font-family: sans-serif;
    font-size: 24pt;
    font-weight: 1000;
    margin-top: 0;
    text-decoration: underline wavy;
}

#header ul {
    list-style: none;
    padding: 0;
}

#header li {
    display: inline-block;
    border-style: outset;
    border-width: 3pt;
    border-color: gainsboro;
    background-color: gainsboro;
    padding: .5em;
}

#header li a {
    color: darkblue;
}

#policies {
    position: fixed;
    bottom: 1em;
    left: 1em;
    display: flex;
    justify-content: flex-end;
}

/* Homepage specific */

div.alert {
    width: 70%;
    border-style: double;
    border-width: 3pt;
    border-color: crimson;
    background-color: darkred;
    font-family: monospace;
    color: ghostwhite;
    padding: 3pt 10pt;
    margin-bottom: 2em;
}

div.alert h2 {
    font-size: xx-large;
    font-family: sans-serif;
    margin: 2pt 0pt 4pt 0pt;
}

.marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.marquee span {
    display: inline-block;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Profile specific */

#profile input {
    width: 25%;
    min-width: 20em;
}