/* Animations */
@keyframes ferris-move {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

/* Elements */
body {
    align-items: center;
    justify-content: center;
}
h1 {
    font-size: 3.5rem;
    color: var(--color-header);
}
p {
    font-size: 1.15rem;
}
button {
    background: none;
    color: white;

    border: var(--border-button-normal);
    border-radius: var(--radius-button);

    width: 100%;

    transition-duration: 250ms;
}
button:hover {
    background: var(--color-button-hover-background);

    border: var(--border-button-hover);
    border-radius: var(--radius-button);

    cursor: pointer;
}
img {
    margin-bottom: 50px;
}

/* Classes */
.color-red {
    color: rgb(255, 50, 50);
}
.spacer {
    height: 100%;
}

/* Objects */
#ferris {
    user-select: none;

    width: 75%;
    margin-left: 12.5%;

    animation: ferris-move 6s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}