:root {
    --pxl-font-main: "DM Sans";
}

#clone>.c-container {
    transform: translateY(5px);
}

#main>.c-container {
    transition: transform .2s ease;
}
#main:hover>.c-container {
    transform: translateY(2px);
}

@keyframes bouncey {
    0% { margin-top: 10px; }
    50% { margin-top: 0px; }
    100% { margin-top: 10px; }
}
@keyframes bouncex {
    0% { margin-left: -5px; }
    50% { margin-left: 5px; }
    100% { margin-left: -5px; }
}

#main, #clone {
    animation-delay: -1.5s, 0s;
}
#clone {
    animation-delay: -1.5s, -.4s;
}


.toybox-wordmark::after {
    content: "!";
    font-style: italic;
}

@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.toybox-wordmark { 
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    background-clip: text;
    color: transparent;
    filter: brightness(.8);

    animation: rainbow 18s ease infinite;
}