body {
    background-color: black;
    color: black;
    font-family: "JetBrains Mono ExtraBold";
    overflow: hidden;
    text-transform: uppercase;
}
.rd {
    color: #e21d1d;
    transition-property: color;
    transition-duration: 1s;
}
.bgrd {
    background-color: #e21d1d;
    transition-property: background-color;
    transition-duration: 1s;
}
.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    z-index: -3;
}
.square {
    position: relative;
    width: 90dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}
.colspacer {
    height: 1.5dvh;
}
.rowspacer {
    width: 1.5dvh;
}
.outrowsp {
    position: relative;
    width: 5dvw;
    height: 100dvh;
    pointer-events: none;
}
.centercol {
    height: 97dvh;
    display: flex;
    flex-direction: row;
}
.content {
    position: relative;
    width: 100dvw;
    height: 97dvh;
    border: 3px solid black;
    pointer-events: none;
}
.hline {
    position: absolute;
    height: 3px;
    width: 3dvh;
    background-color: black;
}
.vline {
    position: absolute;
    height: 3dvh;
    width: 3px;
    background-color: black;
}
.top-left {
    top: 1dvh;
    left: 1dvh;
}
.top-right {
    top: 1dvh;
    right: 1dvh;
}
.bottom-left {
    bottom: 1dvh;
    left: 1dvh;
}
.bottom-right {
    bottom: 1dvh;
    right: 1dvh;
}
.titlebox {
    position: absolute;
    top: 3dvh;
    left: 10dvh;
    background: repeating-linear-gradient(45deg,transparent, transparent 13px, black 13px, black 30px);
    width: 30dvh;
    height: 15dvh;
}
#title {
    position: absolute;
    top: 5dvh;
    left: 12dvh;
    width: 16dvh;
    height: 11dvh;
    font-size: 2.5dvh;
    text-align: center;
    pointer-events: none;
}
#year-title {
    position: absolute;
    top: 20dvh;
    left: 10dvh;
    height: 50dvh;
    width: 2dvw;
    background-color: black;
    clip-path: polygon(0 0, 2dvw 0, 2dvw 45dvh, 0 41dvh);
    writing-mode: vertical-lr;
    font-size: 1dvw;
}
.year-title-accent {
    position: absolute;
    top: 20dvh;
    left: 10dvh;
    height: 50dvh;
    width: 2dvw;
    background-color: black;
    clip-path: polygon(2dvw 46dvh, 2dvw 49dvh, 1dvw 50dvh, 0 49dvh, 0 42dvh);
}
.declarations {
    position: absolute;
    top: 3dvh;
    left: 42dvh;
    font-size: 1.2dvh;
    text-align: justify;
    width: 30dvh;
    height: 15dvh;
    pointer-events: none;
}
.rotitle {
    position: absolute;
    font-size: 2dvw;
    writing-mode: vertical-rl;
    bottom: 1dvh;
    letter-spacing: 0.6em;
    transform: scalex(-1) scaley(-1);
}
.rosubtitle {
    position: absolute;
    color: white;
    font-size: 2dvw;
    writing-mode: vertical-rl;
    bottom: 1dvh;
    right: 0;
    transform: scalex(-1) scaley(-1);
}
.shape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 5%, 100% 70%, 75% 65%, 75% 10%);
}
#diamond {
    position: absolute;
    top: 3dvh;
    left: 74dvh;
    height: 15dvh;
    font-size: 15dvh;
    line-height: 1;
}
.years {
    position: absolute;
    bottom: 2dvh;
    right: 2dvh;
    font-size: 1.7dvh;
    display: flex;
    height: max-content;
    flex-direction: column;
}
.year-black-box {
    position: absolute;
    width: 2dvw;
    height: 50dvh;
    bottom: 2dvh;
    right: 7dvh;
    background: black;
    clip-path: polygon(0 0, 2dvw 0, 2dvw 45dvh, 0 41dvh);
    transform: scaley(-1) scalex(-1);
    writing-mode: vertical-lr;
    font-size: 1dvw;
}
.year-accent {
    position: absolute;
    width: 2dvw;
    height: 50dvh;
    bottom: 2dvh;
    right: 7dvh;
    background: black;
    clip-path: polygon(2dvw 46dvh, 2dvw 49dvh, 1dvw 50dvh, 0 49dvh, 0 42dvh);
    transform: scaley(-1) scalex(-1);
}
#warning {
    position: absolute;
    bottom: 2dvh;
    left: 3dvh;
    font-size: 3dvh;
}
.filler-text {
    position: absolute;
    left: 3dvh;
    bottom: 6dvh;
    font-size: 0.5dvw;
}
.navbar {
    font-size: 1.2dvw;
    writing-mode: vertical-rl;
    transform: scalex(-1) scaley(-1);
    text-align: justify;
    pointer-events: all;
}
a {
    text-decoration: none;
    transition-property: color;
    transition-duration: 1s;
}
a:hover {
    color: white;
}
.album-list {
    position: absolute;
    background-color: black;
    top: 22dvh;
    left: 18dvh;
    bottom: 22dvh;
    right: 18dvh;
    display: flex;
    flex-direction: row;
}
.album-half {
    position: relative;
    padding: 1dvh;
    font-size: 0.9dvw;
    line-height: 10dvh;
    width: 50%;
}
.album-accents {
    position: absolute;
    top: 20dvh;
    left: 16dvh;
    bottom: 20dvh;
    right: 16dvh;
}
.yearlink {
    color: black;
    pointer-events: all;
    transition-property: color background-color;
    transition-duration: 1s;
    cursor: pointer;
}

