/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* nav{
  z-index: 99;
  background-color: PURPLE;
  position: absolute;
  padding: 1px;
  height: 100%;
  width: 120px;
}

.navlink{
  background-color: white;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
}
/*
        body {
            min-height: 100vh;
            background-color: #111;
            color: #fff;
            font-family: Arial, sans-serif;

            /* Keeps the box away from screen edges
            padding: 20px;} */
        
/* ==============================
   RETRO-FUTURISTIC THEME
   ============================== */

:root {
    --ink: #171717;
    --paper: #f3f0df;
    --yellow: #ffd500;
    --red: #eb5e55;
    --cyan: #20d9d2;
    --gray: #b8b8ad;

    --border: 3px solid var(--ink);
    --shadow: 7px 7px 0 var(--ink);
}

/* PAGE BACKGROUND */

body {
    background-color: var(--cyan);
    color: var(--ink);

    /* Optional background image */
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 24px 24px;
}

/* CONTENT PANELS */

.info-box,
.content-box {
    position: relative;

    background: var(--paper);
    color: var(--ink);

    border: var(--border);
    border-radius: 4px;

    box-shadow: var(--shadow);
}

/* Small technical decoration */

.info-box::after,
.content-box::after {
    content: "STARPUNCH // SYSTEM";

    position: absolute;
    right: 8px;
    bottom: 5px;

    color: #666;
    font-family: monospace;
    font-size: 9px;
    letter-spacing: 1px;
    pointer-events: none;
}

/* HEADINGS */

.info-box h2,
.content-box h1,
.content-box h2,
.mobile-menu summary {
    background: var(--yellow);
    color: var(--ink);

    border-bottom: var(--border);
    border-radius: 0;

    font-family: Arial Black, Impact, sans-serif;
    font-style: italic;
    letter-spacing: -1px;
    text-transform: uppercase;
}

/* Decorative label before headings */

.content-box h1::before,
.content-box h2::before,
.info-box h2::before {
    content: "// ";
    color: var(--red);
}

/* NAVIGATION BUTTONS */

.link-list a,
.link-list a:visited {
    position: relative;
    display: block;

    background: var(--paper);
    color: var(--ink);

    border: 2px solid var(--ink);
    border-radius: 0;

    font-family: monospace;
    font-weight: bold;
    text-transform: uppercase;

    box-shadow: 3px 3px 0 var(--ink);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

.link-list a::before {
    content: "▶ ";
    color: var(--red);
}

.link-list a:hover,
.link-list a:focus {
    background: var(--yellow);
    color: var(--ink);

    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
}

/* LINKS INSIDE BODY TEXT */

.content-box a,
.info-box p a {
    color: #006eaa;
    font-weight: bold;
    text-decoration-thickness: 2px;
}

.content-box a:visited,
.info-box p a:visited {
    color: #7e3dbd;
}

.content-box a:hover,
.info-box p a:hover {
    color: var(--red);
    background: var(--yellow);
}

/* MARQUEE */

marquee {
    padding: 6px;

    background: var(--ink);
    color: var(--yellow);

    border: var(--border);

    font-family: monospace;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* BANNER */

.site-banner {
    border: var(--border);
    border-radius: 4px;
    box-shadow: var(--shadow);
}

/* TEXT SELECTION */

::selection {
    background: var(--red);
    color: #fff;
}

/* MOBILE */

@media screen and (max-width: 800px) {
    :root {
        --shadow: 4px 4px 0 var(--ink);
    }

    body {
        background-size: 16px 16px;
    }

    .info-box::after,
    .content-box::after {
        display: none;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}