:root {
  --selected_radio: #5d5d5d
}

@font-face {
  font-family: Manrope;
  src: url(../fonts/Manrope-VariableFont_wght.3f499944.ttf) format("truetype")
}

#app {
  font-family: Manrope;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333
}

#app button {
  width: 100px;
  padding: 12px 20px;
  border: 1.5px solid var(--selected_radio);
  margin: 14px 4px;
  border-radius: 24px;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 10pt;
  background-color: #1f1f1f;
  cursor: pointer
}

#app button:disabled,
#app button[disabled] {
  background-color: var(--selected_radio);
  color: #fff
}

#app .play-toggle,
#app .proc-toggle,
#app .proc-toggle:disabled {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  padding: 0;
  color: #e9e4f0
}

#app .procOn {
  background-color: #7e47ff;
  border: 0
}

#app .procOff {
  background-color: #333;
  border-width: 2px;
  border-color: #4a4a4a
}

#app .proc-toggle {
  width: 90px;
  font-size: 8pt;
  height: 40px
}

#app .play-toggle,
#app .proc-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: auto
}

#app .play-toggle {
  --radius: 50px;
  width: var(--radius);
  height: var(--radius);
  border-radius: var(--radius)
}

#app .transport-img {
  scale: 80%
}

#app .blah {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  width: 380px;
  justify-content: center;
  align-items: center;
  font-size: 10pt
}

#app .blah span {
  padding-left: 10px
}

#app .earImg {
  position: relative;
  padding: 5px;
  padding-inline: 13px;
  width: 23px;
  height: 100%;
  border-radius: 100%;
  scale: 90%
}

#app .earImg img {
  scale: 80%
}

#app .earGreen {
  background-color: #33b787
}

#app .earYellow {
  background-color: #ffb800
}

#app .earRed {
  background-color: #f6604b
}

#app .ear-img img {
  scale: 80%;
  transform: translateY(10%)
}

#app .wave-img {
  scale: 70%;
  transform: translate(-10%)
}

#app .btm-buttons {
  position: absolute;
  width: 200px;
  left: 50%;
  transform: translate(-50%)
}

#app .btm-buttons button {
  width: 200px;
  border: 0
}

#app .demo-btn {
  background-color: #333;
  color: #e9e4f0
}

#app .pending {
  position: absolute;
  left: 50%;
  transform: translate(-50%)
}

@-o-viewport {
  width: device-width;
  zoom: 1
}

@viewport {
  width: device-width;
  zoom: 1
}

@media screen and (max-width:720px) {
  #app .pending {
    top: 200px
  }

  #app .persona img,
  #app .playMusic,
  #app .playSpeech,
  #app .procMusic,
  #app .procSpeech {
    top: 100px;
    --radius: 220px;
    position: absolute;
    z-index: 0;
    width: var(--radius);
    height: var(--radius);
    left: calc(50% - var(--radius)/2)
  }

  #app .proc-toggle {
    top: 75px
  }

  #app .play-toggle {
    top: 275px
  }

  #app .blah {
    top: 430px;
    max-width: 300px
  }

  #app .content,
  #app .people {
    position: absolute;
    display: flex;
    left: 50%;
    transform: translate(-50%);
    width: auto
  }

  #app .content {
    top: 340px
  }

  #app .all-loops {
    transform: translate(-50%) translate(-80px)
  }

  #app .all-loops,
  #app .all-movies {
    position: absolute;
    top: 680px;
    left: 50%
  }

  #app .all-movies {
    transform: translate(-50%) translate(80px)
  }

  #app .all-desc {
    position: absolute;
    font-size: 8pt;
    width: 320px;
    top: 645px;
    left: 50%;
    transform: translate(-50%)
  }

  #app .btm-buttons {
    top: 520px
  }
}

@media screen and (min-width:720px) {
  #app button {
    display: block
  }

  #app .pending {
    top: 180px
  }

  #app .persona img,
  #app .playMusic,
  #app .playSpeech,
  #app .procMusic,
  #app .procSpeech {
    top: 70px;
    --radius: 270px;
    position: absolute;
    z-index: 0;
    width: var(--radius);
    height: var(--radius);
    left: calc(50% - var(--radius)/2)
  }

  #app .proc-toggle {
    top: 40px
  }

  #app .play-toggle {
    top: 300px
  }

  #app .blah {
    top: 390px
  }

  #app .people {
    top: 110px;
    transform: translate(-50%) translate(-250px)
  }

  #app .content,
  #app .people {
    position: absolute;
    left: 50%
  }

  #app .content {
    top: 140px;
    transform: translate(-50%) translate(250px)
  }

  #app .all-loops {
    transform: translate(-50%) translate(-80px)
  }

  #app .all-loops,
  #app .all-movies {
    position: absolute;
    top: 630px;
    left: 50%
  }

  #app .all-movies {
    transform: translate(-50%) translate(80px)
  }

  #app .all-desc {
    position: absolute;
    font-size: 8pt;
    width: 320px;
    top: 595px;
    left: 50%;
    transform: translate(-50%)
  }

  #app .btm-buttons {
    top: 470px
  }
}

:root {
  --music_bpm: 100;
  --movie_bpm: 61;
  --music_period_ms: calc(500ms*60/var(--music_bpm));
  --movie_period_ms: calc(500ms*60/var(--movie_bpm))
}

#app .playMusic,
#app .playSpeech,
#app .procMusic,
#app .procSpeech {
  background-color: #7e47ff;
  opacity: .2;
  border-radius: 100%;
  z-index: -100;
  scale: 110%
}

#app .playMusic {
  animation: smallThrob var(--music_period_ms) infinite alternate
}

#app .playSpeech {
  animation: smallThrob var(--movie_period_ms) infinite alternate
}

#app .procMusic {
  animation: bigThrob calc(var(--music_period_ms)/2) infinite alternate
}

#app .procSpeech {
  animation: bigThrob var(--movie_period_ms) infinite alternate
}

@keyframes smallThrob {
  0% {
    -webkit-transform: scale(1)
  }

  to {
    -webkit-transform: scale(1.05)
  }
}

@keyframes bigThrob {
  0% {
    -webkit-transform: scale(1)
  }

  to {
    -webkit-transform: scale(1.15)
  }
}