@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap&family=Space+Grotesk:wght@300&display=swap&family=Trispace:wght@300&display=swap&family=Space+Mono&display=swap&family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
}


body {
    /* height: 1000vh; */
}

a {
    color: inherit;
    text-decoration: inherit;
}

space {
    display: block;
    height: 500vh;
}

headline {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: visible;

    word-wrap: normal;

    font-size: 10vw;
    font-family: 'Fraunces';
    white-space: nowrap;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    mix-blend-mode: difference;
    color: white;

    transform: translate(-50%, -50.0%)
}

canvas {
    z-index: -1;
    position: fixed;
    background-color: white;
    overflow: hidden;
}

footer {
    font-family: 'Fraunces';
    mix-blend-mode: difference;
    background-color: #000;
    color: white;
    margin-top: 4em;
    padding: 4em 4em;
    font-size: 4em;
    left: 0;
    right: 0;
    bottom: 0;
}

footer right,
headline-box right {
    float: right;
}

footer brand {
    color: white;
}