/* @import "https://www.nerdfonts.com/assets/css/webfont.css" */
/* curl -L https://www.nerdfonts.com/assets/css/webfont.css | css-beautify > ./webfont.css */
/* magick assets/photo-1564186763535-ebb21ef5277f.jpg -colorspace Gray -contrast-stretch 2%x2% -ordered-dither h8x8a halftone.webp */
/* curl -L https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/build/three.module.js -o three/three.module.js */

@import url(styles/font.css);

:root {
    --highlight: #ED1C24;
    --background: #120F10;
    --foreground: #FAFAF7;
    --plate-cyan: #00E5FF;
    --plate-key: var(--background);
    --plate-yellow: #FFEB00;
    --misprint: -0.005em;
}

.symbol {
    font-family: 'SymbolsNerdFont';
}

.symbol-mono {
    font-family: 'SymbolsNerdFontMono';
}

.header {
    position: relative;
    height: 500px;
    overflow: hidden;
    filter: none;
}

.header::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    background: radial-gradient(circle at center, var(--plate-key), var(--foreground));
    background-size: 0.25em 0.25em;
    transform: rotate(20deg);
}

.header img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(2000%) url(#duotone);
}

.header h1 {
    color: var(--highlight);
    position: absolute;
    font-size: 6rem;
    font-family: "HalftoneJo";
    font-weight: 500;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3.5deg);
    z-index: 3;
    margin: 0.35em;
}

/* chromatic misregistration plates; needs <h1 data-text="Title">Title</h1> */
.header h1::before,
.header h1::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    mix-blend-mode: screen;
}

/* cyan */
.header h1::before {
    color: var(--plate-cyan);
    transform: translate(var(--misprint), calc(var(--misprint) * 0.67));
}

/* yellow */
.header h1::after {
    color: var(--plate-yellow);
    transform: translate(calc(var(--misprint) * -1), calc(var(--misprint) * -0.67));
}

::selection {
    background-color: var(--highlight);
    color: var(--foreground);
}

b {
    font-weight: bolder;
}

body {
    background-color: var(--background);
    color: var(--foreground);
}

i {
    font-style: normal;
}

mark {
    background-color: var(--highlight);
    color: var(--foreground);
}

mark::selection {
    background-color: var(--foreground);
    color: var(--highlight);
}

p {
    font-family: 'Fira Sans', sans-serif;
}