body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  color: #000;
}

#container {
  margin: 35px auto; /* Reduced the margin to better fit the screen */
  width: 90%; /* You might want to increase the width to better utilize space */
  background-color: rgba(116, 191, 255, 0.5); /* branco com 50% de transparência */
  border-radius: 10px;
}

h1 {
  margin-top: 0; /* Reset the top margin if necessary */
  margin-bottom: 15px; /* You can adjust this as needed */
}

#logo {
  width: 350px;
  margin-bottom: -105px; /* Reduced from 20px to 10px */
}

#time {
  font-size: 85px;
  font-weight: bold;
  margin-bottom: 20px;
}

#weather-icon-container {
  margin: 30px auto; /* Centraliza o ícone */
  display: block; /* ou 'inline-block' se você quiser que a temperatura e a descrição do clima fiquem na mesma linha */
  transform: scale(2.0); /* Aumenta o tamanho do ícone em 50% */
}

#temperature-container {
  font-size: 90px; /* Tamanho da fonte ajustado para a temperatura */
  margin: 10px auto; /* Centraliza o ícone */
  display: block; /* ou 'inline-block' se você quiser que a temperatura e a descrição do clima fiquem na mesma linha */
}

#weather-description {
  font-size: 65px; /* Tamanho da fonte menor para a descrição do clima */
  margin: 00px auto; /* Centraliza o ícone */
  display: block; /* ou 'inline-block' se você quiser que a temperatura e a descrição do clima fiquem na mesma linha */
}


body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  color: #000;
  background-image: url('/images/background.png'); /* Adicione a URL da sua imagem aqui */
  background-size: cover; /* Isso fará com que a imagem de fundo cubra todo o espaço disponível */
  background-position: center; /* Isso centraliza a imagem de fundo na tela */
  background-repeat: no-repeat; /* Isso impede que a imagem de fundo se repita */
}