:root{
  --button-color-main: #42B2BD;
  --button-color-main-pressed: #3798A2;
  --button-color-highlight: #95CCD5;
  --button-color-shadow: #336d71;
  --button-color-drop-shadow: #16292b80;
}

button{
  position:relative;
  display:inline-block;
  margin:1em;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 1em;
}


button>span {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color:white;
  font-weight:bold;
  font-size:1.5em;
  text-align: center;
  text-decoration:none;
  background-color:var(--button-color-main);

  position:relative;
  padding:0 0.5em;

  text-shadow: 0 0.075em 0 #000;
  filter: dropshadow(color=#000, offx=0, offy=0.075em);
  box-shadow:inset 0 0.075em 0 var(--button-color-highlight), 0 0.5em 0 var(--button-color-shadow);
  border-radius: var(--rounded-border);
}

button>span>span {
  pointer-events:none;
}

button>span:active{
  top:0.5em;
  background-color:var(--button-color-main-pressed);
  box-shadow:inset 0 0.075em 0 var(--button-color-highlight), inset 0 -0.2em 0 var(--button-color-shadow);
}

button:after{
  content:"";
  height:100%;
  width:100%;
  padding:0.25em;
  position: absolute;
  bottom:-1em;
  left:-0.25em;
  background-color:var(--button-color-drop-shadow);
  border-radius: var(--rounded-border);
}


button>span:hover:not(:active){
  top:0.05em;
  background-color:var(--button-color-main-pressed);
  box-shadow:inset 0 0.035em 0 var(--button-color-highlight), 0 0.45em 0 var(--button-color-shadow);
}

.production-ready-overlay button {
  height: 100%;
}