body {
    background-color: black;
    color: yellow;
    text-transform: uppercase;
    font-family: "Verdana";
    overflow: hidden;
    cursor: default;
}
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 100dvh;
    width: 100dvw;
    display: flex;
    flex-direction: column;
}
.content {
    display: flex;
    flex-direction: row;
}
.nav {
    display: flex;
    flex-direction: row;
    border-top: 1px solid white;
}
.col {
    display: flex;
    flex-direction: column;
}
.header {
    font-family: "Bebas Neue";
    font-size: 6dvh;
}
.spacer {
    width: 2dvw;
}
.sitemap {
    writing-mode: vertical-lr;
    text-transform: lowercase;
    font-size: 1.2dvh;
    padding-top: 1dvw;
}
.archive {
    padding-top:1dvw;
    font-size: 1.5dvw;
    width: 100%;
}
.filltext {
    background-color: yellow;
    color: black;
    font-family: "Bebas Neue";
    font-weight: bold;
    font-size: 2dvh;
    height: min-content;
}
.filltextmobile {
    background-color: yellow;
    color: black;
    font-family: "Bebas Neue";
    font-weight: bold;
    font-size: 2dvh;
    height: min-content;
    width: 100%;
    display: none;
    visibility: hidden;
    overflow: hidden;
}
.cspacer {
    height: 1dvw;
}
.accent {
    background: repeating-linear-gradient(90deg, yellow, yellow 48%, transparent 48%, transparent 52%, yellow 52%, yellow);
    height: 1dvw;
}
.accent2 {
    background: repeating-linear-gradient(90deg, #df2d2d, #df2d2d 23%, transparent 23%, transparent 27%, #df2d2d 27%, #df2d2d 48%, transparent 48%, transparent 52%, #df2d2d 52%, #df2d2d 73%, transparent 73%, transparent 77%);
    height: 1dvw;
}
.sitemap a {
    text-decoration: none;
    color: #df2d2d;
}
.sitemap a:hover {
    text-decoration: none;
    color: transparent;
    -webkit-text-stroke: 1px yellow;
}
.title {
    font-family: "Barcola";
    color: transparent;
    -webkit-text-stroke: 1px #df2d2d;
    font-size: 7dvh;
    transform: scalex(-1) scaley(-1);
    writing-mode: vertical-rl;
    width: fit-content;
    display: grid;
    border-left: 1px solid;
    border-top: 1px solid;
    border-color: white;
}
.dspacer {
    background: repeating-linear-gradient(45deg, transparent, transparent 20px, white 20px, white 30px);
    width: 1dvw;
}
.hspacer {
    width: 1dvw;
}
.minitext {
    font-size: 0.4dvh;
    color: white;
    padding-top: 1dvw;
    width: 9dvw;
    text-transform: none;
    font-family: "Blockcraft";
}
.shape {
    position: relative;
    width: 100%;
}
.shape1 {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height: 100%;
    clip-path: polygon(
        1dvw 1dvw, 2dvw 1dvw, 1dvw 2dvw
        );
}
.shape2 {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height: 100%;
    clip-path: polygon(
        2.5dvw 1dvw, 30dvw 1dvw, 38dvw 9dvw, 36.5dvw 9dvw, 29.5dvw 2dvw, 1.5dvw 2dvw
    );
}
.shape3 {
    position: absolute;
    background-color: #df2d2d;
    width: 100%;
    height: 100%;
    clip-path: polygon(
        1dvw 2.5dvw, 2dvw 3.5dvw, 2dvw 17dvh, 1dvw 17dvh
    );
}
.shape4 {
    position: absolute;
    background-color: #df2d2d;
    width: 100%;
    height: 100%;
    clip-path: polygon(
        31dvw 1dvw, 32.5dvw 1dvw, 39.5dvw 8dvw, 65dvw 8dvw, 66dvw 9dvw, 39dvw 9dvw
    );
}
.shape5 {
    position: absolute;
    background-color: transparent;
    border: 1px solid #df2d2d;
    top: 3.5dvw;
    height: 5dvw;
}
.w1 {
    width: 1dvw;
}
.w05 {
    width: 0.5dvw;
}
.w25 {
    width: 0.25dvw;
}
.left3 {
    left: 3dvw;
}
.left5 {
    left: 5dvw;
}
.left7 {
    left: 7dvw;
}
.left9 {
    left: 9dvw;
}
.left10 {
    left: 10dvw;
}
.left11 {
    left: 11dvw;
}
.left12 {
    left: 12dvw;
}
.left125 {
    left: 12.5dvw;
}
.left13 {
    left: 13dvw;
}
.old {
    position: relative;
    width: 100%;
    height: 15dvh;
    overflow: hidden;
}
a {
    text-decoration: none;
}
.overlay {
    position: absolute;
    display: grid;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: grayscale(100%);
    width: 100%;
    height: 100%;
    z-index: 2;
    transition-property: background-color backdrop-filter;
    transition-duration: 1s;
    text-align: center;
    font-family: "NIN";
    font-size: 2dvw;
}
.overlay:hover {
    background-color: transparent;
    backdrop-filter: grayscale(0);
}
.index {
    background-color: #e7fa19;
    color: black;
    font-family: Verdana;
    font-size: 1.2vmin;
    overflow: hidden;
}
.index .bound {
    color: #e7fa19;
    background-color: black;
}
.index .top-right {
    position: absolute;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: black;
    top: 0;
    right: 0;
    font-size: 1vmin;
    font-family: monospace;
    font-weight: bold;
    text-align: right;
    height: 70dvh;
}
.arrow {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 4vw;
    color: white;
    z-index: -1;
}
@media screen and (orientation: portrait) {
    .content {
        flex-direction: column;
    }
    .title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 4dvh;
        border: none;
        width: 100%;
    }
    .dspacer {
        width: 100%;
        height: 1dvh;
        border-style: solid none solid none;
        border-width: 1px;
        border-color: yellow;
    }
    .overlay {
        font-size: 2dvh;
        color: #df2d2d;
        text-shadow: 1px 1px 10px black;
    }
    .index {
        font-size: 1.2vmax;
    }
    .nav {
        flex-direction: column;
    }
    .filltext {
        display: none;
        visibility: hidden;
    }
    .filltextmobile {
        display: block;
        visibility: visible;
    }
    .spacer {
        height: 1dvh;
    }
    .hspacer {
        height: 0.5dvh;
    }
    .sitemap {
        display: grid;
        font-size: 4dvw;
        width: 100%;
        place-items: stretch;
    }
    .header {
        font-size: 8.6dvh;
        border-top: 1px solid yellow;
    }
    .minitext {
        display: none;
        visibility: hidden;
    }
}