:root {
    /* # Viva La Vida Palette */
    --vlv-gold: #907B4C;
    --vlv-black: #020100;
    --vlv-darkbrown: #0E0800;
    --vlv-lighter-black: #090805;
}

@font-face {
    font-family: 'vive-la-vie';
    src: url(ViveLaVieV1-Regular.ttf);
}

.victor-mono-body {
  font-family: "Victor Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

#starfield {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    inset: 0; /* means this covers everything */
}

.star {
    z-index: 0;
    position: absolute;
    border-radius: 50%;
    background: #a89468;
    animation: twinkle var(--dur, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: var(--bright, 0.6); transform: scale(1.3); }
}

header {
    background-color: var(--vlv-lighter-black);
}

body {
    /* display: flex; */
    /* flex-direction: column; */
    background-color: var(--vlv-black);
    color: var(--vlv-gold);
    align-items: center;
    text-align: center;
    font-family: vive-la-vie;
    font-size: 1.25rem;
}

footer {
    margin-top: auto;
}

section {
    margin-top: 50px;
    margin-bottom: 25%;
    max-width: fit-content;
    scroll-margin-top: 200px;

    width: min(100%, 750px);

    margin: 4rem auto;

    padding: 0 1rem;
}

input {
    background-color: var(--vlv-darkbrown);
    accent-color: var(--vlv-gold);
    color: aliceblue;
}

output {
    color: aliceblue;
}

a {
    color: #a89468;
}