.sound-control {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  margin: auto var(--size-2) var(--size-2) 0;
  transform: scale(var(--scape-ratio));
  transform-origin: center bottom;
}
.sound-control .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sound-control .btn svg {
      position: absolute;
      transition: all var(--speed);
}
.sound-control .btn svg:nth-child(1) {
        opacity: 0;
}
.sound-control .btn svg:nth-child(2) {
        opacity: 1;
}
.sound-control .btn.playing svg:nth-child(1) {
          opacity: 1;
}
.sound-control .btn.playing svg:nth-child(2) {
          opacity: 0;
}
.sound-control.inset {
    right: var(--size-2);
    bottom: calc(50% + var(--legend-height) / 2 + var(--size-2) - var(--100vw) / 6);
    margin: 0;
    transform-origin: right bottom;
}
.sound-control.inset .btn {
      background-color: var(--gray-800);
      border-color: var(--gray-900);
}
.sound-control.inset svg {
      color: white;
}
@media (min-width: 648px) {
.sound-control.inset {
      right: calc(var(--100vw) / 2 - var(--scape-max-width) / 2 + var(--size-2));
      bottom: calc(50% + var(--legend-height) / 2 - var(--scape-max-width) / 6 + var(--size-2))
}
}
.sound-control.inset.simple {
      bottom: calc(50% + var(--size-2) - var(--100vw) / 6) !important;
}
@media (min-width: 648px) {
.sound-control.inset.simple {
        bottom: calc(50% - var(--scape-max-width) / 6 + var(--size-2)) !important
}
}

:root {

  /* Gray Tones - stolen from Tailwind */
  --gray-100:             #F3F4F6;
  --gray-200:             #E5E7EB;
  --gray-300:             #D1D5DB;
  --gray-400a:            #99A1AD;
  --gray-400:             #9CA3AF;
  --gray-500:             #6B7280;
  --gray-600:             #535967;
  --gray-600b:            #3e3b4c;
  --gray-700:             #374151;
  --gray-800:             #232B37;
  --gray-900:             #16191E;
  --gray-900b:            #090c10;

  /* Base Set */
  --white:                #FFFFFF;
  --gray:                 var(--gray-400);
  --black:                #000000;

  /* Primary Colors */
  --primary:              #FF04B4;
  --primary-dark:         #1D1B28;
  --contrast:             #0062F9;

  --100vw: calc(1vw * 100);

  --100vw: calc(var(--vw, 1vw) * 100);
  --100vh: calc(1vh * 100);
  --100vh: calc(var(--vh, 1vh) * 100);

  --border-radius:        4px;
  --border-color:           var(--gray-700);
  --border-color-dark:      var(--primary-dark);
  --border-color-light:     var(--gray-300);
  --border:                 1px solid var(--border-color);
  --border-dark:            1px solid var(--border-color-dark);

  --spacer:               1rem;
  --size-0:               0.125rem;
  --size-1:               0.25rem;
  --size-2:               0.5rem;
  --size-3:               1rem;
  --size-4:               1.5rem;
  --size-5:               2rem;
  --size-6:               3rem;
  --size-7:               5rem;
  --size-8:               8rem;
  --size-9:               12rem;

  --legend-height:        2.5rem;

  --speed:                .5s;
  --speed-slow:           2s;

  --scape-max-width: 648px;

  /*
  * ============ FONTS ============
  */
  --font-family-title:        'Space Mono', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-body:         Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-serif:        Vollkorn, serif;

  --font-size-xs:             .409rem;
  --font-size-sm:             .6875rem;
  --font-size-base:           .8125rem;
  --font-size-md:             1rem;
  --font-size-lg:             1.25rem;
  --font-size-xl:             1.5rem;
  --font-size-xxl:            2rem;
  --font-size-xxxl:           3.2rem;

  --font-weight-base:         400;
  --font-weight-bold:         700;

  --letter-spacing-sm:        0.05em;
  --letter-spacing-lg:        0.2em;
  --line-height-heading:      1.3;
  --line-height-flow:         1.5;
  --line-height-serif-flow:   1.8;

  --text-light:               var(--gray);
}
.btn {
  width: 2.5rem;
  width: var(--legend-height);
  height: 2.5rem;
  height: var(--legend-height);
  font-family: Space Mono, monospace;
  padding: 0;
  font-weight: bold;
  cursor: pointer;
  transition: all .5s;
  transition: all var(--speed);

  border: 1px solid #374151;

  border: var(--border);
  border-color: #6B7280;
  border-color: var(--gray-500);
  border-radius: 4px;
  border-radius: var(--border-radius);
  background: #F3F4F6;
  background: var(--gray-100);
  color: #232B37;
  color: var(--gray-800);
}
.btn.active {
    border-color: #374151;
    border-color: var(--gray-700);
    background: #232B37;
    background: var(--gray-800);
    color: #F3F4F6;
    color: var(--gray-100);
  }
.btn[disabled]:not([disabled=false]) {
    opacity: 0.5;
    pointer-events: none;
  }
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* CHILDREN */
.btn svg {
    position: absolute;
    width: 1.5rem;
    width: var(--size-4);
    height: 1.5rem;
    height: var(--size-4);
    transition: all .5s;
    transition: all var(--speed);
  }
.btn:hover svg {
      transform: scale(1.1);
    }
body {
  margin: 0;
  color: white;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-style: normal;
}
#app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: calc(1vw * 100);
  width: var(--100vw);
  height: calc(1vh * 100);
  height: var(--100vh);
}
* {
  box-sizing: border-box;
}