@font-face {
    font-family: Asbestos;
    src: url('res/Asbestos.ttf') format('truetype');
}

:root {
    --bg: #111;
    --bg2: #222;
    --fg: #fff;
    --theme: #b22;

    --text-width: min(800px, 90%);

    --pixel-rounded: polygon(0px calc(100% - 20px),
            4px calc(100% - 20px),
            4px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 4px),
            20px calc(100% - 4px),
            20px 100%,
            calc(100% - 20px) 100%,
            calc(100% - 20px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 20px),
            100% calc(100% - 20px),
            100% 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 0px,
            20px 0px,
            20px 4px,
            12px 4px,
            12px 8px,
            8px 8px,
            8px 12px,
            4px 12px,
            4px 20px,
            0px 20px);
}

* {
    box-sizing: border-box;
    font-weight: normal;
    margin: 0;
    border: none;
    outline: none;
}

*::selection {
    background-color: var(--theme);
    color: #000;
}

body {
    font-family: Asbestos, sans-serif;
    color: var(--fg);
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 100dvh;

    --dither-start: calc(((100% - var(--text-width)) / 2) / 2 - var(--dither-width) / 2);
    --dither-width: 126px;
    background: linear-gradient(90deg,
            black var(--dither-start),
            var(--theme) var(--dither-start),
            var(--theme) calc(100% - var(--dither-start)),
            black calc(100% - var(--dither-start)));
}

/* dither effect */

body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    z-index: -2;
    width: var(--dither-width);
    height: 100dvh;
    pointer-events: none;
    background-image: url('res/dither.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: right;
    image-rendering: pixelated;
}

body::before {
    left: calc(var(--dither-start) - 5px);
}

body::after {
    right: calc(var(--dither-start) - 5px);
    transform: scaleX(-1);
}

.panel {
    clip-path: var(--pixel-rounded);
    background-color: var(--bg);
    padding: 30px;
    width: var(--text-width);
}

.title {
    font-size: 4em;
    --px: 5px;
    text-shadow: var(--px) 0px 0px #000,
        0px var(--px) 0px #000,
        var(--px) var(--px) 0px #000;
    user-select: none;
}

.hidden {
    display: none !important;
}

.flex {
    display: flex;
    flex-direction: inherit;
    gap: 20px;
    align-items: center;
}

.col {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}