@media (orientation: landscape)  and (max-aspect-ratio: 16/9) {
  #logo {
    top: 5vh;
    left: 5vh;
    height: 10vh;
    width: 10vh;
  }
  #title {
    top: 15vh;
    left: 5vh;
  }
  #reset {
    top: 3vh;
    right: 3vh;
    height: 10vh;
    width: 10vh;
  }
  #face, #hours {
    top: 5vh;
    left: calc(50vw - 45vh);
    height: 90vh;
    width: 90vh;
  }
  .hour {
    top: 0;
    left: 41vh;
    height: 45vh;    
    width: 8vh;
  }
  .icon {
    height: 8vh;
    width: 8vh;
  }
  .rain {
    margin-top: -4vh;
  }
  #copy {
    bottom: 5vh;
    left: 5vh;
  }
  #msg {
    bottom: 5vh;
    right: 5vh;
  }
}