html {
  font-family: 'b3-special';
  color: #555;
  font-size:14px;
}

h2 {font-weight: bold; font-size: 1.3em; margin-top:20px;}
h3 {font-weight: bold; font-size: 1.2em;line-height: 4.3em;}

#container {
  margin: 0 auto;
  height: 100vh;
  width: 100%;
  max-width:640px;
}

#container .row {
  margin: 0 auto;
  width:100%;
  max-width:640px;
}

#container > .row:first-of-type,
#container > .row:last-of-type {
  background-color: #212121;
  max-height:8em;
}
#container > .row:last-of-type {
  max-height:10em;
}

#stage {
  display:grid;
  place-items: center;
  width:100%;
  height:calc(100vh - 13em);
  margin-top:7.25em;
  background:linear-gradient(135deg, #94c11f 30%, #97c6c3 93%);
  overflow-y:hidden;
  position:relative;
}

#stage > img {
	max-width: 200%;
	height: auto;
	/* margin: auto calc(50vw - 540px); */
  margin-top: -15vh;
	opacity: 0.5;
	user-select: none;
	-webkit-user-drag: none;
}

#canvas {
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:100;
  position:absolute;
  left:0;
}

#currT, #currA {
  font-size:1.3em;
  color: #fff;
}

#currT +.badge {
  background-color: #94c11f !important;
  border:2px solid #fff;
}


#prevS {
  font-size: .9em;
  color: #eee;
}

.footer {
  background-color: #94c11f;
  background-color: #212121;
  color: #fff;
}


.error {
  border: 1px solid #f00;
  background-color: yellow;
}




.pbContainer {
  padding-top:.5em;
  width: 7em;
  height: 7em;
  position: relative;
}

.pushbutton {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #090909;
  background-color: transparent;
  background-image: linear-gradient(145deg, #171717, #444245);
  box-sizing: border-box;
  box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pbContainer input {
  display: none;
}

.pushbutton::before {
  position: absolute;
  content: "";
  width: 7.25em;
  height: 7.25em;
  border-radius: inherit;
  background-color: transparent;
  background-image: linear-gradient(145deg, #262626, #606060);
  z-index: -1;
  box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;
}

.pushbutton .icon {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.pushbutton .icon svg {
  height: 100%;
  width: 100%;
  fill: #a5a5a5;
  stroke:#94c11f;
}

.pbContainer  input:checked + .pushbutton {
  box-shadow: inset -2px -2px 0 #5e5e5e,inset 2px 2px 0 #1c1c1c;
  border: 4px solid rgba(148, 193, 31, 0.681);
  animation: pbAnimeBorder 1.3s linear alternate-reverse infinite;
}

.pbContainer input:checked + .pushbutton .icon svg {
  _fill: rgb(77, 124, 255);
  fill: rgb(148, 193, 31);
  animation: pbAnimeFill .75s linear alternate-reverse infinite;
}

@keyframes pbAnimeFill {
  to {
    fill: rgba(148, 193, 31, 0.642);
  }
}

@keyframes pbAnimeBorder {
  to {
    border-color: rgba(148, 193, 31, 0.137);
  }
}

@keyframes playpause {
  from {
    stroke-dashoffset:0;
    stroke: rgba(148, 193, 31, 0.642);
  }
  to {
    transition: 300ms ease-in;
    stroke-dashoffset: 0;
    stroke: rgba(148, 193, 31, 0.137);
  }
}

/* This animates the circle when it switches to play */
#PlayButtonCircle {
  transition: stroke-dashoffset 300ms ease-in;
  stroke-dashoffset: 0;
  fill: none;
  stroke: #a5a5a5;
  stroke-width: 4px;
  box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;
}
#PlayButtonCircle.playing {
  stroke-dashoffset: 314;
  animation: playpause .75s linear alternate-reverse infinite;
}

#PauseLine1,
#PauseLine2 {
  stroke-width:8px;
  stroke:#a5a5a5;
  stroke-linecap: round;
}
#PauseLine2 {
  fill:#a5a5a5;
  stroke-linejoin: round;
}

#PauseLine1.playing,
#PauseLine2.playing {
  stroke: #94c11f;
  fill: #94c11f;
  animation: playpause .75s linear alternate-reverse infinite;
}


@media (max-width: 576px) {
  .container, .container-sm {
    max-width:100%;
    --bs-gutter-x:0;
  }
  html {
    font-size: 12px;
  }
}