:root {
    --bg: #792600;
    --bg-grad: linear-gradient(180deg, #310000 0%, #c00707 80%, #fd642d 100%);
    --main: rgba(254, 243, 243, 0.8);
    --pattern: url("../resources/images/french-stucco.png");
    --text: black;
    --accent: rgb(128,0,0); /* #760000 */
    --dimmer: rgba(255,255,255,0.3);
    --border: black;
    --signature: var(--accent);
    --link-visited: rgb(67, 0, 58);
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #302a2a;
        --bg-grad: linear-gradient(180deg, #310000 0%, #7d0000 100%);
        --main: rgba(45, 10, 10, 0.8);
        --text: rgb(244, 240, 240);
        --dimmer: rgba(0,0,0,0.3);
        --accent: rgb(186, 2, 2); /* #760000 */
        --signature: rgb(254, 176, 176);
        --link-visited: rgb(214, 197, 202);
    }
}

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

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);*/
}

main {
    display: flex;
    /*flex-wrap: wrap;*/
    justify-content: space-evenly;
    align-items: flex-start;
    column-gap: 1em;
    padding-bottom: 2em;
}

.bg-pattern {
    background-image: var(--pattern);
    padding-top: 2em;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

footer {background: black; color: rgb(209, 179, 179); padding: 0.5em 0.5em 0 0.5em;}
footer p {max-width: 80ch; margin: auto; font-size: 0.8em; line-height: 1.2em; margin-bottom: 0.5em;}
quote {font-style: italic;}

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

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

#right, #left {
    max-width: 60ch;
    padding: 1em;
    background: var(--main);
    padding-bottom: 0;
    border: 1em solid var(--border);
    border-radius: 5px;
    flex-basis: 40%;
}

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

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

h1 {font-size: 2.5em;}

.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.5em;}
#signature {
    font-family: "Signature", "TitleFont", sans-serif;
    margin-top: 0.5em;
    color: var(--signature)
}

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

.right {text-align: right;}
.center {text-align: center;}
.left {text-align: left;}
img {display: block; margin: 0.5em auto; padding: 0; max-width: calc(100% - 4px);}
img:not(img.noborder, figure img), #banner {border-radius: 10px; border: 2px solid var(--accent);}

.flexbox {
    display: flex;
}

figure {margin-left: 0; margin-right: 0;}
figcaption {text-align: center; font-size: 0.7em;}
.flip {-webkit-transform: scaleX(-1); transform: scaleX(-1);}

.conditional-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.farbox {justify-content: space-between;}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'TitleFont';
    font-style: normal;
    font-weight: 400;
    src: local("Lilly Regular"),
    url('../resources/fonts/Lilly__.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: 'Signature';
    font-style: normal;
    font-weight: 400;
    src: local("Adelia"),
    url('../resources/fonts/adelia_3/adelia.ttf') format('truetype');
  }

#right {margin-top: 2em;}

@media only screen and (max-width: 1200px) {
    #right, #left {
        border: 1em solid var(--border);
        border-radius: 0;
        flex-basis: 100vw;
        margin: 0 auto;
        min-width: calc(100% - 4em);
        max-width: 80ch;
    }
    main {
        flex-direction: column;
        align-items: stretch;
        /*row-gap: 1em;*/
    }
    #right {border-top: 0; margin-top: 0;}
    #left {border-bottom: 0;}
    .bg-pattern {padding: 0.5em 0;}

    figure {margin: 0;}
    .flexbox {flex-direction: column;}
    .conditional-center {text-align: center;}
}

@media only screen and (max-width: 800px) {
    .bg-pattern {padding: 0;}
    #right, #left {
        min-width: calc(100% - 4em);
        padding: 0.5em;
        border: 0.5em solid var(--border);
        border-top: 1em solid var(--border);
        border-bottom: 1em solid var(--border);
    }
    #right {border-top: 0; margin-top: 0;}
    #left {border-bottom: 0;}
}

@media only screen and (min-width: 800px) {
    body {
        border-top: 1em solid var(--border); 
        border-bottom: 1em solid var(--border);
    }
}

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