* {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    font-size: 16px;
}

h1 {
    text-align: center;
    font-size: 32px;
}

.shake:not(:has([style^="animation-delay"])),
.shake > [style^="animation-delay"] {
    position: relative;
    animation: shake 0.15s linear 0s infinite none;
    --parts: 4;
}

.sway:not(:has([style^="animation-delay"])),
.sway > [style^="animation-delay"] {
    position: relative;
    animation: shake 0.9s linear 0s infinite none;
    --parts: 20;
}

.rainbow:not(:has([style^="animation-delay"])),
.rainbow > [style^="animation-delay"] {
    animation: rainbow_text 3s linear 0s infinite none;
    color: hsl(0, 100%, 50%);
    --parts: 10;
}

/*
body *:hover {
    background-color: rgb(199, 199, 255);
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgb(138, 189, 202);
    position: relative;
    animation: shake 0.1s ease 0s infinite none;
}
body * *:hover {
    outline-color: rgb(87, 123, 132);
}
body * * *:hover {
    outline-color: rgb(24, 32, 34);
}
*/

@keyframes rainbow_text {
    0% {
        color: hsl(0, 100%, 50%);
    }
    12.5% {
        color: hsl(45, 100%, 50%);
    }
    25% {
        color: hsl(90, 100%, 50%);
    }
    37.5% {
        color: hsl(135, 100%, 50%);
    }
    50% {
        color: hsl(180, 100%, 50%);
    }
    62.5% {
        color: hsl(225, 100%, 50%);
    }
    75% {
        color: hsl(270, 100%, 50%);
    }
    87.5% {
        color: hsl(315, 100%, 50%);
    }
    100% {
        color: hsl(360, 100%, 50%);
    }
}

@keyframes shake {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: 1px;
        top: 0px;
    }
    50% {
        left: 1px;
        top: 1px;
    }
    75% {
        left: 0px;
        top: 1px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
}