:root {

--dusty-grey: #565264;
--vintage-purple: #706677;
--blushy: #a6808c;
--tan: #CCB7AE;
--ivory: #D6CFCB;

--merane: #525050;

}

@font-face {
    font-family: 'AdevasPixel';
    src: url('../AdevasPixel-Regular.woff2') format('woff2'),
        url('../AdevasPixel-Regular.woff') format('woff');
}

@font-face {
    font-family: 'AdvinePixel';
    src: url('../AdvinePixelDemo-Regular.woff2') format('woff2'),
        url('../AdvinePixelDemo-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Smalle';
    src: url('../Smalle.woff2') format('woff2'),
        url('../Smalle.woff') format('woff');
}

@font-face {
    font-family: 'idk';
    src: url('../idk.woff2') format('woff2');
}

* {
    margin: 0;
}


html {
    height: 100%;
}

body {
    background: var(--ivory);
    height: 100%;
}

main {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}

#main-cont {
    background-color: var(--vintage-purple);
    box-shadow:
        -4px 0 0 0 var(--tan),
        4px 0 0 0 var(--tan),
        0 -4px 0 0 var(--tan),
        0 4px 0 0 var(--tan);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: left;

    margin: 8px;
    width: 37em;
    max-height: 42.5em;
    padding: 0 1em 1em 1em;
    overflow: hidden scroll;
}

#cont-header {
    position: sticky;
    top: 0;
    background-color: var(--vintage-purple);
}

h1 {
    font-family: 'AdevasPixel';
    font-size: 3em;
    color: var(--ivory);

    margin: 0.1em;
}

#border {
    border: 1px dotted var(--tan);
}

h2 {
    font-family: 'AdvinePixel';
    font-size: 2em;
    color: var(--ivory);

    margin: 0 0.1em 0.1em 0.1em;
}

p, ul {
    font-family: 'idk';
    color: white;
    text-align: center;
    margin: 1em;
    font-size: 1.3em;
}

ul {
    text-align: left;
    list-style-position: inside;
    list-style: list;
    font-size: 1.1em;
    line-height: 0.3em;
}

ul > ul {
    list-style: sublist;
    line-height: 1em;
}

@counter-style list {
    system: cyclic;
    symbols: '⊹' '⟡' '⋆';
    suffix: " ";
    speak-as: numbers;
}

@counter-style sublist {
    system: cyclic;
    symbols: ' ࣪ ˖';
    suffix: " ";
    speak-as: numbers;
}

#span2 {
    color: black;
    text-align: left;
    font-family: 'idk';
    font-size: 1.2em;
    padding: 0.3em;
    background: linear-gradient(90deg,#CCB7AE 0%, #CCB7AE00 50%);
}

#subheader {
    font-family: 'AdvinePixel';
    color: var(--tan);

    display: flex;
    justify-content: space-between;
    align-items: end;
}

#subheader a {
    margin-right: 0.5em;
    color: white;
    text-decoration: underline dotted var(--tan);
}

#subheader a:focus, #subheader a:hover {
    margin-right: 0.5em;
    color: var(--tan);
    text-decoration: underline dotted var(--blushy);
}

.strikethrough {
    margin-right: 0.5em;
    color: white;
    text-decoration: underline white .08em;
    text-underline-offset: -.25em;
    text-decoration-skip-ink: none;
}

article:not(:target) {display: none}

article {
    position: relative;
}

#images-nav {
    display: flex;
    flex-direction: column;
    padding: 0.3em;
    background-color: var(--vintage-purple);
        box-shadow:
        -4px 0 0 0 var(--tan),
        4px 0 0 0 var(--tan),
        0 -4px 0 0 var(--tan),
        0 4px 0 0 var(--tan);
    text-align: center;
}

#images-nav a, #images-nav span {
    font-family: 'AdevasPixel';
    color: white;
    font-size: 1.3em;
}

#images-nav a:focus, #images-nav a:hover {
    color: var(--tan);
}

article img {
    height: 35em;
    filter:grayscale(100%);
}

article img:hover, figure img:focus {
    filter: initial;
}

figure {
    position: relative;
}

#candle {
    height: 20em;
    position: absolute;
    top: 20em;
    left: 22em;
    z-index: 3;
}

.important {
    text-decoration: underline wavy black;
}

@media only screen and (max-width: 1200px) {
    main {
        height: initial;
        margin: 1em;
        overflow-x: hidden;
    }

    figure {
        order: 2;
    }

    figure img {
        height: 20em;
    }

    #candle {
        height: 10em;
        position: absolute;
        top: 13em;
        left: 12em;
        z-index: 3;
    }

    #images-nav {
        order: 1;
        flex-direction: row;
        width: initial;
        gap: 2em;
        justify-content: center;
        margin: 2em 0 2em 0;
    }

    #images-nav span {
        display: none;
    }

    #images-nav a {
        padding: 0.3em;
        font-size: 1.1em;
    }

    main {
        flex-direction: column;
    }

    #main-cont {
        width: initial;
        order: 3;
        max-height: initial;
    }

    #subheader {
        flex-direction: column-reverse;
    }
}

@media (prefers-color-scheme: dark) {

    body {
        background: black;
    }

    #main-cont {
        background-color: var(--merane);
        box-shadow:
            -4px 0 0 0 var(--tan),
            4px 0 0 0 var(--tan),
            0 -4px 0 0 var(--tan),
            0 4px 0 0 var(--tan);
    }

    #cont-header {
        background-color: var(--merane);
    }

    h1 {
        color: var(--ivory);
    }

    #border {
        border: 1px dotted black;
    }

    h2 {
        color: var(--tan);
    }

    p, ul {
        color: var(--ivory);
    }

    #span2 {
        color: black;
        background: linear-gradient(90deg,#CCB7AE 0%, #CCB7AE00 50%);
    }

    #subheader {
        color: var(--tan);
    }

    #subheader a {
        color: #ecc7d3;
        text-decoration: underline dotted var(--tan);
    }

    #subheader a:focus, #subheader a:hover {
        color: white;
        text-decoration: underline dotted var(--blushy);
    }

    .strikethrough {
        color: #ecc7d3;
        text-decoration: underline var(--ivory) .08em;
    }

    #images-nav {
        background-color: var(--merane);
            box-shadow:
            -4px 0 0 0 var(--tan),
            4px 0 0 0 var(--tan),
            0 -4px 0 0 var(--tan),
            0 4px 0 0 var(--tan);
    }

    #images-nav a, #images-nav span {
        color: var(--ivory);
    }

    #images-nav a:focus, #images-nav a:hover {
        color: black;
    }

    .important {
        text-decoration: underline wavy black;
    }

}