@font-face {
    font-family: "Anybody";
    src: 
        url( "fonts/Anybody.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/Anybody.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/Anybody.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}

@font-face {
    font-family: "BalooDa2";
    src: 
        url( "fonts/BalooDa2.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/BalooDa2.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/BalooDa2.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}

@font-face {
    font-family: "BricolageGrotesque";
    src: 
        url( "fonts/BricolageGrotesque.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/BricolageGrotesque.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/BricolageGrotesque.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}

@font-face {
    font-family: "NationalPark";
    src: 
        url( "fonts/NationalPark.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/NationalPark.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/NationalPark.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
    
    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}

@font-face {
    font-family: "Nunito";
    src: 
        url( "fonts/Nunito.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/Nunito.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/Nunito.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}

@font-face {
    font-family: "Outfit";
    src: 
        url( "fonts/Outfit.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/Outfit.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/Outfit.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    ascent-override: 100%;
    descent-override: 26%;
    line-gap-override: 0;
}

@font-face {
    font-family: "PathwayExtreme";
    src: 
        url( "fonts/PathwayExtreme.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/PathwayExtreme.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/PathwayExtreme.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}

@font-face {
    font-family: "Quicksand";
    src: 
        url( "fonts/Quicksand.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/Quicksand.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/Quicksand.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    /* ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0; */
}


@font-face {
    font-family: "WinkySans";
    src: 
        url( "fonts/WinkySans.woff2" ) format( "woff2 supports variations" ), 
        url( "fonts/WinkySans.woff2" ) format( "woff2" ) tech( "variations" ), 
        url( "fonts/WinkySans.woff2" ) format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0;
}


body {
    background-color: #09303C;
    color: #FFFAEA;
	margin: 0;
	font-family: "BricolageGrotesque";
	color-scheme: dark;
	text-rendering: optimizeSpeed;
	font-size: 1.5em;
}

body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 90%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
        calc(var(--size) * 0.32) / var(--size) var(--size);
    /* mask: linear-gradient(-20deg, transparent 50%, white); */
    mask: radial-gradient( circle at center, white, transparent );
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
}

main {
	position: absolute;
	inset: 0;
	
	display: grid;
	place-items: center;
}

.wrapper {
	position: relative;
	text-align: center;
}

/* Accessability: Motion */
@media ( prefers-reduced-motion: no-preference ) {
	.wrapper {
		animation: fadeIn 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		scale: 0.9;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

h1 {
	font-size: 3em;
	margin: 0;
	font-weight: 500;
}

p {
	color: color-mix( in hsl, #FFF 80%, #09303C );

	margin: 0;
}

.wijzijn {
	color: color-mix( in hsl, #FFF 70%, #09303C );
}

.d {
	color: #FFC300;
}