html {
    background-color: #ff00ff; 
}

body {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff0000);
    background-size: 400% 400%;
    animation: rainbowBackground 10s ease infinite;
    color: #009b00;
    padding: 50px;
}


h1 {
    font-size: 5rem;
    text-shadow: 5px 5px #ff0000, 10px 10px #0000ff;
    text-align: center;
    animation: wobble 0.5s infinite;
}

h2 {
    font-size: 3rem;
    color: #ff69b4; 
    text-shadow: 3px 3px #00ffff;
    text-align: center;
}


p {
    font-size: 1.5rem;
    background: white;
    border: 5px dashed rgb(202, 48, 176);
    padding: 10px;
    transform: rotate(-2deg);
}

p:hover {
    transform: rotate(0.5deg) scale(1.2);
    transition: 0.2s;
}

button {
    background: gold;
    border-radius: 50%;
    padding: 20px;
    font-weight: bold;
    cursor: help;
    border: 10px outset orange;
    align-self: center;
}


img {
    border: 10px ridge lime;
    animation: spin 18s linear infinite;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline wavy red;
    background: black;
    color: white;
}

/* The Animations */
@keyframes rainbowBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes wobble {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    75% { transform: translateX(10px) rotate(5deg); }
    100% { transform: translateX(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.confetti {
    position: fixed;
    top: -10px;
    animation: fall 2s linear infinite;
}

@keyframes fall {
    to { transform: translateY(100vh) rotate(720deg); }
}