Neumorphic style for Retro

neumorpic.css

#window {
  border: none;
  border-radius: 25px;
  background: #e0e0e0;
  box-shadow: inset -12px -12px 24px #ffffff,
              inset 12px 12px 24px #acacac;
  min-width: 810px;
  min-height: 200px;
}

#foreground,
#background {
  font-family: DSEG7 Classic;
  font-size: 128px;
}

overlay {
  padding: 10px 0px;
  border-radius: 20px;
  background: #e0e0e0;
  box-shadow:  12px 12px 20px #bebebe,
              -12px -12px 20px #ffffff;
  margin-right: 40px;
}

#foreground {
  opacity: 1;
  
  color: #222222;
  text-shadow:  3px 3px 6px #bebebe,
              -3px -3px 6px #ffffff9f;
}

#background {
  opacity: 1;
  
  border-radius: 0px;
  color: #2222222f;
  text-shadow: 0px 4px 4px #fff,
               0 0 0 #000, 
               0px 4px 4px #fff;
}

menubutton {
  border-radius: 100%;
  background: #e0e0e0;
  box-shadow: 3px 3px 6px #bebebe,
             -3px -3px 6px #ffffff;
  
  animation-name: neumorphic-button-reverse;
  animation-timing-function: ease-out;
  animation-duration: .05s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  animation-iteration-count: 1;
}

menubutton button {
  background: none;
}

menubutton image {
  color: black;
  
  transition-property: transform;
  transition-duration: .05s;
  transition-timing-function: ease-out;
}

menubutton:active {
  animation-name: neumorphic-button;
}

menubutton:active image {
  transform: scale(0.85);
}

@keyframes neumorphic-button {
  from { 
    box-shadow: 3px 3px 6px #bebebe,
               -3px -3px 6px #ffffff;
  }
  
  50% {
    box-shadow: 0px 0px 0px #bebebe,
             0px 0px 0px #ffffff;
  }
  
  51% {
    box-shadow: inset 0px 0px 0px #bebebe,
                inset 0px 0px 0px #ffffff;
  }
  
  to {
    box-shadow: inset 3px 3px 6px #bebebe,
                inset -3px -3px 6px #ffffff;
  }
}

@keyframes neumorphic-button-reverse {
  to { 
    box-shadow: 3px 3px 6px #bebebe,
               -3px -3px 6px #ffffff;
  }
  
  51% {
    box-shadow: 0px 0px 0px #bebebe,
             0px 0px 0px #ffffff;
  }
  
  50% {
    box-shadow: inset 0px 0px 0px #bebebe,
                inset 0px 0px 0px #ffffff;
  }
  
  from {
    box-shadow: inset 3px 3px 6px #bebebe,
                inset -3px -3px 6px #ffffff;
  }
}