/* Resets */

html {
    box-sizing: border-box;
    font-size: 16px;
    height: 100%;
}

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Variables */

:root {
    --footer-height-min: 20px;
    --footer-height: 50px;

    --main-column-width: 800px;

    --color-main-bg: #ffccaa;
    --color-main-bg-light: #ffe0cc;
    --color-side-bg: #f3c5b2;

    --color-footer-bg: #eed1a8;

    --color-title-shadow: #eebb99;

    --color-accent: #ff6600;
    --color-text: #333333;

    --color-links-normal: var(--color-accent);
    --color-links-visited: #803300;
}

/* Styles */

body {
    color: var(--color-text);
    background-color: var(--color-main-bg-light);
    font-family: "Fira Sans", sans-serif;
}

main,
footer,
header {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
}

main {
    background-color: var(--color-main-bg);
    height: fit-content;
    min-height: 70vh;
}

footer {
    background-color: var(--color-footer-bg);
    padding-left: calc(20px + 1em);
}

header {
    background-color: var(--color-main-bg);
    text-align: right;
    padding-bottom: 3em;
    padding-right: 1em;
}

main {
    flex-direction: row;
    display: flex;
}

div#main-content {
    max-width: 60%;
    order: 1;
}

div#side-content {
    margin-top: 2em;
    max-width: 40%;
    background-color: var(--color-side-bg);
    height: fit-content;
    order: 2;
}

p {
    padding: 1em;
}

em {
    font-style: normal;
    font-weight: 500;
}

h1 {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 72pt;
    /*    text-shadow: 0 0.5em var(--color-title-shadow); */
}

.h1-shadow {
    text-shadow: 0 0.5em var(--color-title-shadow);
}

div.undertitle {
    top: 40px;
    color: white;
}

a {
    color: var(--color-links-normal);
    text-decoration: none;
    :visited {
        color: var(--color-links-visited);
    }
}