@media screen and (orientation: portrait) {
    .container {
        flex-direction: column;
        overflow: hidden;
    }
    .outrowsp {
        position: relative;
        width: 100dvw;
        height: 7dvh;
        pointer-events: none;
        display: flex;
        flex-direction: column;
    }
    .rotitle {
        font-size: 2.4dvh;
        writing-mode: horizontal-tb;
        left: 1dvh;
        top: 1dvh;
        letter-spacing: 0.6em;
        transform: none;
    }
    .rosubtitle {
        font-size: 2dvh;
        writing-mode: horizontal-tb;
        letter-spacing: 0.2em;
        bottom: 0.2dvh;
        left: 1dvh;
        transform: none;
    }
    .shape {
    position: absolute;
        clip-path: polygon(40% 100%, 95% 100%, 92% 90%, 43% 90%);
    }
    .square {
        position: relative;
        width: 99dvw;
        height: 70dvh;
        display: flex;
        flex-direction: row;
    }
    .colspacer {
        width: 1.5dvw;
        height: 100%;
    }
    .rowspacer {
        height: 1.5dvw;
        width: 100%;
    }
    .centercol {
        height: auto;
        width: 95dvw;
        display: flex;
        flex-direction: column;
    }
    .content {
        width: 94.5dvw;
        height: 77dvh;
    }
    .titlebox {
        top: 3dvh;
        left: 3dvh; 
        width: 20dvh;
        height: 12dvh;
    }
    #title {
        top: 4dvh;
        left: 4dvh;
        font-size: 2.5dvh;
        height: 10dvh;
    }
    .declarations {
        left: 25dvh;
        font-size: 0.731dvh;
        text-align: justify;
        width: 30dvw;
        height: 15dvh;
    }
    .album-list {
        top: 19dvh;
        left: 3dvh;
        bottom: 19dvh;
        right: 3dvh;
        display: flex;
        flex-direction: column;
    }
    .album-accents {
        top: 17dvh;
        left: 1dvh;
        bottom: 17dvh;
        right: 1dvh;
    }
    .navbar {
        display: block;
        top: 0.5dvh;
        bottom: 1dvh;
        width: 99dvw;
        height: auto;
        font-size: 1.6dvh;
        writing-mode: horizontal-tb;
        transform: none;
        text-align: justify;
        pointer-events: all;
    }
    .years {
        bottom: 5dvh;
        left: 2dvh;
        right: 2dvh;
        font-size: 1.4dvh;
        text-align: center;
        width: 85dvw;
        height: 5.5dvh;
        display: inline-block;
    }
    .album-half {
        padding-left: 1dvw;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 1dvh;
        line-height: 3;
        width: 100%;
    }
    #year-title {
        top: 16dvh;
        left: 3dvh;
        height: 4dvw;
        width: 60dvw;
        clip-path: polygon(0 0, 46dvw 0, 50dvw 4dvw, 0 4dvw);
        writing-mode: horizontal-tb;
        font-size: 2.5dvw;
    }
    .year-title-accent {
        top: 16dvh;
        left: 3dvh;
        height: 4dvw;
        width: 60dvw;
        clip-path: polygon(48dvw 0, 58dvw 0, 60dvw 2dvw, 58dvw 4dvw, 52dvw 4dvw);
    }
    #warning {
        bottom: 2dvh;
        left: 2dvh;
        font-size: 2dvh;
    }
    .filler-text {
        display: none;
    }
    .year-black-box {
        width: 60dvw;
        height: 4dvw;
        bottom: 11.5dvh;
        right: 3dvh;
        clip-path: polygon(60dvw 0, 14dvw 0, 10dvw 4dvw, 60dvw 4dvw);
        transform: none;
        text-align: right;
        writing-mode: horizontal-tb;
        font-size: 2.5dvw;
    }
    .year-accent {
        width: 60dvw;
        height: 4dvw;
        bottom: 11.5dvh;
        right: 3dvh;
        clip-path: polygon(12dvw 0, 2dvw 0, 0 2dvw, 2dvw 4dvw, 8dvw 4dvw);
        transform: none;
    }
    #diamond {
        top: 49.5dvh;
        left: 4.5dvh;
        height: 8dvh;
        font-size: 8dvh;
        line-height: 1;
    }
}