* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body {
    background: lightgoldenrodyellow;
    margin: 0;
    transition: background .5s
}

body.dark {
    background: rgb(12, 33, 26);
}

.button-container {
    position: fixed;
    top: 10px;
    left: 10px;
}

.container {
     height: 100vh;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
}

.square {
    background: rgb(50, 164, 136);
    width: 100px;
    height: 100px;
    animation: spin 3s linear infinite;
    animation-play-state: paused;
    transition: background .5s;
}

.square.dark {
    background: darkslategray;
}

.square.spin {
    animation-play-state: running;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

.chair {
    width: 200px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
}

.chair.reveal {
    display: block;
}