:root {
    --bg: #55666e;
    --bg-grad: linear-gradient(180deg, #94b4b2 0%, #55666e 100%);
    --main: rgba(207, 218, 217, 0.8);
    --pattern: url("./resources/images/dark-mosaic.png");
    --text: black;
    --accent: #729292;
    --link: #055a45;
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #323c42;
        --bg-grad: linear-gradient(180deg, #655165 0%, #0c1f27 100%);
        --main: #1d1d2d;
        --text: rgb(242, 248, 247);
        --accent: #6f6f8c;
        --link: #f1fceb;
    }
    img {filter: brightness(60%) hue-rotate(80deg);}
}

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

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

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

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

main {
    max-width: 50ch;
    margin: auto auto;
    padding: 0 1em;
}

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

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

h1 {
    font-family: Dyslexie, OpenDyslexic, "The Bold Font", sans-serif;
    font-size: 2.5em;
    line-height: 1em;
    margin-top: 0.2em;
    margin-bottom: 0;
}

.box, main {
    padding: 1em;
    border: 2px solid var(--accent);
    border-radius: 10px;
    background: var(--main);
}

.flex {display: flex; padding: 0 1em; margin-bottom: 1em; flex-wrap: wrap; border-bottom: 3px solid var(--accent);}
.flex :is(h1) {flex-grow: 2; flex-basis: 75%;}
.flex p {flex-grow: 1; flex-basis: 25%;}
.flexlist {display: flex; padding-left: 0; margin-bottom: 0; flex-wrap: wrap; justify-content: center; row-gap: 0.5em;}
.flexlist li {flex-basis: calc(49% - 1em); border: 1px solid var(--accent); margin-left: 0; text-align: center; padding: 0.5em 0.5em; flex-grow: 1;}
.flexlist li::marker {color: transparent;}
li:hover {backdrop-filter: brightness(110%);}

.right {text-align: right;}
.centerleft {margin: 0.5em auto; text-align: center;}

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

@media only screen and (max-width: 60ch) {
    main {border-radius: 0;}
}

#multiplecode {
    filter: contrast(30%);
    margin: 0.5em 0 0 0;
    padding: 0.5em;
    font-size: 0.8em;
}

details, #multiplecode {
    text-align: left;
    line-height: 1.2em;
}

details p {
    margin: 0;
    padding: 0.5em;
    padding-left: 1em;
    font-size: 0.8em;
    backdrop-filter: contrast(130%);
}

#multiplecode:hover, #multiplecode:focus {
    filter: contrast(100%);
    backdrop-filter: contrast(150%);
    cursor: pointer;
}