@font-face { font-family: sf-mono-semibold; src: url(src/fonts/sf-mono/semibold.otf); }
@font-face { font-family: sf-mono-regular; src: url(src/fonts/sf-mono/regular.otf); }
@font-face { font-family: sf-mono-light; src: url(src/fonts/sf-mono/light.otf); }

@font-face { font-family: cal-sans; src: url(src/fonts/cal-sans.ttf); }
@font-face { font-family: lexend-exa; src: url(src/fonts/lexend-exa.ttf); }

* { font-family: lexend-exa; color: #ffffffA0; }

body { max-width: 100vw; max-height: 100vh; overflow: hidden; margin: 0; background: #000; }
canvas { max-width: 100vw; max-height: 100vh; position: fixed; top: 0; left: 0; }
video { position: fixed; opacity: 0; pointer-events: none; }

#vignette
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-image: radial-gradient(transparent 30%, #000 100%);
	pointer-events: none;
    opacity: 0;
}

.fullscreen
{
    display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
    pointer-events: none;
}
.fullscreen > h1
{
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    color: #fff;
    text-shadow: #000 0 0 1em, #000 0 0 3em, #000 0 0 .5em;
    background: radial-gradient(#00000080 0%, transparent 70%);
    font-size: min(10vw, 5em);
    width: 100vw;
    text-align: center;
    padding-top: 30vh;
    padding-bottom: 30vh;
    margin: 0;
}
.fullscreen > h4
{
    position: fixed;
    left: 50%;
    top: 75%;
    translate: -50% -50%;
    color: #fff;
    text-shadow: #000 0 0 1em, #000 0 0 3em, #000 0 0 2em, #000 0 0 4em;
    width: 100vw;
    text-align: center;
    margin: 0;
    font-weight: 300;
}

#open-screen > h4
{
    top: 100%;
    translate: -50% -300%;
    opacity: .5;
}
#scroll-screen > h4
{
    top: 100%;
    translate: -50% -300%;
    opacity: 0;

    transition: opacity 6s ease-in-out;
}

#grid
{
    background: #0E0E14FF;

    translate: 0 -200%;
    transition: translate 400ms ease-in;
}
#grid > div
{
    background-image: url(src/icons/grid-pattern.png);
    background-size: 32px 32px;
    image-rendering: pixelated;

    translate: 0 100%;
    transition: translate 400ms ease-in;

	position: relative;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

#loading
{
    mask: url(src/icons/outline.jpg) luminance 20%;
    mask-size: auto;
    mask-size: auto;
    width: 225px;
    height: 225px;
    mask-size: cover;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    background: radial-gradient(#5360F7 25%, #0000 75%);
    background-repeat: repeat;
    background-size: auto;
    background-size: cover;
    background-repeat: no-repeat;
    animation-name: loadGlow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    z-index: 200;
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    pointer-events: none;
}
@keyframes loadGlow
{
    0% {background-position: 0 64px;}
    25% {background-position: 64px 0;}
    50% {background-position: 0 -64px;}
    75% {background-position: -64px 0;}
    100% {background-position: 0 64px;}
}

#hidden-links
{
    position: fixed;
    width: 100vw;
    translate: -100vw;
}