:root {
    --width: 800px;
    --padding: 10px;

    --header-font: "Spicy Sale";

    --focus-color: #ffffff;
    --marquee-duration: 30s;

    --header-image: url(../img/header_light.gif);
    --background-image: url(../img/light_tile.png);

    --background: #95b2cb;
    --body-outline: black;
    --body: #e0e6f7;
    --blockquote: #bdd8ef;
    --font: #1e1f26;
    --links: #8f1f1f;
    --links-hover: #000000;

    --primary-accent: #5b8db7;
    --font-on-accent: white;
    --secondary-accent: #9d4a14;

    @media (prefers-color-scheme: dark) {
        --header-image: url(../img/header_dark.gif);
        --background-image: url(../img/Dark_tile.png);

        --background: #1f2a48;
        --body-outline: #ffffff;
        --body: #131d38;
        --blockquote: #071724;
        --font: white;
        --links: #e5cea1;
        --links-hover: #ffffff;

        --primary-accent: #96b1dd;
        --font-on-accent: #000000;
        --secondary-accent: #fdbf97;
    }
}

@font-face {
    font-family: "Spicy Sale";
    font-display: swap;
    src: url(../fonts/Spicy%20Sale.otf);
}

@font-face {
    font-family: "Nunito";
    font-display: swap;
    src: url(../fonts/Nunito.ttf);
}

/* -------------------------------------------------------- */
/* SCROLLBAR STYLING */
/* -------------------------------------------------s------- */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-accent) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px double var(--primary-accent);
}

::selection {
    color: var(--font-on-accent);
    background: var(--primary-accent);
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
body {
    font-family: "Nunito", Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--background);
    color: var(--font);
    font-size: 1em;
    background-image: var(--background-image);
}

* {
    box-sizing: border-box;
    margin: 0;

    &:focus-visible {
        outline-color: red !important;
        outline-offset: -1px !important;
        outline-style: dotted !important;
        outline-width: 2px !important;
        border-color: transparent;
    }
}

html {
    position: relative;
}

html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: var(--links);
    text-decoration: underline;
    transition: 0.25s;
    line-height: 1rem;

    &:hover {
        color: var(--links-hover);
        text-decoration: none;
    }
}

/* only links with images are affected by this */
a:has(> img) {
    line-height: 0 !important;
    display: block;
}

img {
    max-width: 100%;
}

/* only add external links to paragraphs, blockquotes, and lists */
main p a[href^="http"]:after,
main blockquote a[href^="http"]:after,
main li a[href^="http"]:after {
    display: inline-block;
    content: "↗";
    margin-left: 1px;
    background-size: 1rem 1rem;
}

/* -------------------------------------------------------- */
/* LAYOUT SETUP */
/* -------------------------------------------------------- */
main,
header,
footer {
    width: var(--width);
    margin: 0 auto;
}

header,
footer {
    padding: var(--padding);
}

main {
    padding: 0;
}

header {
    margin-top: 50px;
}

/* -------------------------------------------------------- */
/* FLEXBOX CONTAINER */
/* -------------------------------------------------------- */
.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.full {
    flex: 1 1 calc(100% - 2rem);
    max-width: 100%;
}
.half {
    flex: 1 1 calc(50% - 2rem);
    max-width: 50%;
}
.third {
    flex: 1 1 calc(33% - 2rem);
    max-width: 33%;
}
.twothird {
    flex: 1 1 calc(66% - 2rem);
    max-width: 66%;
}
.quarter {
    flex: 1 1 calc(25% - 2rem);
    max-width: 25%;
}
.threequarter {
    flex: 1 1 calc(75% - 2rem);
    max-width: 75%;
}

