html {
    color-scheme: dark;
}

body {
    --darkness: 80%;
    --darkness2: 90%;
    --accent: #4e54c8;
    background: linear-gradient(color-mix(in srgb, #8f94fb, #000 var(--darkness)), color-mix(in srgb, var(--accent), #000 var(--darkness2)));
    min-height: 100vh;
    padding: 5px;
    padding-bottom: 5vh;
    box-sizing: border-box;
}
body.error-page {
    --error: #c82222;
    --darkness: 90%;
    --darkness2: 20%;
    background: linear-gradient(color-mix(in srgb, var(--error), #000 var(--darkness)), color-mix(in srgb, var(--error), #000 var(--darkness2)));
}

body.YEEEE {
    --yeeee: rgb(0, 0, 255);
    background: linear-gradient(color-mix(in srgb, var(--yeeee), #000 var(--darkness)), color-mix(in srgb, var(--yeeee), #000 var(--darkness2)));
}

body.YEEEE #main-title {
    color: var(--yeeee);
}

html, body {
    margin: 0;
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "ROND" 100;
    user-select: none;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(#0000, #0006);
    pointer-events: none;
}
.bg-wrapper {
    position: fixed;
    inset: 0;
    /* width: 100vw; */
    /* height: 100vh; */
    /* font-size: 1vw; */
    overflow: hidden;
    contain: paint;
    z-index: -10;
}

.gorgeous-bg {
    position: absolute;
    inset: -25%;
    will-change: transform;
    transform: translate(calc(var(--offset-x) * 1%), calc(var(--offset-y) * 1%));
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    /* font-family: 'Courier New', Courier, monospace; */
    font-family: "Bytesized", monospace;
    text-shadow: 0 0 20px #fff4;
    color: #fff4;
}
.gorgeous-bg > span {
    position: absolute;
    left: calc(round(var(--left) / 1.5 + 12.5%, 1ch));
    top: calc(round(var(--top) / 1.5 + 12.5%, 1lh));
}
.gorgeous-bg.bigger {
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "ROND" 100;
    font-size: 4em;
    color: #fffc;
    text-shadow: 0 0 20px #fff;
    z-index: 10;
    transform: translate(calc(var(--offset-x) * 2%), calc(var(--offset-y) * 2%));
}

.central-panel {
    margin-top: calc((100vh / 3 - 5em) / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.central-panel > h1 {
    margin: 0;
    margin-bottom: 1lh;
    font-weight: 800;
    font-size: 5em;
}
.central-panel > h1#main-title:before {
    content: "cxrk.gq";
    position: absolute;
    color: #999;
    z-index: -1;
}

::selection {
    color: #000;
    background: #fff;
}

.cli-group {
    margin: 4lh auto;
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    background: color-mix(in srgb, #000 90%, var(--accent));
}
.cli-group.projects {
    grid-template-columns: repeat(2, 1fr);
}
.cli-group span:first-child {
    grid-column: 1 / -1;
    background: #fffe;
    color: #000;
    user-select: none;
}
.cli-group > * {
    padding: 0 1ch;
}
.cli-group.projects a {
    padding-bottom: 1lh;
}
.cli-group a {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    max-width: 400px;
}
.cli-group a:after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    right: 100%;
    transition: right 0.2s ease-out;
    box-shadow: inset 0 0 1ch color-mix(in srgb, #0006 90%, var(--accent));
    backdrop-filter: invert(1) grayscale(1);
}
.cli-group a:hover:after {
    right: 0;
}
.cli-group a > svg, .cli-group a > img, .cli-group a > .icon {
    float: left;
    height: 2lh;
    aspect-ratio: 1 / 1;
    padding: 0.25lh 0;
    padding-right: 1ch;
    box-sizing: border-box;
}

.cli-group a > .icon {
    height: calc(4lh / 3);
    font-size: 1.5em;
    padding: calc(0.5lh / 3) 0 !important;
    padding-right: calc(2ch / 3) !important;
    font-weight: 900;
    padding: 0;
}

.cli-group a::before {
    content: "";
    position: absolute;
    opacity: 0.1;
    background-image: var(--icon);
    background-size: 32px;
    inset: 0;
    box-shadow: inset 0 0 1ch color-mix(in srgb, #000 90%, var(--accent));
    pointer-events: none;
}

@media (min-width: 1500px) {
    .cli-group.socials {
        position: fixed;
        right: 0;
        bottom: 0;
        margin: 0;
    }
}

video#shrek {
    position: fixed;
    z-index: -10;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

video.playing {
    opacity: 1 !important;
    transition: opacity 10s ease-in-out;
}