body {
  font-family: -apple-system, system-ui, sans-serif;
  background-color: #eee;
  color: black;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h1 {
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin: auto;
}
h2 {
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 4rem);
}
h3 {
  text-align: center;
  font-size: clamp(1rem, 6vw, 3rem);
}
.container {
  width: 100%;
  margin: 10px 0;
}
iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: none;
}
.container img {
  aspect-ratio: 16 / 9;
  width: 100%;
}
p {
  font-size: 20px;
  text-align: justify;
}
.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
a:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.btn {
  width: 260px;
  height: 60px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  color: white;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.image {
  border-radius: 25px;
  height: auto;
}
footer {
  text-align: center;
  margin: 50px;
}
footer a {
  color: black;
  text-decoration: none;
  transition: text-shadow 0.3s;
  margin: 0 5px;
}
footer a:hover {
  text-shadow: 0 0 1px black;
}
.si {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  padding-left: 0;
}
.si > li {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}
.si a {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}
.si a::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0.65rem;
  top: 0.65rem;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  transition: transform 0.3s ease;
}
.si a:hover::before {
  transform: scale(1.2);
}
.si .tw::before,
.si .fb::before,
.si .tl::before,
.si .pt::before,
.si .rt::before {
    display: block; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}
.si .tw::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.si .fb::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234267B2' d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z'/%3E%3C/svg%3E");
}
.si .tl::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 30 448 448'%3E%3Cpath fill='%2327a7e7' d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E");
}
.si .pt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2327a7e7' d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-7 20c-.825 0-1.62-.125-2.369-.357.326-.531.813-1.402.994-2.098l.499-1.901c.261.498 1.023.918 1.833.918 2.414 0 4.152-2.219 4.152-4.976 0-2.643-2.157-4.62-4.933-4.62-3.452 0-5.286 2.317-5.286 4.841 0 1.174.625 2.634 1.624 3.1.151.07.232.039.268-.107l.222-.907c.019-.081.01-.15-.056-.23-.331-.4-.595-1.138-.595-1.825 0-1.765 1.336-3.472 3.612-3.472 1.965 0 3.341 1.339 3.341 3.255 0 2.164-1.093 3.663-2.515 3.663-.786 0-1.374-.649-1.185-1.446.226-.951.663-1.977.663-2.664 0-.614-.33-1.127-1.012-1.127-.803 0-1.448.831-1.448 1.943 0 .709.239 1.188.239 1.188s-.793 3.353-.938 3.977c-.161.691-.098 1.662-.028 2.294-2.974-1.165-5.082-4.06-5.082-7.449 0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8z'/%3E%3C/svg%3E");
}
.si .rt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4500' d='M14.558 15.827c.097.096.097.253 0 .349-.531.529-1.365.786-2.549.786l-.009-.002-.009.002c-1.185 0-2.018-.257-2.549-.786-.097-.096-.097-.253 0-.349.096-.096.254-.096.351 0 .433.431 1.152.641 2.199.641l.009.002.009-.002c1.046 0 1.765-.21 2.199-.641.095-.097.252-.097.349 0zm-.126-3.814c-.581 0-1.054.471-1.054 1.05 0 .579.473 1.049 1.054 1.049.581 0 1.054-.471 1.054-1.049 0-.579-.473-1.05-1.054-1.05zm-3.806 1.05c0-.579-.473-1.05-1.054-1.05-.581 0-1.055.471-1.055 1.05 0 .579.473 1.049 1.055 1.049.581.001 1.054-.47 1.054-1.049zm13.374-8.063v14c0 2.761-2.238 5-5 5h-14c-2.761 0-5-2.239-5-5v-14c0-2.761 2.239-5 5-5h14c2.762 0 5 2.239 5 5zm-4 6.853c0-.972-.795-1.764-1.772-1.764-.477 0-.908.191-1.227.497-1.207-.794-2.84-1.299-4.647-1.364l.989-3.113 2.677.628-.004.039c0 .795.65 1.442 1.449 1.442.798 0 1.448-.647 1.448-1.442 0-.795-.65-1.442-1.448-1.442-.613 0-1.136.383-1.347.919l-2.886-.676c-.126-.031-.254.042-.293.166l-1.103 3.471c-1.892.023-3.606.532-4.867 1.35-.316-.292-.736-.474-1.2-.474-.975-.001-1.769.79-1.769 1.763 0 .647.355 1.207.878 1.514-.034.188-.057.378-.057.572 0 2.607 3.206 4.728 7.146 4.728 3.941 0 7.146-2.121 7.146-4.728 0-.183-.019-.362-.05-.54.555-.299.937-.876.937-1.546z'/%3E%3C/svg%3E");
}
.weather-block {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  justify-content: center;
}
.weather-icon {
  width: 64px;
  height: 64px;
  margin-right: 10px;
}
.weather-info {
  display: flex;
  flex-direction: column;
}
.temp-c {
  font-size: 18px;
  font-weight: 700;
}
.wind {
  font-size: 14px;
  color: #5b5b5b;
  margin-top: 5px;
}
@media (max-width: 930px) {
  header {
    flex-direction: column;
  }
  header > div {
    margin-top: 10px;
  }
  .container {
    flex-direction: column-reverse;
  }
  .btn {
    width: 100%;
    margin-bottom: 10px;
  }
  .description {
    width: 100%;
  }
}