:root {
    --bg-button: rgb(59, 130, 163);
    --bg-button-hover: rgb(43, 103, 131);
    --bg-primary: #eeeeee;
    --bg-secondary: #f5f5f5;
    --border-color: rgb(160, 160, 160);
    --text-primary: #222222;
    --text-button: rgb(245, 245, 245);
    --link-color: #0066cc;
    --link-visited: #551a8b;
    --link-hover: #004080;

    --paragraph-font-size-multiplier: 1.2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-button: rgb(43, 103, 131);
        --bg-button-hover: rgb(32, 77, 99);
        --bg-primary: rgb(34, 34, 34);
        --bg-secondary: rgb(46, 46, 46);
        --text-primary: rgb(231, 231, 231);
        --link-color: #4dabff;
        --link-visited: #c792ea;
        --link-hover: #82c7ff;
    }
}

body {
    font-family: 'Times New Roman', Times, serif;

    background-color: var(--bg-primary);
    color: var(--text-primary);

    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited);
}

a:hover, a:focus {
    color: var(--link-hover);
}

/* Small devices (phones, 576px and up) */
@media (min-width: 36rem) {
    body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 48rem) {
    body {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 62rem) {
    body {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 75rem) {
    body {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

main {
    margin: 0 auto;
    max-width: 120rem;
}

.top-container {
    height: calc(min(80rem, max(50rem, 100vh - 6rem)));
    display: flex;
    flex-direction: column;
    justify-items: stretch;
}

.top-container hr {
    margin: 0;
}

.max-width-container hr {
    margin: 2rem 0 0 0
}

.max-width-container p, li {
    margin: 1rem;
    font-size: calc(1rem * var(--paragraph-font-size-multiplier));
}

.max-width-container {
    margin: 0 auto;
    max-width: calc(1rem + 80ch * var(--paragraph-font-size-multiplier));
}

hgroup, h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

.dotted-box {
    border: 0.3rem dotted var(--border-color);
}

body:has(canvas-component-controls[fake-fullscreen]) {
    overflow: hidden;
}

canvas-component-controls {
    margin: 1rem;
    flex-grow: 1;
}

canvas-component-controls[fake-fullscreen] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    margin: 0;
}