body {
    background-color: lime;
    color: purple;
    font-family: Comic Sans MS, cursive;
    text-align: center;
}

h1 {
    background: yellow;
    border: 5px dotted red;
    transform: rotate(-5deg);
    transition: transform 1s, background 1s, color 1s;
}

h1:hover {
    transform: rotate(10deg) scale(1.2);
    background: hotpink;
    color: green;
}

button {
    background: orange;
    border: 3px solid blue;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.5s, background 0.5s;
}

button:hover {
    transform: skewX(20deg);
    background: red;
}

img {
    width: 150px;
    height: 150px;
    transform: rotate(15deg);
    transition: transform 0.7s, border-radius 0.7s, opacity 1s;
}

img:hover {
    transform: rotate(-15deg) scale(1.3);
    border-radius: 50%;
    opacity: 0.5;
}

.container {
    border: 5px double magenta;
    padding: 20px;
    margin: 20px;
    background: cyan;
}

@keyframes rainbowPulse {
    0% {
        background-color: lime;
        color: purple;
    }

    25% {
        background-color: pink;
        color: green;
    }

    50% {
        background-color: orange;
        color: blue;
    }

    75% {
        background-color: yellow;
        color: red;
    }

    100% {
        background-color: lime;
        color: purple;
    }
}


h1 {
    animation: rainbowPulse 4s infinite;
}