:root {
    --color-white: #ffffff;
    --color-black: #000000;
}

#animation-wrapper *{
    margin:0;
    padding:0;
    box-sizing:border-box;

    color: inherit;
}

#animation-wrapper{
    width:100vw;
    height:80vh;
    display:flex;
    justify-content:center;
    align-items:center;

    background:var(--color-black);
    color: var(--color-white);

    overflow:hidden;

    font-family: var(--inter-regular);

    transition:
        background-color 1.2s ease,
        color 1.2s ease;

    & span {
        color: inherit;
    }

}

#animation-wrapper .word{
    display:flex;
    align-items:center;
    cursor:default;
}

#animation-wrapper .word span{

    font-size:8vw;

    font-variation-settings:"wght" 100;

    display:inline-block;

    transform-origin:center center;

    transition:
        font-variation-settings .15s linear,
        transform .15s linear;
}

#animation-wrapper .space{
    width:.4em;
}