.full,
.half,
.third,
.twothird,
.quarter,
.threequarter {
    background-color: var(--body);
    padding: var(--padding);
    outline: 1px solid var(--primary-accent);
    border: 3px solid var(--body-outline);
    outline-offset: -5px;
    position: relative;
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
header {
    height: 150px;
    background-color: var(--body);
    background-image: var(--header-image);
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    outline: 1px solid var(--primary-accent);
    border: 3px solid var(--body-outline);
    outline-offset: -5px;
}

/* decorative */
.logo {
    width: 90%;
}

.logo img {
    z-index: 3;
}

.portraits {
    position: absolute;
    right: -160px;
    top: 0;
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.portraits img {
    width: 100%;
}

.headerdeco {
    position: absolute;
    bottom: -30px;
    left: 20%;
}

.headerdeco img {
    width: 450px;
}

/* -------------------------------------------------------- */
/* MAIN BODY CONTENT */
/* -------------------------------------------------------- */
main {
    margin-bottom: var(--padding);
    margin-top: var(--padding);
}

.stamps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

/* -------------------------------------------------------- */
/* FORMATTING */
/* -------------------------------------------------------- */
p {
    padding: 5px 0;
    line-height: 1.5em;
}

p:first-child {
    padding-top: 0;
}

p:last-child {
    padding-bottom: 0;
}

/* -------------------------------------------------------- */
/* STYLING */
/* -------------------------------------------------------- */

/* HEADERS */
h1 {
    background-color: var(--primary-accent);
    color: var(--font-on-accent);
    font-family: var(--header-font), sans-serif;
    letter-spacing: 2px;
    font-size: 1.5rem;
    padding: 10px;
    margin-bottom: 5px;
    font-weight: normal;
    text-align: center;
}

h2 {
    color: var(--primary-accent);
    font-family: var(--header-font), sans-serif;
    border-bottom: 1px dashed var(--secondary-accent);
    letter-spacing: 2px;
    font-size: 1.3rem;
    font-weight: normal;
    text-align: center;
}

/* somehow fixes h2 to sticky to the top... */
section h2:first-child {
    margin-top: 0;
}

h3,
h4,
h5,
h6 {
    font-family: var(--header-font), sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    letter-spacing: 1px;
    color: var(--primary-accent);
    border-bottom: 1px dashed var(--secondary-accent);
    text-decoration-color: var(--secondary-accent);
    margin-bottom: 5px;
}

/* DECORATIVE ELEMENTS LIKE BOLD, ETC. */
bold,
b,
strong {
    color: var(--primary-accent);
}

italics,
i,
em {
    color: var(--secondary-accent);
}

underline,
u {
    text-decoration-thickness: 2px;
    text-decoration-color: var(--secondary-accent);
}

s,
strikethrough {
    opacity: 0.7;
}

.subtle {
    line-height: 1rem;
    font-size: 0.8em;
}

hr {
    border: 0;
    border-top: 1px dashed var(--primary-accent);
    overflow: hidden;
    margin: 5px 0;
}

mark {
    background-color: var(--primary-accent);
    color: var(--font-on-accent);
    padding: 0 5px;
    border-radius: var(--border-radius);
}

blockquote {
    padding: 10px;
    width: auto;
    margin: 10px;
    border-left-color: var(--primary-accent);
    border-left-width: 3px;
    border-left-style: solid;
    border-right-color: var(--primary-accent);
    border-right-width: 3px;
    border-right-style: solid;
    background-color: var(--blockquote);
}

pre {
    background: var(--body-deco);
    border: 1px solid var(--body-outline);
    border-left: 3px solid var(--primary-accent);
    border-radius: var(--border-radius);
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 1em;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 1em;
    display: block;
    word-wrap: break-word;
    max-height: 350px;
}

summary {
    font-size: 1em;
    color: var(--primary-accent);
    text-decoration: underline;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 5px;
}

details {
    background-color: var(--body-deco);
    border-radius: var(--border-radius);
    padding: 5px;
    padding-left: 10px;
    margin: 5px;
    border-left: 5px solid var(--secondary-accent);
}

/* Form elements */
input,
textarea,
select,
option {
    color: var(--text);
    font-family: inherit;
    border: 1px solid var(--primary-accent);
    padding: 1px;
    max-width: 100%;
}

/* Lists */
ul,
ol {
    padding-left: 20px;
    margin: 5px 0 5px 10px;
    overflow: hidden;
}

ul li {
    margin: 5px 0;
    list-style-image: url(../img/bullet.gif);

    &:last-child {
        margin-bottom: 0;
    }

    &:first-child {
        margin-top: 0;
    }
}

ol li {
    margin: 5px 0 5px 10px;
    line-height: 1.5;

    &:last-child {
        margin-bottom: 0;
    }

    &:first-child {
        margin-top: 0;
    }
}

ul ul li::marker {
    color: var(--primary-accent);
}

li::marker {
    color: var(--secondary-accent);
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */
footer {
    text-align: center;
    font-size: 0.8em;
    background-color: var(--body);
    outline: 1px solid var(--primary-accent);
    border: 3px solid var(--body-outline);
    outline-offset: -5px;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY, DO NOT REMOVE */
/* -------------------------------------------------------- */
#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--body-bg);
    color: var(--link);
    z-index: 1000;
    padding: 5px;
}

#skip a:focus {
    top: 0;
    transition: top 0.5s ease;
}

/* -------------------------------------------------------- */
/* RIGHT TO LEFT MARQUEE */
/* -------------------------------------------------------- */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee div {
    padding-left: 100%;
    width: max-content;
    animation: marquee var(--marquee-duration) linear infinite;
    line-height: 1em;
}

.marquee div:hover {
    animation-play-state: paused;
}

.marquee p {
    display: inline;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee div {
        overflow: scroll;
        padding-left: 0;
        width: auto;
        animation: none;
    }
}

/* extra stuff */
/* center any item */
.center-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    gap: 2px;
}

/* Shadow CSS Deco */
.image-shadow {
    filter: drop-shadow(3px 3px 0 var(--primary-accent));
}

/* Squishies */

.squishy img {
    transition: 0.3s;
}

.squishy img:hover {
    transform: scaleX(1.1) scaleY(0.9);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVENESS */
/* -------------------------------------------------------- */
@media screen and (max-width: 800px) {
    .flexcontainer {
        flex-direction: column;
    }

    body {
        padding: 10px;
    }

    .full,
    .half,
    .third,
    .twothird,
    .quarter,
    .threequarter {
        flex: 1 1 100%;
        max-width: 100%;
    }

    main,
    header,
    footer {
        max-width: 100%;
    }

    .portraits {
        display: none;
    }

    .hide-mobile {
        display: none !important;
    }
}