:root {
    --crt-red: rgb(218, 49, 49);
    --crt-green: rgb(112, 159, 115);
    --crt-blue: rgb(40, 129, 206);
}

html {
    background: #151515;
    color: #eee;
    font-family: sans-serif;
    text-transform: lowercase;
}

body {
    display: grid;
    max-width: 1200px;
    padding-left: 1em;
    padding-right: 1em;
    grid-template-areas: 
        "a"
        "b"
        "c"
        "d";
}

header {
    grid-area: a;
}
main {
    grid-area: b;
}
nav {
    grid-area: c;
}
footer {
    grid-area: d;
}

header {
    padding: 0 1em;
}

h1,
.blog-title {
    font-family: 'Courier New', Courier, monospace;
}

main,
footer {
    display: grid;
    margin: 1em;
}

/* article, */
.footer-list {
    grid-column: 1;
}
    
/* #content, */
.music-intro {
    grid-row: 1;
}
.music-main {
    grid-row: 2;
}
.music-prev {
    grid-row: 3;
}

nav .music {
    font-size: xx-large;
    list-style-type: none;
    margin-top: 1rem;
    & a {
        padding-top: 0.5rem;
        position: relative;
        &:hover,
        &:focus {
            text-decoration: none;
            &::after {
                content: attr(title);
                display: block;
                position: absolute;
                top: 3rem;
                width: 10rem;
                height: 3.5em;
                padding: 0.5rem;
                mix-blend-mode: hard-light;
            }
        }
    }
    & .doot {
        max-width: 40px;
    }
}

article {
    background: #111;
    border: 1px solid #454545;
    border-radius: 3px;
    padding: 2em;
    & p {
        max-width: calc(10em + 60ex);
    }
    & + article {
        margin-top: 1em;
    }
}

a {
    color: #ff1493;
    text-decoration: none;
    &:visited {
        color: #cb44d5;
    }
    &:hover {
        color: #ffc0cb;
        text-decoration: underline;
    }
    &.glyph-link,
    &.glyph-link:hover,
    &.glyph-link:visited {
        font-size: xx-large;
        text-decoration: none;
    }
    
    &.glyph-link,
    &.glyph-link:visited {
        color: #ffc0cb;
        &:hover {
            color: #ff1493;
        }
    }
}

.music-embed {
    max-width: 100%;
}

.post-date {
    display: block;
    font-family: 'Courier New', Courier, monospace;
}

.skip-to-content {
    background: #000;
    position: absolute;
    left: -4000px;
    top: 0;
    &:focus {
        left: 1em;
        top: 1em;
        z-index: 10;
    }
}

.footer-list {
    list-style-type: none;
    margin: 2rem 0;
    padding: 0;
    & li {
        text-align: center;
    }
}

/* crt effect from https://codepen.io/thisanimus/pen/OJpaqWz */
h1,
a:hover, 
.glyph-link {
    position: relative;
    text-shadow: 
        0 0 0.2em currentColor, 
        1px 1px rgba(255, 0, 255, 0.5),
        -1px -1px rgba(0, 255, 255, 0.4);
    &:before,
    &:after {
        content: "";
        transform: translateZ(0);
        pointer-events: none;
        mix-blend-mode: overlay;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1;
    }
    &:before {
        background: repeating-linear-gradient(
            var(--crt-red) 0px,
            var(--crt-green) 2px,
            var(--crt-blue) 4px
        );
    }
    &:after {
        background: repeating-linear-gradient(
            90deg,
            var(--crt-red) 1px,
            var(--crt-green) 2px,
            var(--crt-blue) 3px
        );
    }
}

@media screen and (min-width: 760px) {
    body {
        grid-template-areas: 
            "a a a"
            "b b c"
            "d d d";
    }

    footer {
        grid-template-columns: 3fr 1fr;
    }
    
    .footer-list {
        grid-row: 1;
    }
}