html {
  color: white;
  background: #0288d1 url("spirals.png");
  scroll-behavior: smooth;
}
body {
  position: relative;
  margin: 0 8px;
  padding: 0 10px 20px;
}
html,
button,
select,
input {
  font-family: "Marcellus", serif;
  font-size: 16px;
}
input,
select {
  background-color: white;
}
h1 {
  display: inline-block;
  margin: 10px 0 20px 10px;
  min-width: 350px;
}
h1 > small {
  font-size: 18px;
  color: #c6d9f0;
  margin-left: 8px;
}
h2 {
  margin-bottom: 4px;
}
h2 > small {
  font-size: 15px;
  font-weight: normal;
  color: #c6d9f0;
  margin-left: 10px;
}
h3 {
  margin-top: 40px;
}
p {
  color: #c6d9f0;
}
a {
  color: #c6d9f0;
  transition: color 0.5s 0.05s;
  &:hover {
    color: white;
  }
}
select {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
}
input,
select {
  padding: 4px 5px;
}
.footer {
  margin: 20px 0 20px 20px;
  color: #c6d9f0;
  transition: color 0.5s;
  > p {
    color: white;
    > a {
      color: #ffb74d;
    }
  }
}

#header {
  position: sticky !important;
  top: 0;
  min-height: 70px;
  transition: min-height 0.3s 0.2s;
  overflow: hidden;
  background: #0288d1 url("spirals.png");
  border-bottom: 1px solid #c6d9f0;
  padding-top: 5px;
  z-index: 100;
  a:hover {
    color: #ffb74d;
  }
  .nav {
    position: absolute;
    bottom: -20px;
    left: 10px;
    transition: bottom 0.4s 0.5s;
    white-space: nowrap;
    > div {
      display: inline-block;
    }
    > a {
      margin-right: 10px;
      text-decoration: none;
      &:hover {
        color: #ffb74d;
      }
    }
  }
  &.w-nav {
    position: relative;
    &:hover {
      min-height: 80px;
      .nav {
        bottom: 2px;
      }
    }
    #scale {
      display: inline-block;
    }
    #stop,
    #remain {
      transform: translateY(-80px);
    }
  }
}

:target {
  scroll-margin-top: 100px;
}
.fs {
  position: relative;
  border-left: 3px solid #c6d9f0;
  margin: 0 0 50px;
  padding: 0 0 5px 20px;
}
#delta {
  border-left-color: #5c6bc0;
}
#theta {
  border-left-color: #26a69a;
}
#alpha {
  border-left-color: #66bb6a;
}
#beta {
  border-left-color: #ffa726;
}
#gamma {
  border-left-color: #ef5350;
}
#custom {
  border-left-color: #ffb74d;
}

button {
  text-align: left;
  padding: 6px 15px 6px 0;
  margin: 6px 6px 6px 0;
  border-radius: 10px;
  cursor: pointer;
  background-color: #c6d9f0;
  transition: background-color 0.5s 0.05s;
  border-width: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  > span {
    background-color: white;
    padding: 6px 10px 6px 15px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 8px;
    transition:
      background-color 0.5s 0.05s,
      color 0.5s 0.05s;
  }
}
button:hover {
  background-color: white;
  > span {
    background-color: black;
    color: white;
  }
}
button.active {
  background-color: #707070;
  color: white;
  > span {
    background-color: black;
    color: white;
  }
}

#stop {
  position: absolute;
  top: 15px;
  left: calc(50% - 50px);
  padding: 10px 15px;
  text-align: center;
  font-size: 20px;
  background-color: #b71c1c;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform 0.5s,
    background-color 0.5s;
  &:hover {
    background-color: #e53935;
  }
  > div {
    display: inline-block;
    background-color: white;
    height: 16px;
    width: 16px;
    margin-right: 10px;
  }
}
/* the duration select and the countdown share the top right corner:
   pick one to show, depending on whether a session is running */
#duration {
  transition: transform 0.5s;
}
#header:not(.w-nav) #duration {
  transform: translateY(-80px);
}
#remain {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 20px;
  transition: transform 0.5s;
}
#progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 14px;
  width: 0;
  background-color: white;
  opacity: 0.3;
  border-radius: 1px;
}
#scale {
  display: none;
  margin-left: 20px;
  position: relative;
  top: -3px;
  color: #ffb74d;
  > a {
    text-decoration: none;
  }
}

.headphones {
  margin: 20px 0 30px 10px;
  padding: 10px 16px;
  border: 1px solid #c6d9f0;
  border-radius: 10px;
  background-color: #ffffff1a;
  color: white;
  max-width: 640px;
}

/* sliders for the custom beat */
.knobs {
  max-width: 640px;
}
.knob {
  margin: 14px 0;
  > label {
    display: block;
    margin-bottom: 2px;
    color: #c6d9f0;
    > b {
      color: white;
      font-weight: normal;
    }
  }
  > input[type="range"] {
    width: 100%;
    max-width: 420px;
    padding: 0;
    background: none;
    accent-color: #ffb74d;
    cursor: pointer;
  }
}
.knob select {
  position: static;
}
#beatBand {
  font-style: italic;
}
.play {
  padding-left: 15px;
  &:hover {
    background-color: #a5d6a7;
  }
  > div {
    position: relative;
    top: 2px;
    display: inline-block;
    margin-right: 4px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid black;
  }
}
.benefits {
  margin: 120px 10px 20px 20px;
  li {
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 21px;
    margin: 10px 120px 6px 10px;
    min-width: 0;
  }
  #remain {
    top: 16px;
    font-size: 16px;
  }
  #scale {
    display: none !important;
  }
  #header.w-nav,
  #header.w-nav:hover {
    min-height: 70px;
  }
  /* the nav is hover-revealed on desktop and there is no hover on touch,
     so put it in the flow instead: always visible, scrolls sideways. */
  #header.w-nav .nav,
  #header.w-nav:hover .nav {
    position: static;
    margin: 0 0 6px 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #header .nav::-webkit-scrollbar {
    display: none;
  }
}