html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html,
body,
section,
nav,
ul,
li,
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
figcaption,
hr,
button,
a {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
  font-size: 0;
}
a {
  text-decoration: none;
}
button {
  background: none;
  border: none;
  outline: none;
}

:root {
    /* light theme is the default */
    --pageBackgroundColor: #fefefe;
    --contentBackgroundColor: #00000007;
    --borderColor: #cfcfcf;

    --textColourPrimary: #272727;
    --textColourSecondary: #676767;
    --textColourTertiary: #878787;
    --textColourAccent: #d70810;
    --textColourActive: #fff;

    --colourAccent: #d70810;
    --colourActive: #272727;

    --pageGap: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --iconSize: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);
    --titleFontSize: clamp(1.1253rem, 1.0128rem + 0.5626vw, 1.6879rem);
    --quoteFontSize: clamp(2rem, 1.1667rem + 3.7037vw, 4.5rem);
    --buttonFontSize: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
    --footerFontSize: clamp(0.9rem, 0.88rem + 0.1vw, 1rem);
}

/* not checking system preference for now */
/*@media (prefers-color-scheme: dark) {
    :root {
        --pageBackgroundColor: #0e0e0e;
        --contentBackgroundColor: #ffffff07;
        --borderColor: #3f3f3f;

        --textColourPrimary: #e7e7e7;
        --textColourSecondary: #676767;
        --textColourTertiary: #474747;
        --textColourAccent: #d3b677;
        --textColourActive: #000;

        --colourAccent: #d3b677;
        --colourActive: #e7e7e7;
    }
}*/

/* switch to the dark theme */
:root:has(input:checked) {
    --pageBackgroundColor: #0e0e0e;
    --contentBackgroundColor: #ffffff07;
    --borderColor: #3f3f3f;

    --textColourPrimary: #c7c7c7;
    --textColourSecondary: #676767;
    --textColourTertiary: #474747;
    --textColourAccent: #d3b677;
    --textColourActive: #000;

    --colourAccent: #d3b677;
    --colourActive: #e7e7e7;
}

body {
    background-color: var(--pageBackgroundColor);
    font-family: 'Archivo', sans-serif;
    min-height: 100dvh;
    padding: var(--pageGap);

    display: grid;
    place-items: stretch;

    transition: background-color .5s;
    /*transition-delay: .25s;*/
}

#filters {
    position: fixed;
    width: 0;
    height: 0;
    z-index: -1;
}

main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto auto;
    gap: var(--pageGap);
    padding: var(--pageGap);

    border-radius: var(--pageGap);
    border: 1px solid var(--borderColor);
    background-color: var(--contentBackgroundColor);
    transition: background-color .5s, border-color .5s;

    /* debug */
    /*> * {
        outline: 1px solid red;
    }*/
}

header {
    display: grid;
    place-items: center;
    overflow: clip;

    padding-bottom: var(--pageGap);
    border-bottom: 1px solid var(--borderColor);
    transition: border-color .5s;
}

h1 {
    font-weight: 400;
    font-size: var(--titleFontSize);
    letter-spacing: 0.15rem;
    color: var(--textColourSecondary);
    grid-column: 1 / 1;
    grid-row: 1 / 1;

    span {
        font-weight: 700;
        color: var(--textColourAccent);
    }
}

@media screen and (max-width: 512px) {
    h1 {
        justify-self: start;
        letter-spacing: 0.125rem;
    }
}

label {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    place-self: center end;
    cursor: pointer;
    /*opacity: .25;*/
    transition: translate .75s, opacity .75s;

    img {
        width: var(--iconSize);
        height: var(--iconSize);
    }
}

.toggle-dark {
    opacity: 0;
    translate: 0 200%;
    filter: invert(1);
}

.toggle-light {
    opacity: .15;
    translate: 0 0;
}

header:has(input:checked) {
    .toggle-dark {
        opacity: .15;
        translate: 0 0;
    }

    .toggle-light {
        opacity: 0;
        translate: 0 200%;
    }
}

input {
    display: none;
}

section {
    display: grid;
    place-items: center;
}

section:first-of-type {
    filter: url(#threshold) blur(0.25px);
}

blockquote {
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 700;
    font-size: var(--quoteFontSize);
    line-height: 1;
    color: var(--textColourPrimary);
    text-box-trim: trim-both;
    text-wrap: pretty;
    max-width: 32ch;
    text-align: center;

    user-select: none;
    z-index: 1;

    grid-column: 1 / 1;
    grid-row: 1 / 1;

    filter: blur(25px);
    transition: filter 2s;
    /*opacity: 0;*/
    /*transition: opacity 2s, filter 1.5s;*/
}

blockquote.animate {
    /*opacity: 1;*/
    filter: blur(0px);
    user-select: auto;
    z-index: 2;
}

button {
    background-color: var(--colourAccent);
    /*border: 1px solid var(--colourAccent);*/
    color: var(--textColourActive);
    font-size: var(--buttonFontSize);
    border-radius: 5px;
    padding: 10px;
    min-width: fit-content;
    width: 12vw;
    max-width: 200px;
}

button:hover {
    background-color: var(--colourActive);
    cursor: pointer;
}

hr {
    border: none;
    border-top: 1px solid var(--borderColor);
    transition: border-color .5s;
}

footer {
    display: grid;
    place-items: center;
    gap: 10px;

    small {
        font-size: var(--footerFontSize);
        color: var(--textColourTertiary);
    }

    /*background-image: url("../img/barcode.svg");
    background-size: 25% auto;
    background-position: top right;
    background-repeat: no-repeat;*/
}


.barcode {
    fill: red;
}