:root {
    color-scheme: dark;

    /* Colors */
    --page-bg: #171818;
}

body {
    margin: 0 auto;
    padding: 1em;
    max-width: 1024px;
    font-family: Verdana, Arial, sans-serif;
    background-color: var(--page-bg);
    background-image: url('bg.gif');
    background-size: 180px;
    color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: .2ch;
}


iframe {
    max-width: 100%;
}

/* Image styles */

img {
    max-width: 100%;
    height: auto;
}

figure.photo {
    display: table;
    float: inline-end;
    margin: 0;
    margin-block-end: .5em;
    margin-inline-start: .5em;
    border-collapse: separate;
    background-color: #222222;
    color: white;
    border: medium gold outset;
    max-width: 15em;
    width: 30%;
}
figure.photo.left-align {
    float: inline-start;
    border-color: silver;
    margin-inline-start: 0;
    margin-inline-end: .5em;
}
figure.photo .row {
    display: table-row;
}
figure.photo .cell {
    display: table-cell;
    border: medium gold inset;
    padding: 2px;
}
figure.photo.left-align .cell {
    border-color: silver;
}

/* Global layout */

body {
    display: grid;
    grid-template:
        "header header"
        "sidebar main-content"
        "footer footer"
        / 1fr 4fr;
}
body > header {
    grid-area: header;
}
body > nav {
    grid-area: sidebar;
}
body > main {
    grid-area: main-content;
}
body > footer {
    grid-area: footer;
}

/* Header */

marquee-text {
    display: block;
    background-color: #c46500;
    box-shadow:
        inset 0.2em 0.2em 0.2em 0 rgba(255, 255, 255, 0.25),
        inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
    font: bold 1.5em / 1 'Courier New', Courier, monospace;
    overflow: hidden;
}

marquee-text > div {
    display: inline-block;
    padding: .5em;
}

@media not (prefers-reduced-motion) {
    marquee-text > div {
        animation: marquee 5s linear alternate infinite;
    }

    marquee-text:hover > div {
        animation-play-state: paused;
    }
}

@keyframes marquee {
    to {
        transform: translateX(calc(var(--marquee-width) - 100%));
    }
}

marquee-text span {
    display: inline-block;
    text-shadow: 1px 1px 0 #000;
    transform: scale(1.05, 1.7);
}

/* Sidebar */

body > nav ul {
    position: sticky;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

body > nav ul::after {
    content: "";
    grid-column: 1 / -1;
    display: block;
    border-left: solid .8em transparent;
    border-top: solid 1em #00d07a;
}

body > nav ul li {
    display: flex;
}

body > nav a {
    flex: 1;
    padding: .75em 1em;
    background-color: #005d36;
    box-shadow:
        inset 0 0.2em 0.2em 0 rgba(255, 255, 255, 0.25),
        inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
    color: #fff;
    border-left: solid 5px #00d07a;
    text-decoration: none;
}

body > nav a.current,
body > nav a:active {
    box-shadow:
        inset -0.2em -0.2em 0.2em 0 rgba(255, 255, 255, 0.25),
        inset 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.5);
}

body > nav a:hover {
    background-color: #27664c;
}

/* Main Content */
main {
    background-color: var(--page-bg);
    padding-inline-start: 1em;
}

/* Footah */

body > footer {
    background-color: #005d36;
    padding: 2em;
    box-shadow:
        inset 0.2em 0.2em 0.2em 0 rgba(255, 255, 255, 0.25),
        inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}

/* Album listing */

.album h2 {
    margin-block-start: 0;
    border: outset thick;
}
.album.first h2 {
    background-color: gold;
    color: #000;
    border-color: gold;
}
.album.second h2 {
    background-color: silver;
    color: #000;
    border-color: silver;
}

.tracklist {
    clear: inline-start;
    background-color: #401443;
}

@media (max-width: 600px) {
    body {
        grid-template:
            "header"
            "sidebar"
            "main-content"
            "footer"
            / 1fr;
        padding: .5em;
    }

    marquee-text {
        font-size: 1em;
        text-align: center;
    }

    main {
        padding-inline-start: 0;
    }
}