mobile.css

/*RESPONSIVIDADE SMARPHONES COM A ORIENTAÇÃO EM PAISAGEM*/
@media (max-height: 600px) and (orientation: landscape) {

  h1 {
    font-size: 1em;
  }

  h3 {
    font-size: .7em;
  }

  #clock{
    font-size: .5em;
    text-align: center;
  }

  #hour{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  button {
    border: .5rem;
    width: fit-content;
    height: fit-content;
    font-size: .7em;
  }

  #startScreen{
    position: absolute;
    bottom: 4px;
  }

  .backgroundAnimation{
    animation: slideright 25s infinite linear;
  }
}

/*RESPONSIVIDADE SMARPHONES COM A ORIENTAÇÃO EM RETRATO*/
@media (max-width: 600px) and (orientation: portrait) {

  h1 {
    font-size: 1.5em;
  }
    
  h3 {
    font-size: .6em;
  }
    
  #clock {
    font-size: 1em;
    text-align: center;
    border-bottom: none;
    border-right: 1px black solid;
  }
    
  #hour {
    display: flex;
    justify-content: center;
    align-items: center;
  }
    
  button {
    border: .5rem;
    width: auto;
    height: auto;
    font-size: .7em;
  }
    
  .backgroundAnimation {
    animation: slideright 2000s infinite linear;
  }
}