@media only screen and (max-width: 767px) {
    body {
        overflow: scroll;
        overflow-x: hidden;
        height: 100vh;
    }
    body:before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        background: url(/img/bg3.webp) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
      .modal {
        margin-bottom: -23rem;
        margin-top: -80vh;
        padding: 30px 20px;
      }
    .modal > h1 {
        font-size: 34px;
      }
      .modal > h3 {
        font-size: 25px;
        margin-top: 2rem;
      }
      .modal > button {
        margin-top: 2vh;
      }
      .logo {
        width: fit-content;
        height: fit-content;
      }
      .logo > img {
        width: 100%;
        height: 100%;
      }
      .slider,
      .fa-volume-down:before {
        display: none;
      }

      .audio-info > h3 {
        margin-top: 28px;
        font-size: 20px;
      }
      .audio-info > h4 {
        margin-top: -4px;
        margin-right: 6rem;
        font-size: 11.5pt;
        color: darkgrey;
      }
      .audio-info {
        margin-top: -1.2rem;
        width: 100vw;
      }

      .audio {
        top: 91%;
      }

      .audio-choose {
        flex-direction: row;
        width: 100vw;
        height: 85vh;
        padding: 18px;
        padding-right: 30px;
        align-content: flex-start;
        margin-top: -1.5rem;
      }
      .outer-element-grid {
        flex: 0 0 calc(50% - 20px);
        height: 150px;
        width: 100vw;
        margin-top: 20px;
      }
      .audio-choose p {
        font-size: 20px;
        line-height: 0.7;
      }
      img {
        margin-top: 8px;
        width: 30%;
        height: 25%;
      }
      .outer-element-grid:first-of-type {
        margin-left: 20px;
      }
      .black-background {
        height: 50%;
        margin-top: -10px;
      }
      .small {
        margin-top: -47vh;
      }
      .small > img {
        height: 25%;
        width: 35%;
        margin-top: 11rem;
      }
      .small > h1 {
        margin-top: -26px;
        font-size: 55pt;
    }
    #updates {
      font-size: 14px;
    }
}
@media only screen and (max-device-height: 650px) {
  .modal {
    height: 98vh;
  }
  .audio-choose {
    height: 98vh;
  }
  .audio-info > h3 {
    margin-top: 21px;
  }
  h6 {
    font-size: 16px;
  }

}

/* ------------------------------ 21:9 Displays ----------------------------- */
  @media only screen and (min-width: 3200px) {
  .modal {
    width: 65vw;
  }
  .modal > h1 {
    font-size: 105px;
  }
  .modal > h3 {
    font-size: 60px;
  }
  .modal > button {
    font-size: 38px;
  }
  .outer-element-grid {
    height: 320px;
  }
  .black-background {
    height: 50%;
    margin-top: -63px;
  }
  .small > img {
    margin-top: 28vh;
  }
  .audio-choose p {
    font-size: 30pt;
    line-height: 80%;
  }
  .audio-choose {
    width: 67vw;
  }
  .audio-info > h4 {
    margin-right: 35vw;
    font-size: 18pt;
  }
  .audio-info >h3 {
    margin-right: 33vw;
    font-size: 36px;
  }
  }