@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');

* {
    margin: 0;
    padding: 0;
}

body {
    height: 500vh;
    padding-bottom: 200%;
}

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;
}

canvas {
    /* filter: url(#noiseFilter); */
    background-color: white;
    position: fixed;
    overflow: hidden;
}