:root {
    /* Theme Palettes */
    --bg-red: #E92B3E;
    --text-red: #000000;
    
    --bg-blue: #1D36A4;
    --text-blue: #ffffff;
    
    /* Default = Red */
    --bg: var(--bg-red);
    --text: var(--text-red);
    --link: var(--text-red);
}

/* ====================== FULL PAGE ====================== */
html {
    height: 100%;
    min-height: 100vh;
    background-color: var(--bg) !important;
    color: var(--text) !important;
    scroll-behavior: smooth;
}

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

* {
    transition: none !important;
}

body {
    background-color: var(--bg) !important;
    color: var(--text);
    max-width: 68vw;
    margin: 0 auto;
    padding: 0 1.2rem 3rem;
    text-align: center;
}

h1, h2, h3, h4, h5, h6, p, a, li, nav {
    color: var(--text) !important;
}

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

/* ====================== NAV ====================== */
nav { width: 100%; padding: 1.4rem 0 0.8rem; }

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 1.2rem;
}

.menu a {
    text-decoration: none;
    color: var(--link) !important;
    font-size: 1.38em;
    white-space: nowrap;
    padding: 0.3em 0.4em;
}

.menu a:hover,
.menu a:focus { text-decoration: underline; }

hr {
    border-color: --text;
    background-color: --text;
    color: --text;
}

/* ====================== HOMEPAGE ====================== */
.home-content {
    width: 72%;
    max-width: 620px;
    margin: 8vh auto 0;
    text-align: left;
}

.home-content h1 {
    font-weight: 400;
    font-size: 4em;
    text-align: center;
    margin: 0.2em 0 1.1rem;
    line-height: 1.05;
}

.imgp {
    margin: 1.1rem auto;
    text-align: center;
    max-width: 500px;
    cursor: default;
}

.imgp div[style*="display: flex"],
.imgp svg {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
}

.imgp svg * {
    stroke: var(--text) !important;
}

.imgp svg path[fill="none"],
.imgp svg circle,
.imgp svg ellipse {
    fill: transparent !important;
}

/* ====================== CONTENT PAGES ====================== */

main {
    text-align: left;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.2rem 4rem;
    line-height: 1.65;
    
}

/* Article / Page Titles */
main h1 {
    font-size: 2.8em;
    font-weight: 400;
    margin: 0.4em 0 0.5em;
    text-align: left;
    line-height: 1.1;
color: #000 !important;
}

/* Subheadings */
main h2 {
    font-size: 1.85em;
    margin: 2em 0 0.8em;
    border-bottom: 1px solid var(--text-dim);
    padding-bottom: 0.4em;
}

main h3 {
    font-size: 1.45em;
    margin: 1.6em 0 0.6em;
}

main h4 {
    font-size: 1.2em;
    margin: 1.4em 0 0.5em;
}

/* General text */
main p,
main li,
main blockquote {
    font-size: 1.2em;
    margin-bottom: 1.4em;
    text-align: left;
color: #000 !important;
}

/* Blockquotes */
main blockquote {
    border-left: 4px solid var(--text);
    padding-left: 1.8rem;
    margin: 2em 0;
    font-style: italic;
    color: var(--text-dim);
}

/* Links */
main a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

main a:hover {
    text-decoration-thickness: 2px;
}

/* Responsive */
@media (max-width: 760px) {
    main {
        padding: 0.8rem 1rem 3rem;   /* Even tighter on mobile */
    }
    
    main h1 {
        font-size: 2.4em;
        margin-top: 0.4em;
    }
}

main::before {
    content: "";
    display: block;
    width: 100%;
    max-width: 760px;
    height: 1px;
    background-color: black;
    margin: 0.6rem auto 1.8rem;
}

/* ====================== THEME SWITCH ====================== */
html.blue-theme {
    --bg: var(--bg-blue);
    --text: var(--text-blue);
    --link: var(--text-blue);
}

/* Mobile */
@media (max-width: 760px) {
    .imgp { max-width: 92%; }
    .home-content h1 { font-size: 3.6em; }
}

/* Responsive */
@media (min-width: 1150px) { body { max-width: 62vw; } .home-content { width: 42%; }}
@media (min-width: 900px)  { .home-content { width: 52%; }}
@media (max-width: 760px) {
    body { padding: 0 1rem 2.5rem; max-width: 100%; }
    .home-content { width: 92%; }
}

figure { margin: 0 auto; }
#results { display: none; }