/*
 * Change the title font here.
 *
 * Examples:
 * --title-font: Impact, "Arial Black", sans-serif;
 * --title-font: "Times New Roman", serif;
 * --title-font: "Comic Sans MS", cursive;
 * --title-font: "Courier New", monospace;
 * --title-font: fantasy;
 */

:root {
    --title-font: Anton, Haettenschweiler, "Arial Black", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

body {
    min-height: 100vh;
    font-family: system-ui, sans-serif;
}

#background {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background: #000;
}

#background img,
#background video {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(1.12);
transition:
opacity 120ms linear,
transform 700ms linear;
background: #000;
}

#background img.active,
#background video.active {
opacity: 1;
transform: scale(1.22);
}

#shade {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.06),
                rgba(0, 0, 0, 0.08) 38%,
                rgba(0, 0, 0, 0.55) 100%
);
}

#diagonal-lines {
position: fixed;
inset: -40%;
z-index: 2;
pointer-events: none;

background:
repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.98) 0px,
                          rgba(0, 0, 0, 0.98) 58px,
                          rgba(0, 0, 0, 0.45) 58px,
                          rgba(0, 0, 0, 0.45) 84px,
                          transparent 84px,
                          transparent 148px
);

animation: diagonalMove 0.9s linear infinite;
}

#content {
position: relative;
z-index: 3;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
text-align: center;
padding: 4vw;
background: transparent;
}

#title-link {
pointer-events: auto;
color: #000;
text-decoration: none;
display: inline-block;
background: transparent;
}

#title {
margin: 0;
padding: 0;
color: #000;
background: transparent;
font-family: var(--title-font);
font-size: clamp(5rem, 18vw, 22rem);
font-weight: 1000;
line-height: 0.78;
letter-spacing: 0.015em;
text-transform: uppercase;
animation: titlePulse 4.2s ease-in-out infinite;

text-shadow:
0.012em 0.012em 0 rgba(255, 255, 255, 0.85),
0.026em 0.026em 0 rgba(255, 255, 255, 0.45),
}

#title .dotworld {
display: block;
font-size: 0.72em;
letter-spacing: 0.025em;
background: transparent;
}

#title-link:hover #title {
animation-duration: 0.1s;
}

#empty-warning {
position: fixed;
inset: 0;
z-index: 10;
display: none;
place-items: center;
color: white;
background: black;
font-family: Arial, sans-serif;
font-size: clamp(1.2rem, 3vw, 3rem);
text-align: center;
padding: 2rem;
}

@keyframes diagonalMove {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(148px, 148px, 0);
    }
}

@keyframes titlePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.055);
    }

    100% {
        transform: scale(1);
    }
}