*{
    box-sizing:border-box;
}

body {
    background:lightsteelblue;
}

.dark {
    background-color:rgb(46, 84, 116);
    transition: background-color .3s;
}

.menu {
  background: lightblue;
  font-size: 150%;
  font-family:cursive;
  position:fixed;
  top:0;
  right:-300px;
  height:100vh;
  width:300px;
  padding:20px;
  text-align:center;

  opacity:0;
  transition: opacity .3s, 
              right .3s, 
              background-color .3s;

}

.active {
    right:0px;
    opacity:1;
}

.gear {
    background-color:lightblue;
    height:100px;
    width: 100px;
    position:fixed;
    bottom:30px;
    left:30px;
    transition:rotate .3s, 
               background-color .3s;
}

.spin {
    rotate:180deg;
}

.glow {
    background-color:rgb(255, 254, 193);
}