:root {
    --bg: #014067;
    --bg-grad: linear-gradient(180deg, #94d4ff 0%, #e45305 150%);
    --main: rgba(243, 248, 254, 0.9);
    --pattern: url("../resources/images/crissxcross.png");
    --text: black;
    --accent: rgb(34, 59, 140); /* #760000 */
    --dimmer: rgba(255,255,255,0.7);
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #302a2a;
        --bg-grad: linear-gradient(180deg, #033d60 0%, #151515 100%);
        --pattern: none;
        --main: rgb(48, 52, 53);
        --text: rgb(255, 255, 255);
        --dimmer: rgba(0,0,0,0.3);
        --accent: rgb(66, 124, 218);
    }

    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;
}
.center {text-align: center;}

.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 dashed 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;}

img {max-width: 100%;}

#name {padding-top: 0.5em; padding-bottom: 0.1em;}

@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("Daddy In Space"),
    url('../resources/fonts/DaddyinspaceDEMO.otf') format('opentype');
  }

@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;}
}

@media only screen and (min-width: 1000px) {
    #poetry, #trivia {
        transform: rotate(3deg);
        margin-top: 3em;
    }
    #trivia {
        margin-top: 0em;
    }

    #pfp, #truename {
        transform: rotate(-2deg);
        margin-top: 1em;
    }

    #truename {margin-top: 3em;}
}

img {display: block; margin: 0.5em auto; padding: 0; max-width: calc(100% - 4px); border-radius: 10px; border: 2px solid var(--accent);}