:root {
    --bg: #014067;
    --bg-grad: linear-gradient(180deg, #f3f9fd 0%, #acacae 100%);
    --main: rgba(243, 248, 254, 0.8);
    --pattern: url("./resources/images/darkswirl.png");
    --text: black;
    --accent: rgb(150, 161, 173); /* #760000 */
    --dimmer: rgba(255,255,255,0.4);
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #302a2a;
        --bg-grad: linear-gradient(180deg, #384c58 0%, #151515 100%);
        --pattern: none;
        --main: rgb(48, 52, 53);
        --text: rgb(242, 240, 240);
        --dimmer: rgba(0,0,0,0.3);
        --accent: rgb(147, 161, 182);
    }

    img {filter: invert(100%) sepia(100%) hue-rotate(180deg) saturate(300%) brightness(80%);}

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

body {
    margin: 0; padding: 0;
    font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Verdana, Ubuntu, roboto, noto, Arial, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, -apple-system, BlinkMacSystemFont, Sans-Serif;
    font-size: 1em;
    line-height: 1.5em;
    background-color: var(--bg);
    background: var(--bg-grad);
    color: var(--text);
    /*background-image: var(--pattern);*/
}

.bg-pattern {
    background-image: var(--pattern);
    padding: 0.1em;
    padding-top: 2em;
    padding-bottom: 0em;
}

.bg-pattern, body {min-height: calc(100vh - 2em);}

main {
    margin: auto auto 1em auto;
    padding: 1.5em;
    /*background: var(--main);*/
    display: flex;
    justify-content: space-evenly;
}

main section {flex-basis: 55ch; margin: 0 0.5em;}

.bg-pattern {background-image: var(--pattern);}

h1, h2 {
    font-family: Dyslexie, OpenDyslexic, "Headers", "Mansalva", sans-serif;
    line-height: 1em;
}

h1 {font-size: 2.5em;}

.box, div.headline, .background {
    background: var(--dimmer);
    padding: 1em;
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 0 1em; margin-bottom: 0.5em;
}

hr {border: 1px solid var(--accent);}

.headline {border-bottom: 1px solid var(--accent);}

.flex {display: flex; padding-bottom: 0; margin-bottom: 1em; flex-wrap: wrap;}
.flex :is(h1, .headline) {flex-basis: 50%;}
h1 {margin: 0.2em; flex-grow: 2;}
h2 {margin-bottom: 0;}

h2 ~ p {margin-top: 0.5em;}

.right {text-align: right;}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Mansalva';
    font-style: normal;
    font-weight: 400;
    src: local("Mansalva"),
    url('../resources/fonts/mansalva-v12-latin-regular.ttf') format('truetype');
  }

  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Headers';
    font-style: normal;
    font-weight: 400;
    src: local("28 Days Later"),
    url('../resources/fonts/28 Days Later.ttf') format('truetype');
  }

@media only screen and (max-width: 60ch) {
    main {border-radius: 0; display: block; padding: 0.5em;}
    main section {margin: 0;}
    .bg-pattern {padding-top: 0;}
}

img {display: block; margin: 0.5em auto; padding: 0; max-width: 100%;}

figure {margin: 0;}

.right {text-align: right;}
.center, figcaption {text-align: center;}