.shake {
    /* Start the shake animation and make the animation last for 1 second */
    animation: shake 1s;
}

@keyframes shake {
    0% {
        transform: translate(4px, 4px) rotate(0deg);
    }

    10% {
        transform: translate(-4px, -4px) rotate(-1deg);
    }

    20% {
        transform: translate(-7px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(7px, 4px) rotate(0deg);
    }

    40% {
        transform: translate(4px, -4px) rotate(1deg);
    }

    50% {
        transform: translate(-4px, 4px) rotate(-1deg);
    }

    60% {
        transform: translate(-7px, 4px) rotate(0deg);
    }

    70% {
        transform: translate(7px, 4px) rotate(-1deg);
    }

    80% {
        transform: translate(-4px, -4px) rotate(1deg);
    }

    90% {
        transform: translate(4px, 4px) rotate(0deg);
    }

    100% {
        transform: translate(4px, -4px) rotate(-1deg);
    }
}

body {
    background-color: black;
    color: white;
    font-family: 'Roboto Mono', monospace;
}

img {
    padding-left: 2em;
}

button {
    margin-top: 1em;
}

.center {
    text-align: center;
    padding-top: 2em;
}

h1 {
    font-size: 4em;
}

#message {
    font-size: 2em;
    margin-top: 4em;
    margin-left: 2em;
}
