/* Pretty colors */

:root {
    --background: rgb(236, 235, 246);
    --text: black;
    --accent: rgb(117, 81, 137);
    --border-width: 2px;
}

h1 {background: rgba(50,20,50,0.1);}
body {background-image: url("../images/french-stucco.png");}

/*body {
    backdrop-filter: brightness(0.5) saturate(500%);
}*/

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --background: rgb(26, 26, 50);
        --text: white;
        --accent: rgba(230, 230, 255, 0.611);
    }

    a {color: rgb(239, 253, 255);}
    h1 {background: rgba(193, 197, 212, 0.203);}
    body {background-image: none;}
}

hr {
    border: 1px solid var(--accent);
    opacity: 25%;
    margin: 2em 0;
}

/* ------------------------------- */

body {
    font-family: "Body", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    padding: 1em 0;
}

main {
    max-width: 70ch;
    line-height: 1.5em;
    margin: 0 auto;
    padding: 1em 10%;
    border-left: var(--border-width) solid var(--accent);
    border-right: var(--border-width) solid var(--accent);
    border-radius: 10%;
}

h1 {
    margin: 2em 0 1em 0;
    padding: 0.2em 0;
    text-align: center;
    /*border-bottom: calc(var(--border-width) - 1px) solid var(--accent);*/
}

/* ------------------------------- */

/* Positioning */
.center {text-align: center;}
.right {text-align: right;}
img.right {margin: 0 0 0 auto;}
img.center {margin: auto;}

/* Aggressively pointing at images:
"NO! STAY IN THE BOX!!!" 
*/
img {
    max-width: 100%;
    display: block;
}

/* ------------------------------- */

/* FAQ Flexbox fuckery 
Sorry 
*/

section {
    margin-top: 3em;
    padding-bottom: 2em;
    border-bottom: calc(var(--border-width) + 1px) solid var(--accent);
}
section:last-of-type {margin-bottom: 3em;}
h2 {font-size: 1.2em;}
main h1 {font-size: 1.6em;}

div.flexy {
    display: flex;
    column-gap: 1em;
}

#quotes {min-width: 50%;}

.extraspace {margin-top: 3em;}

@media only screen and (orientation: portrait) {
    div.flexy {
        flex-direction: column;
    }
    #ann {
        border-top: 1px solid var(--accent);
        border-bottom: 1px solid var(--accent);
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

/* ------------------------------- */

/* Fonts */

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Header';
    font-style: normal;
    font-weight: 400;
    src: local("Cinzel-Regular.ttf"),
    url('../../resources/fonts/Cinzel Family/Cinzel/Cinzel-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: 'Body';
    font-style: normal;
    font-weight: 350;
    src: local("Lexend"),
    url('../../resources/fonts/lexend-v23-latin-regular.woff2') format('woff2');
  }

  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Body';
    font-style: bold;
    font-weight: 900;
    src: local("Lexend"),
    url('../../resources/fonts/lexend-v23-latin-900.woff2') format('woff2');
  }

  @font-face {
    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Elian';
    font-style: normal;
    font-weight: 400;
    src: local("Owl Elian"),
    url('../fonts/owl-elian.ttf') format('truetype');
  }

  .elian:not(.normal) {
    font-family: "Elian", sans-serif; 
    font-size: 2em; 
    line-height: 1.25em;
    max-width: 50ch;
    margin: 1em auto 1em auto;
}

.faded {opacity: 60%; margin-left: 1ch;}