body {
    font-family: Helvetica, Arial, sans-serif;
    color: black;
}

input {
    font-size: 150%;
}

h1 {
    font-size: 350%;
}

h2 {
    font-size: 300%;
}

#container {
    margin: 0 auto;
    text-align: center;
}

#footer {
    clear: both;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    text-align: right;
    position: absolute;
}

#output {
    text-align: center;
    animation-name: spin, depth;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

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

@keyframes depth {
    0% { text-shadow: 0 0 black; }
    25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black; }
    50% { text-shadow: 0 0 black; }
    75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black; }
    100% { text-shadow: 0 0 black; }
}