@import url("variables.css");
@import url("header.css");
@import url("current.css");
@import url("hourly.css");
@import url("daily.css");
@import url("toTop.css");
@import url("footer.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;

  margin: 0;
  padding: 0;
  color: #3b6680;
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: all 1s ease;
}

main {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--background-color);
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
  transition: background-color 1s ease;
}

/* Дополнительные стили*/
#error-message {
  color: red;
  font-size: 1.2rem;
  margin-top: 5px;
}

@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 3px #ffa500);
  }
  50% {
    filter: drop-shadow(0 0 10px #ffa500);
  }
}

.sun-disk {
  animation: glow 2s infinite;
}