:root {
    --fg: #ECEFF4;
    --fg-alt1: #EDD096;
    --fg-alt2: #EAC885;
    --fg-alt3: #E7C173;
    --bg1: #333B47;
    --bg2: #2B313B;
    --bg3: #22272F;
    --bg-alt1: #6E9051;
    --bg-alt2: #648349;
    --bg-alt3: #5A7642;
    --bg-alt4: #BE6069;
    --bg-alt5: #B8515B;
    --bg-alt6: #AE4751;
}

html {
    box-sizing: border-box;
    background-color: var(--bg2);
    color: var(--fg);
    font-family: 'Fira Sans', sans-serif;
}

*, *::before, *::after {
    box-sizing: inherit;
}

h1, h2, h3, h4, h5 {
    font-family: 'Fira Sans Condensed', sans-serif;
}

h1, h2, h3, h4 {
    font-weight: bold;
}

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.0em;
}

h5 {
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: underline;
}

login {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    max-width: 400px;
    padding: 20px;
    background-color: var(--bg1);
    border-radius: 8px;
    box-shadow: 0px 2px 4px var(--bg3), 0px 4px 8px var(--bg3);
}

login input:not([type=submit]):not([type=checkbox]) {
    width: 100%;
    margin-bottom: 10px;
}