@media only screen and (max-width: 649px) and (min-width: 345px) {

  .header {
    display: grid;
    grid-template-areas: "settings";
    grid-template-columns: auto;
    z-index: 2;
    top: 0;
  }

  .settings {
    display: flex;
    justify-content: space-around;
  }

  #logo {
    display: none;
  }

  header label {
    left: 0px;
  }

  .tooltip-text {
    display: none;
  }

  #note-sheets+label {
    display: none;
  }

  #interactive-mode+label {
    margin-left: 0px;
    top: 20px;
  }

  #prepared-mode+label {
    top: 19px;
  }

  .piano-container {
    margin-top: 0px;
  }

  .piano-scroll {
    overflow-x: scroll;
    width: 96vw;
    margin: 0 2vw;
    padding-bottom: 20px;
    position: absolute;
    top: 20vh;
  }

  .piano-white-keys {
    width: 1000px;
  }

  .piano-black-keys {
    width: 1000px;
  }

  #black-table-1,
  #white-table-1,
  #white-table-2 {
    display: none;
  }

  .window-container {
    max-width: 649px;
    width: 95vw;
    margin: 2.5vw;
  }

  #information-window {
    position: fixed;
    left: auto;
    top: auto;
    bottom: 0;
    z-index: 4;
  }

  #piano-mode-window {
    position: fixed;
    left: auto;
    top: auto;
    bottom: 0;
    margin-top: 10vh;
    max-height: 200px;
  }

  #song-name-window{
    width: 80%;
    top:52%;
    left: 10%;
    margin:auto;
  }


  footer {
    display: none;
  }

}

@media only screen and (max-width: 649px) and (min-width: 345px) and (max-height: 500px) {
   .piano-container {
    margin-bottom: 20px;
   }

  .piano-scroll {
    position: initial;
    margin-top: 20px;
  }

  #piano-mode-window {
    position: initial;
    margin-top: 0;
  }

}

/* LANDSCAPE MOBILE STYLING */
@media screen and (orientation: landscape) and (max-width:950px) and (min-width:650px) and (max-height: 500px) {

  .header {
    background-color: white;
    box-shadow: none;
  }

  #interactive-mode+label {
    margin-left: 0px;
  }

  .tooltip-text {
    display: none;
  }

  #note-sheets+label {
    display: none;
  }

  .piano-container {
    margin: 0px;
    margin-top: 10px;
  }

  .piano-scroll {
    width: 97vw;
    margin: 0 1.5vw;
  }

  .piano-black-keys {
    width: 97vw;
  }

  #black-table-1,
  #white-table-1,
  #white-table-2 {
    display: none;
  }

  #information-window {
    left: auto;
    top: auto;
    z-index: 4;
    max-width: 97vw;
    margin: 0 1.5vw;
    margin-bottom: 1.5vh;
  }

  #piano-mode-window {
    position: initial;
    max-width: 97vw;
    margin: 1.5vw;
    margin-top: 2.5vw;
  }

  #song-name-window {
    max-width: 50vw;
    width: 50vw;
    left: 25vw;
    top: 40%;
  }

  footer {
    display: none;
  }

}