:root {
    --clr-primary: hsl(333, 69%, 27%);
    --clr-primary-dark: hsl(333, 69%, 19%);
    --clr-primary-light: hsl(333, 69%, 35%);
    --clr-accent: hsl(196, 6%, 66%);
}
body {
    background: var(--bg-dark);
}

header {
    border: 0 none;
    padding: 0;
    height: 190px;
    background: var(--bg-dark);

    h1,p {
        display:none;
    }
}
header::after {
    content: url(/comic/images/tcbanner.png) / "Time Cruisers Comic";
    display: block;
    width: 762px;
    height: 190px;
    margin-inline: auto;
}

nav {
    background: var(--bg-primary);
    margin-inline: auto;

    a, a:link, a:visited {
        color: var(--clr-accent);
    }
    a:hover, a:active {
        color: var(--clr-neutral);
    }
}

section {
    background: var(--bg-dark);
    padding: 1rem 0;

    h2, h3, p {
        color: var(--clr-neutral);
        clear: both;
    }
    h2 {
        text-align: center;
    }

    img {
        margin-inline: auto;
        image-rendering: pixelated;
    }
    .container-small {
        max-width: 762px;
        margin-inline: auto;
    }
    .navbox {
        text-align:center;
        color: var(--clr-accent);
        a, a:link {
            color: var(--clr-neutral);
            text-decoration: none;
        }
        a:visited {
            color: var(--clr-accent);
        }
        a:hover, a:active {
            color: var(--clr-neutral);
            text-decoration: underline;
        }
    }
}

footer {
    background: var(--bg-dark);

    p {
        color: var(--clr-neutral);
    }
}