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

/* Full-height layout */
html, body {
  height: 100%;
  font-family: sans-serif;
  background-color: gray;
}

.iframe-livevideo {
  width: 100%;
  max-width: 925px; /* Looks great on desktop */
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  margin: 0 auto;
/* 🔥 Fade-in animation */
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .iframe-container {
    padding-bottom: 50%; /* shorter frame for wider screens */
    max-width: 925px;
    max-height: 620px; /* adjust this value as needed */
  }
}

@media (max-width: 768px) {
  .iframe-container {
    padding-bottom: 94%; /* taller for small screens */
    max-height: 620px; /* adjust this value as needed */
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.iframe-weather {
  width: 910px;
  height: 620px;
  overflow: hidden;
  transform: scale(1.0);
  transform-origin: top left;
   margin: 0 auto;
}
 /* 🔥 Fade-in animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 7s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

hr {
  margin-top: .5rem; /* or 0 to remove it completely */
  margin-bottom: .5rem;
  max-width: 100%;
}


.waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.live-iframe {
  position: absolute; /* instead of absolute */
  top: -20px;       /* or whatever vertical offset you prefer */
  left: 0;         /* sticks to the left edge */
  width: 675px;    /* text width */
  height: 375px;   /* text length */
  border: none;
  background: transparent;
  z-index: 1000;   /* keeps it layered above most page content */
 /* 🔥 Fade-in animation */
  /* animation-delay: 1s;  If you want it to appear a bit later (like after the waves) */
  opacity: 0;
  animation: fadeIn 10s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Layout wrapper for sticky bottom */
.page-wrapper {
   margin-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 0vh; /* changes how low the blue bottom will go */
}

/* Main content grows to fill space */
main.content {
flex-grow: 0; /* or even remove the flex if unnecessary */
  flex: 1;
  /* padding: 2rem; */
padding: 1rem 2rem 0 2rem; /* remove bottom padding or reduce it */
  text-align: center;
}

/* Footer with waves */
footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.ducky.swim {
  width: 100px; /* or your desired size */
  height: 100px;
  /* existing animation and styles */
}

/* SVG Waves Styling */
footer .waves {
  display: block;
  width: 100%;
  height: 20em; /* sets default height */
  min-height: 100px;
  max-height: 14em; /* will be overridden by media queries */
}

.bottom-content {
  position: relative;
  height: 360px; /* Adjusting this can make more (or less) room for your content over the waves. */
  background: url('waves.svg') bottom center no-repeat;
  background-size: cover;
  overflow: hidden;
}

.footer-container {
  position: relative;
  height: 100%;
 width: 100%;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  footer .waves {
    max-height: 8em;
  }
}

@media (max-width: 600px) {
  footer .waves {
    max-height: 8em;
  }
}

footer h4 { color: inherit; }
footer .waves {
  display: block;
  width: 100%;
  height: 20em;
}

footer .ducky.swim {
  display: block !important;
  transform: translateY(-2.2em);
  offset-path: path("m 0,152.85 1518.0625,-97.224441 a 435.6241,435.6241 5.4874633 0 1 137.9401,13.251664 l 373.0848,97.455557 a 601.59584,601.59584 7.985495 0 0 138.0647,19.36808 l 346.6358,8.05728 a 565.0604,565.0604 174.25162 0 0 138.5914,-13.95145 l 476.9814,-108.61538 a 554.65346,554.65346 174.38308 0 1 138.5831,-13.629519 l 1542.9462,42.949209");
  offset-distance: 5%;
  animation: followpath 100s linear infinite,
             bobble-translate .7s ease-in-out infinite alternate-reverse,
             bobble-rotate 1.5s -.8s ease-in-out infinite alternate-reverse;
}


@keyframes followpath {
  0%   { offset-distance: 100%; }
  25%  { offset-distance: 80%; }
  40%  { offset-distance: 60%; }
  48%  { offset-distance: 50%; }
  52%  { offset-distance: 46%; }
  56%  { offset-distance: 45%; }
  64%  { offset-distance: 40%; }
  83%  { offset-distance: 20%; }
  100% { offset-distance: 0%; }
}
@keyframes bobble-translate {
  0% {
    transform: translateY(-1.8em);
  }
  100% { 
    transform: translateY(-2.5em); 
  }
}
@keyframes bobble-rotate {
  0% {
    offset-rotate: auto 3deg;
  }
  100% { 
    offset-rotate: auto -3deg;
  }