* {
    box-sizing:border-box;
}

img{
    max-width:100%;
}

body {
    background:rgb(160, 112, 154);
    margin:0;
    transition:background .3s;
}

body.dark {
    background:rgb(85, 53, 83);
}

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

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

.box {
    width:100px;
    height:100px;
    background:rgb(251, 155, 236);
    transition:background .3s;
    animation: spin 5s linear infinite;
    animation-play-state:paused;
}

.box.dark {
    background:rgb(184, 36, 157);   
}

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

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

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

.cat.reveal {
    display:block;
}