:root {
    --base: light-dark(#191724, #faf4ed);
    --surface: light-dark(#1f1d2e, #fffaf3);
    --overlay: light-dark(#26233a, #f2e9e1);
    --muted: light-dark(#6e6a86, #9893a5);
    --subtle: light-dark(#908caa, #797593);
    --text: light-dark(#e0def4, #464261);
    --love: light-dark(#eb6f92, #b4637a);
    --gold: light-dark(#f6c177, #ea9d34);
    --rose: light-dark(#ebbcba, #d7827e);
    --pine: light-dark(#31748f, #286983);
    --foam: light-dark(#9ccfd8, #56949f);
    --iris: light-dark(#c4a7e7, #907aa9);
    --highlight-low: light-dark(#21202e, #f4ede8);
    --highlight-med: light-dark(#403d52, #dfdad9);
    --highlight-high: light-dark(#524f67, #cecacd);
}

body {
    font-family: monospace;
    background: var(--base);
    color: var(--text);
    scrollbar-color: var(--muted) var(--overlay);
}

::selection {
    color: var(--text) !important;
    background: var(--highlight-high);
}

div {
    border: outset var(--highlight-high) 5px;
    padding: 0.5rem;
    width: auto;
}

header {
    padding: 0.5rem 0;
    display: flex;
    gap: 0.5rem;
    flex-flow: wrap;
    transform-style: preserve-3d;
}

.header-nav {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    border: outset var(--highlight-high) 5px;
    padding: 0.5rem;
}

.logo {
    flex: 0 0 3.5rem;
    align-self: stretch;

    background-color: var(--text);

    -webkit-mask: url("ww.svg") center / 90% 90% no-repeat;
    mask: url("ww.svg") center / 90% 90% no-repeat;
}

.header-button {
    border-left: var(--muted) solid 0.3rem;
    border-top: var(--muted) solid 0.3rem;
    border-right: black solid 0.3rem;
    border-bottom: black solid 0.3rem;
    font-size: 1.5rem;
    color: transparent;
    text-shadow:
            0.25rem 0.125rem 2px red,
            0.15rem 0.075rem 2px orange,
            0.05rem 0.025rem 2px yellow,
            -0.05rem -0.025rem 2px lime,
            -0.15rem -0.075rem 2px blue,
            -0.25rem -0.125rem 2px indigo;

    transition:
            border-top-color 0.2s ease-in-out,
            border-left-color 0.2s ease-in-out,
            border-right-color 0.2s ease-in-out,
            border-bottom-color 0.2s ease-in-out,
            flex-grow 0.15s ease-in-out,
            background-color 0.2s ease-in-out,
            font-weight 0.2s ease-in-out,
            text-shadow 0.2s ease-in-out,
            color 0.2s ease-in-out;
    
    border-top-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.selected {
    color: var(--subtle);
    text-shadow: 0.1rem 0.1rem var(--highlight-low);
    font-weight: bold;
}

.header-button:hover {
    border-left: black solid 0.3rem;
    border-top: black solid 0.3rem;
    border-right: var(--muted) solid 0.3rem;
    border-bottom: var(--muted) solid 0.3rem;
    flex-grow: 0.01;
    
    background-color: var(--overlay);
    font-weight: bold;
    text-shadow: 0.15em 0.15em var(--base) 0.05em;
    color: var(--text);
}

.header-button:active {
    border-left: var(--muted) solid 0.3rem;
    border-top: var(--muted) solid 0.3rem;
    border-right: var(--subtle) solid 0.3rem;
    border-bottom: var(--subtle) solid 0.3rem;
    
    background-color: var(--highlight-high);
    text-shadow: 0.1em 0.1em var(--base);
    color: var(--text);
}

.wavy-text {
    animation: 03s ease-in-out infinite alternate;
}