/* demo purposes */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{
  font-family: 'Press Start 2P', monospace;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  height: 100vh;
  margin: 0;
  background: #aaaccc;
}

.fluid {
  width: 100%;
  box-sizing: border-box;
}

button{
  display: inline-block;
  background: linear-gradient(#09f 50%, #0090f0 50%);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  margin: 5px;
  padding: 30px 50px;
  text-shadow: 3px 3px #000, -3px -3px #000, 0 -3px #000, 0 3px #000, 3px 0 #000, -3px 0 #000;
  box-shadow: inset 0 5px 0px rgba(255,255,255,0.2),
              inset 5px 0px 0px rgba(255,255,255,0.1),
              inset 0 -5px 0px rgba(0,0,0,0.2),
              inset -5px 0px 0px rgba(0,0,0,0.1),
              5px 0px 0px #000,
              -5px 0px 0px #000,
              0px 5px 0px #000,
              0px -5px 0px #000;
}

button:hover {
  text-shadow: 3px 3px #000, -3px -3px #000, 0 -3px #000, 0 3px #000, 3px 0 #000, -3px 0 #000, 4px 4px #000;
  box-shadow: inset 0 5px 0px rgba(255,255,255,0.4),
              inset 5px 0px 0px rgba(255,255,255,0.3),
              inset 0 -5px 0px rgba(0,0,0,0.3),
              inset -5px 0px 0px rgba(0,0,0,0.2),
              5px 0px 0px #000,
              -5px 0px 0px #000,
              0px 5px 0px #000,
              0px -5px 0px #000;
}

button:active {
  text-shadow: 3px 3px #000, -3px -3px #000, 0 -3px #000, 0 3px #000, 3px 0 #000, -3px 0 #000;
  box-shadow: inset 0 -5px 0px rgba(255,255,255,0.4),
              inset -5px 0px 0px rgba(255,255,255,0.3),
              inset 0 5px 0px rgba(0,0,0,0.3),
              inset 5px 0px 0px rgba(0,0,0,0.2),
              5px 0px 0px #000,
              -5px 0px 0px #000,
              0px 5px 0px #000,
              0px -5px 0px #000;
}