/* Pool Float Skeleton Theme */
:root {
  /* Screen-rendered green color from decoded video (#1f6436) */
  --water-color: #7137aa; /* #326541;  #1f6436 */
  --accent-color: #ff9603;
  --text-primary: #f0f7f4;
  --video-max-width: 960px;
  --content-max-width: 800px;
  --video-max-height: 50svh;
  --video-min-height: 260px;
  --video-computed-height: clamp(var(--video-min-height), calc(100vw * 0.75), var(--video-max-height));
  /* Fraction of video height to pull content up over empty bottom water */
  --content-pullup: calc(var(--video-computed-height) * 0.10);
  /* Waterline in 960x720 video is at row 443 -> 443 / 720 = 61.528% of video height */
  --waterline-fraction: 0.61528;
  /* Aspect ratio is 4/3 -> height is width * 0.75, so waterline from top is width * 0.46146 */
  --waterline-ratio: 0.46146;
}

html {
  background-color: var(--water-color) !important;
  background-image: none !important;
  color: var(--text-primary);
}

body {
  background-color: #000000 !important;
  background-image: linear-gradient(
    to bottom,
    #000000 0px,
    #000000 clamp(calc(var(--video-min-height) * var(--waterline-fraction)), min(calc(var(--video-max-width) * var(--waterline-ratio)), calc(100vw * var(--waterline-ratio)), calc(var(--video-max-height) * var(--waterline-fraction))), calc(var(--video-max-height) * var(--waterline-fraction))),
    var(--water-color) clamp(calc(var(--video-min-height) * var(--waterline-fraction)), min(calc(var(--video-max-width) * var(--waterline-ratio)), calc(100vw * var(--waterline-ratio)), calc(var(--video-max-height) * var(--waterline-fraction))), calc(var(--video-max-height) * var(--waterline-fraction)))
  ) !important;
  background-repeat: no-repeat !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#wrapper {
  background-color: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero Video Container centered at top */
.pool-hero-container {
  width: 100%;
  max-width: var(--video-max-width);
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
}

/* Responsive video displaying chromakeyed transparent video */
.pool-hero-video {
  width: auto;
  max-width: var(--video-max-width);
  height: var(--video-computed-height);
  max-height: var(--video-max-height);
  min-height: var(--video-min-height);
  aspect-ratio: 4 / 3;
  display: block;
  margin: 0 auto;
  background-color: transparent;
  object-fit: contain;
}

#belowfold {
  width: 100%;
  max-width: var(--content-max-width);
  margin: calc(-1 * var(--content-pullup)) auto 0 auto;
  padding: 0 15px 60px 15px;
  box-sizing: border-box;
  background-color: transparent;
  position: relative;
  z-index: 10;
}

#content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  color: var(--text-primary);
}

#welcome h1 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

#info, #location {
  color: var(--text-primary);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#message {
  background: rgba(7, 35, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  margin: 30px auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  text-align: left;
}

#message h1 {
  margin-top: 0;
  color: var(--accent-color);
}