*{
    box-sizing:border-box;
}

img{
    max-width: 100%;
}

body{
    margin:0;
    background:slategray;
    transition:background .3s;
}

body.dark{
    background:rgb(30, 33, 36);
}

.buttons{
    position:fixed;
    top:10px;
    left:10px;
}

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

.box{
    width:100px;
    height:100px;
    background:lightblue;
    transition:background .3s;
    animation:spin 5s linear infinite;
    animation-play-state: paused;
}

.box.dark{
    background:rgb(44, 74, 108);
}

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

@keyframes spin{
    0%{
        rotate:0deg;
    }

    100%{
        rotate:360deg;
    }
}

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

.reveal{
    display:block;
}