body {
  background: black;
  font-family: fantasy;
}

.container {
  text-align: center;  
}

.scene-wrapper {
  width: 800px;
  height: 600px;
  display: inline-block;
  overflow: hidden;
}

.scene {
  opacity: 0;
  background: black;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0; left: 0;
}

.scene .background {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute; top: 0; left: 0;
  z-index: 0;
}

.scene .background img {
  width: 100%;
}

a.button { font-size:1.1em; padding:24px 26px; display:inline-block; margin:5px; border-radius:6px; border:solid rgba(0,0,0,0.2); border-width:1px 1px 5px; box-shadow:0 5px 0 rgba(0,0,0,0.1), inset 0 0 3px rgba(255,255,255,0.3); cursor:pointer; user-select:none; transition:0.4s ease; }

a.button:hover { transform:translateY(-3px); box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); border-bottom-width:8px; }

a.button:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.4); border-bottom-width:2px; transition:0.1s ease; }

.red { background:hsl(8,59%,59%); color:rgba(255,255,255,0.95); text-shadow:-1px -1px 1px rgba(0,0,0,0.1); }
.orange { background:hsl(41,76%,65%); }
.yellow { background:hsl(50,81%,65%); }
.green { background:hsl(104,51%,62%); }
.blue { background:hsl(176,59%,59%); }
