style2.css

@media (max-width: 960px) {
  .section {
    height: 200rem;
    flex-direction: column;
  }

  .display {
    flex-direction: column;
    margin: 1rem 0rem;
  }


  .display-msg {
    width: 100%;
    height: fit-content;
  }

  .display-input {
    height: fit-content;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  .info {
    width: 96%;
    height: 96%;
    flex-direction: column;
    margin: 1rem 0rem;
  }

  #currTitle {
    width: 100%;
    height: 100%;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .infoItems {
    height: 100%;
    width: 100%;
    padding: 0.4rem;
    flex-direction: column;
    align-items: center;
  }

  .maininfoItem {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 1rem;
  }

  #icon,
  #day,
  #temp,
  #weath,
  #loc,
  #oth {
    padding: 0.2rem;
    height: 100%;
    width: 100%;
  }

  /* 
  #temp,
  #weath,
  #loc {
    border-right: solid 0.08rem lightgray;
  } */

  .otherinfoItems {
    width: 100%;
    height: 100%;
    padding: 0.3rem;
  }

  .otherinfoItem {
    height: 100%;
    width: 98%;
    flex-direction: column;
  }

  #otherInfoTitle {
    width: 98%;
    height: 100%;
    padding: 0.3rem;
  }

  .fore {
    height: 100%;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* #day {
    width: 100%;
  } */
}