:root {
    --page-bg: #000;

    /*
     *   Put your background image here.
     *
     *   Example:
     *   --page-bg-image: url("seed-bg.jpg");
     *   --page-bg-image: url("images/background.png");
     *
     *   Leave as none for plain black.
     */
    --page-bg-image: none;

    --green: #00ff66;
    --text: #00ff66;
    --content-bg: #050505;

    --title-font: "Anton", Haettenschweiler, "Arial Black", system-ui, sans-serif;
    --body-font: "Courier New", monospace;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

body {
    min-height: 100vh;
    font-family: var(--body-font);
    background-color: var(--page-bg);
}

/*
 * Firefox-compatible stretched full-page background image.
 * It is separate from the page body so object-fit works reliably.
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: var(--page-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /*
     *   Change opacity if the image is too strong.
     *   1 = full strength, 0.5 = half visible.
     */
    opacity: 1;
}

#boot-typing {
position: fixed;
inset: 0;
z-index: 10;
padding: 2rem;
color: var(--green);
font-family: var(--body-font);
font-size: clamp(0.7rem, 2vw, 1.5rem);
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
overflow: hidden;
background: #000;
}

#boot-typing.done {
opacity: 0;
pointer-events: none;
transition: opacity 500ms ease;
}

#seed-window {
position: fixed;
inset: 50% auto auto 50%;
width: min(92vw, 1200px);
height: min(82vh, 760px);
transform: translate(-50%, -50%) scale(0.88);
opacity: 0;
z-index: 5;

background: transparent;
border: 0;
box-shadow: none;

display: flex;
flex-direction: column;
}

#seed-window.open {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition:
opacity 420ms ease,
transform 420ms cubic-bezier(.2, 1.4, .4, 1);
}

#top-bar {
min-height: 64px;
background: #000;
border: 0px solid var(--green);


display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;

padding: 0 1rem;
}

#brand {
font-family: var(--title-font);
font-size: clamp(1.8rem, 4vw, 4rem);
font-weight: 1000;
color: var(--green);
text-decoration: none;
letter-spacing: 0.04em;
line-height: 1;
text-shadow: none;
}

#nav-links {
display: flex;
align-items: center;
gap: clamp(0.6rem, 2vw, 2rem);
white-space: nowrap;
}

#nav-links a {
color: var(--green);
text-decoration: none;
font-family: var(--title-font);
font-size: clamp(1rem, 2vw, 1.7rem);
font-weight: 1000;
letter-spacing: 0.08em;
text-shadow: none;
}

#nav-links a:hover,
#brand:hover {
color: #fff;
}

#content-box {
flex: 1;
padding: 0;
background: transparent;
overflow: hidden;
}

#content-inner {
width: 100%;
height: 100%;
overflow: auto;

background: var(--content-bg);
border: 5px solid var(--green);

color: var(--text);
padding: clamp(1rem, 2vw, 2rem);

font-family: var(--body-font);
font-size: clamp(1rem, 1.4vw, 1.35rem);
line-height: 1.55;

box-shadow: none;
}

#content-inner h1,
#content-inner h2,
#content-inner h3 {
font-family: var(--title-font);
line-height: 0.95;
text-transform: uppercase;
color: var(--green);
}

#content-inner h1 {
font-size: clamp(2.5rem, 7vw, 7rem);
margin: 0 0 1rem;
}

#content-inner h2 {
font-size: clamp(1.8rem, 4vw, 4rem);
}

#content-inner a {
color: var(--green);
font-weight: 900;
}

#content-inner a:hover {
color: #fff;
}

.plain-text-page {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--body-font);
}

@media (max-width: 760px) {
    #seed-window {
    width: 96vw;
    height: 90vh;
    }

    #top-bar {
    min-height: 96px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem;
    border-width: 5px;
    border-bottom: 0;
    }

    #nav-links {
    width: 100%;
    justify-content: space-between;
    }

    #content-inner {
    border-width: 5px;
    }
}