* {
  box-sizing: border-box;
}

body {
  background-color:rgb(194, 223, 152);
  transition: background-color .3s;
}

body.dark {
  background-color:rgb(71, 81, 56);
}

.flex {
  display:flex;
  height:100vh;
  width:100%;
  justify-content:space-evenly;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
}

.box {
  height:100px;
  width:100px;
  background-color:darkkhaki;
  transition: background-color .3s, box-shadow .3s;

  animation: spin 5s linear infinite;
  animation-play-state:paused;
}

.box.dark {
  background-color:darkolivegreen;
}

.box.glow {
  background-color:#ffff9f;
  box-shadow: 0 0 10px 5px #ffff9f;
}

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

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

  100% {
    transform:rotate(360deg);
  }
}

.chair {
  width:200px;
  position:fixed;
  bottom:10px;
  right:10px;
  opacity:0;
  transition:opacity .3s;
}

.draggable {
  cursor:grab;
}