body {
    font-family: "DM Serif Text", serif;
}
.special-text {
    font-family: 'Protest Guerrilla', serif;
}
.text-mask {
    background-image: url("./arphead.png");
    background-size: 120%;
    background-position: 50% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Protest Guerrilla', serif;
    display: inline-block;
    transition: background-position 0.08s linear;
}


#cursorPreview{
    position:fixed;
    width:500px;
    height:500px;
    overflow:hidden;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(6px);
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease;
    z-index:9999;
}

#cursorPreview img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.ribbon{
    overflow:hidden;
    white-space:nowrap;
}

.ribbon-track{
    display:inline-block;
    white-space:nowrap;
    animation: scroll linear infinite;
    font-size:8rem; /* bigger text */
    font-weight:700;
}

.fast .ribbon-track{ animation-duration:16s; }
.medium .ribbon-track{ animation-duration:10s; }
.slow .ribbon-track{ animation-duration:24s; }

@keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}