@media screen and (max-width: 1100px) and (min-width: 800px) {
  .usernameClass {
    font-size: 2vw;
  }

  .usernameLabel {
    font-size: 3.5vw;
  }

  .submitButton {
    width: 50%;
    height: 120%;
    font-size: 2.25vw;
    border-radius: 10px;
    cursor: pointer;
  }

  .resultsContainer {
    margin-top: 10%;
  }

  .weatherContainer {
    min-height: 160px;
    cursor: pointer;
  }

  .weatherLocation {
    padding-left: 5%;
    width: 45%;
    font-size: 3vw;
  }

  .weatherImage {
    margin-left: auto;
    width: 7vw;
    height: 7vw;
  }

  .weatherTemperature {
    width: 45%;
    padding-left: 5%;
    padding-bottom: 5%;
    margin-top: auto;
    font-size: 3vw;
  }

  .weatherDescription {
    margin-top: auto;
    margin-left: auto;
    padding-right: 5%;
    padding-bottom: 5%;
    font-size: 3vw;
  }

  /* .profileContainer {
    width: 100%;
    height: 380px;
    margin: auto 1.5%;
    margin-bottom: 5%;
    border: 2px solid rgb(97, 97, 97);
  }

  .infoContainer {
    width: 100%;
    height: 380px;
    margin: auto 1.5%;
    border: 4px solid rgb(97, 97, 97);
    overflow: auto;
    -ms-overflow-style: none; /* IE and Edge */
  /* scrollbar-width: none; Firefox */
  /* }  */
}

@media screen and (max-width: 800px) {
  .usernameClass {
    font-size: 2vw;
  }

  .usernameLabel {
    font-size: 3.5vw;
  }

  .submitButton {
    width: 50%;
    height: 120%;
    font-size: 2.25vw;
    border-radius: 10px;
    cursor: pointer;
  }

  .resultsContainer {
    margin-top: 10%;
  }

  .weatherContainer {
    min-height: 120px;
    cursor: pointer;
  }

  .weatherLocation {
    padding-left: 5%;
    width: 45%;
    font-size: 3vw;
  }

  .weatherImage {
    margin-left: auto;
    width: 7vw;
    height: 7vw;
  }

  .weatherTemperature {
    width: 45%;
    padding-left: 5%;
    padding-bottom: 5%;
    margin-top: auto;
    font-size: 3vw;
  }

  .weatherDescription {
    margin-top: auto;
    margin-left: auto;
    padding-right: 5%;
    padding-bottom: 5%;
    font-size: 3vw;
  }

  .profileContainer {
    width: 100%;
    height: 380px;
    margin: auto 1.5%;
    margin-bottom: 5%;
    border: 2px solid rgb(97, 97, 97);
  }

  .infoContainer {
    width: 100%;
    height: 380px;
    margin: auto 1.5%;
    border: 4px solid rgb(97, 97, 97);
    overflow: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}