*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  font-weight: 400;

  color: light-dark(#213547, rgba(255, 255, 255, 0.87));
  background-color: light-dark(#ffffff, #242424);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.greeting {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 100dvh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.theme-blue {
  --bg-color: #e6f8ff;
  --text-color: #0c84da;
}
h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.container {
  max-width: 100vw;
  overflow: hidden;
  position:fixed;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hidden {
  display: none;
}


a {
  font-weight: 500;
  color: #ff2056;
  text-decoration: inherit;
}
a:hover {
  color: #ff637e;
}

.balloons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.blue {
  --color-1: #e6f8ff;
  --color-2: #cce8ff;
  --color-3: #a3d8ff;
  --color-4: #7ac8ff;
  --color-5: #0c84da;

  --tie-1: #0c84da;
  --tie-2: #1d5d8b;
  --tie-3: #1d5d8b;

}

.gold {
  --color-1: #fff9e6;
  --color-2: #ffe082;
  --color-3: #ffc107;
  --color-4: #f9a825;
  --color-5: #e65100;

  --tie-1: #f9a825;
  --tie-2: #f5901c;
  --tie-3: #e67f00;
}

.red {
  --color-1: #ffe6e6;
  --color-2: #ffcccc;
  --color-3: #ffb3b3;
  --color-4: #ff9999;
  --color-5: #ff8080;

  --tie-1: #ff8080;
  --tie-2: #ff6666;
  --tie-3: #ff4d4d;
}

.green {
  --color-1: #e6ffe9;
  --color-2: #ccffd9;
  --color-3: #a3ffc6;
  --color-4: #7affb3;
  --color-5: #0cda7a;

  --tie-1: #0fc518;
  --tie-2: #0cda7a;
  --tie-3: #0fc518;
}

.purple {
  --color-1: #f0e6ff;
  --color-2: #e0ccff;
  --color-3: #c0a3ff;
  --color-4: #a07aff;
  --color-5: #800cda;
}

.balloon {
  display: block;
  position: relative;
  width: 200px;
  max-width: calc(20vw - 20px);
  transition: transform 4.3s ease-out;
  transform: translateY(100%);

  .rise & {
    transform: translateY(-500px);
  }
  &:nth-child(1) {
    transition-delay: 0.9s;
    transition-duration: 3.5s;

  }
  &:nth-child(2) {
    transition-delay: 0.6s;
    transition-duration: 3.3s;
  }
  &:nth-child(3) {
    transition-delay: 0.3s;
    transition-duration: 6.3s;
  }
  &:nth-child(4) {
    transition-delay: 1.2s;
    transition-duration: 3.7s;
  }
  &:nth-child(5) {
    transition-delay: 1.5s;
  }
  .g-1 {
    stop-color: var(--color-1);
    stop-opacity: 1;

  }
  .g-2 {
    stop-color: var(--color-2);
    stop-opacity: 1;
  }
  .g-3 {
    stop-color: var(--color-3);
    stop-opacity: 1;
  }
  .g-4 {
    stop-color: var(--color-4);
    stop-opacity: 1;
  }
  .g-5 {
    stop-color: var(--color-5);
    stop-opacity: 1;
  }
  .tie-1 {
    fill: var(--tie-1);
  }
  .tie-2 {
    fill: var(--tie-2);
  }
  .tie-3 {
    fill: var(--tie-3);
    stroke: var(--tie-3);
  }
}