html {
  font-size: 100%;
}
@media (max-width: 500px) {
  html {
    font-size: 87.5%;
  }
}

body {
  color: #333333;
  background-color: #5AC1DA;
}

img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
}

main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

h1 {
  text-align: center;
  font-size: clamp(2.5rem, 40px + 8 * (100vw - 768px) / 928, 3rem);
}
@media (max-width: 768px) {
  h1 {
    font-size: clamp(1.5rem, 24px + 16 * (100vw - 500px) / 268, 2.5rem);
  }
}
@media (max-width: 500px) {
  h1 {
    font-size: clamp(1.3rem, 18.2px + 6.3 * (100vw - 360px) / 140, 1.75rem);
  }
}

.ranger {
  max-width: 600px;
}
@media (max-width: 768px) {
  .ranger {
    max-width: 400px;
  }
}
@media (max-width: 500px) {
  .ranger {
    max-width: 300px;
  }
}/*# sourceMappingURL=main.css.map */