#scroll-to-top {
    position: fixed;
    background: var(--bg-color-1);
    box-shadow: 0 5px 30px -10px black;
    bottom: 1rem;
    right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 200ms;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6rem);
}

@media only screen and (min-width: 600px) {
    #scroll-to-top {
        right: inherit;
        left: calc(50% + 300px - 4.5rem);
    }
}

#scroll-to-top.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

#scroll-to-top:active {
    transition: none;
    transform: scale(1.25);
    background: var(--bg-color-2);
}

#scroll-to-top::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--fg-color-2);
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%) rotate(-45deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 80% 20%, 0% 20%);
}