/* Raibow gradient thingy */
.rainbow {
    background-size: 300vw 300vw;
    text-align: -webkit-center;
    background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, #0f0 14.28%, #0ff 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);

    -webkit-animation: 'slide' 10s infinite linear forwards;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

@keyframes slide {
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: 300vw;
    }
}

/* Bouncing text */
.bounce-text {
    display: inline;
    gap: 5px;
}

.bounce-text span {
    display: inline-block;
    animation: bounce 0.6s infinite ease-in-out;
}

.bounce-text span:nth-child(1) {
    animation-delay: 0s;
}

.bounce-text span:nth-child(2) {
    animation-delay: 0.1s;
}

.bounce-text span:nth-child(3) {
    animation-delay: 0.2s;
}

.bounce-text span:nth-child(4) {
    animation-delay: 0.3s;
}

.bounce-text span:nth-child(5) {
    animation-delay: 0.4s;
}

.bounce-text span:nth-child(6) {
    animation-delay: 0.5s;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.shake {
    padding: 4px;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(0deg);
    }
}

/* Test stuffs!! */
a {
    color: #49f6ff;
}

b {
    color: #ff00e6;
}

.old {
    color: #49f6ff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: hotpink;

    font-family: "daydream";
}

ul {
    text-align: left;
    list-style: url(' https://blinkie-net.neocities.org/pixels/273.gif ');
}