html {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

.song {
  visibility: hidden;
}

.container {
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  visibility: hidden;
  width: 100vw;
}

.container > div {
  left: 0;
  position: absolute;
  right: 0;
  top: 20vh;
}

.one {
  font-size: 4.5rem;
}

.two {
  font-size: 1.2rem;
  font-weight: lighter;
}

.three {
  font-size: 3rem;
}

.four .text-box {
  border: 3px solid #aaa;
  border-radius: 5px;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  width: 600px;
}

.text-box p {
  margin: 0;
  text-align: left;
}

.text-box span {
  visibility: hidden;
}

.text-box .fake-btn {
  background-color: rgb(21, 161, 237);
  border-radius: 3px;
  bottom: -50px;
  color: #fff;
  padding: .5rem 1rem;
  position: absolute;
  right: 5px;
}

.five p {
  font-size: 2rem;
  left: 0;
  position: absolute;
  right: 0;
}

.idea-3 strong {
  border-radius: 3px;
  display: inline-block;
  padding: 3px 5px;
}

.five .idea-5 {
  font-size: 4rem;
}

.idea-5 span, .idea-6 span, .wish-hbd span {
  display: inline-block;
}

.idea-6 span{
  font-size: 15rem;
}


.six {
  position: relative;
  top: 10vh;
  z-index: 1;
}

.six img {
  display: inline-block;
  height: 350px;
  max-width: 100%;
  /* height: auto; */
}

.six .hat {
  left: 41.5%;
  position: absolute;
  /* transform: scale(0.1); */
  top: -35%;
  width: 80px;
}

.baloons img {
  display: inline-block;
  position: absolute;
}

.baloons img:nth-child(even) {
  left: -10%;
}

.baloons img:nth-child(odd) {
  right: -10%;
}

.baloons img:nth-child(3n + 0) {
  left: 30%;
}

.seven, .eight {
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
}

.eight svg {
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 25px;
  z-index: -1;
}

.eight svg:nth-child(1) {
  fill: #bd6ecf;
  left: 5vw;
  top: 7vh;
}

.eight svg:nth-child(2) {
  fill: #7dd175;
  left: 35vw;
  top: 23vh;
}

.eight svg:nth-child(3) {
  fill: #349d8b;
  left: 23vw;
  top: 33vh;
}

.eight svg:nth-child(4) {
  fill: #347a9d;
  left: 57vw;
  top: 43vh;
}

.eight svg:nth-child(5) {
  fill: #c66053;
  left: 7vw;
  top: 68vh;
}

.eight svg:nth-child(6) {
  fill: #bfaa40;
  left: 77vw;
  top: 42vh;
}

.eight svg:nth-child(7) {
  fill: #e3bae8;
  left: 83vw;
  top: 68vh;
}

.eight svg:nth-child(8) {
  fill: #8762cb;
  left: 37vw;
  top: 86vh;
}

.eight svg:nth-child(9) {
  fill: #9a90da;
  left: 87vw;
  top: 94vh;
}

.wish-hbd {
  font-size: 2em;
  margin: 0;
  text-transform: uppercase;
}

.wish h5 {
  font-size: 1.5rem;
  font-weight: lighter;
  margin: 10px 0 0;
}

.wish-hbd {
    font-size: 2em;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.hbd-line-1, .hbd-line-2 {
    display: block;
}

/* From Uiverse.io by augustin_4687 */ 
.notes-btn {
  --stone-50: #fafaf9;
  --stone-800: #292524;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --black-25: rgba(0, 0, 0, 0.25);

  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  left: 49%;
  transform: translateX(-50%);

  & > button {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    width: 100%;
    appearance: none;
    border: 2px solid var(--stone-800);
    border-radius: 0.25rem;
    background-color: var(--yellow-400);
    outline: 2px solid transparent;
    outline-offset: 2px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: var(--yellow-300);
    }

    &:checked {
      background-color: var(--stone-800);
      border-color: var(--stone-800);

      &:hover {
        background-color: #44403c;
      }
    }

    &:active {
      outline-color: var(--stone-800);
    }

    &:focus-visible {
      outline-color: var(--stone-800);
      outline-style: dashed;
    }
  }

  & > span:nth-child(2) {
    position: absolute;
    inset: 3px;
    pointer-events: none;
    background-color: var(--yellow-400);
    border-bottom: 2px solid var(--black-25);
    transition: transform 75ms;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
          rgb(255 255 255 / 80%) 20%,
          transparent 20%
        ),
        radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
      background-position:
        0 0,
        4px 4px;
      background-size: 8px 8px;
      mix-blend-mode: hard-light;
      opacity: 0.5;
      animation: dots 0.5s infinite linear;
    }
  }

  & > span:nth-child(3) {
    position: absolute;
    pointer-events: none;
    inset: 0;

    &::before {
      content: "";
      width: 0.375rem;
      height: 0.375rem;
      position: absolute;
      top: 0.25rem;
      left: 0.25rem;
      background-color: var(--stone-800);
      border-radius: 0.125rem;
      box-shadow:
        3.125em 0 var(--stone-800),
        0 3.125em var(--stone-800),
        3.125em 3.125em var(--stone-800);
    }
  }

  & > span:nth-child(4) {
    position: absolute;
    pointer-events: none;
    inset: 0;
    filter: drop-shadow(0.25em 0.25em 0 rgba(0, 0, 0, 0.2));
    transition: all 75ms;

    &::after {
      content: "";
      width: 0.25rem;
      height: 0.25rem;
      position: absolute;
      top: 0.875rem;
      left: 1rem;
      border-radius: 0.0625px;
      background-color: var(--stone-800);
      box-shadow:
        0.75em 2em var(--stone-800),
        1em 2em var(--stone-800),
        0.75em 1.75em var(--stone-800),
        1em 1.75em var(--stone-800),
        0.75em 1.25em var(--stone-800),
        1em 1.25em var(--stone-800),
        0.75em 1em var(--stone-800),
        1em 1em var(--stone-800),
        1em 0.75em var(--stone-800),
        1.5em 0.75em var(--stone-800),
        1.25em 0.75em var(--stone-800),
        1.25em -0.25em var(--stone-800),
        1.5em 0em var(--stone-800),
        1.25em 0.5em var(--stone-800),
        1.5em 0.5em var(--stone-800),
        1.25em 0.25em var(--stone-800),
        1.5em 0.25em var(--stone-800),
        1.25em 0 var(--stone-800),
        1em -0.25em var(--stone-800),
        0.75em -0.25em var(--stone-800),
        0.5em -0.25em var(--stone-800),
        0.25em -0.25em var(--stone-800),
        0.25em 0 var(--stone-800),
        0 0.25em var(--stone-800),
        0 0.5em var(--stone-800),
        0.25em 0.25em var(--stone-800),
        0.25em 0.5em var(--stone-800);
    }
  }

  & > span:nth-child(5) {
    position: absolute;
    background-color: var(--yellow-400);
    border: 2px solid var(--stone-800);
    border-radius: 0.75rem;
    pointer-events: none;
    z-index: -1;
    inset: 0.5rem 1.5rem;
    box-shadow:
      7px 0 0 0 var(--stone-800),
      inset 0 2px 0 0 var(--yellow-300),
      inset 0 -2px 0 0 var(--yellow-500);
    transition: all 0ms cubic-bezier(0, 0.5, 0.4, 1);
  }

  & button:active ~ span:nth-child(5) {
    transform: translateY(-200%);
    transition-duration: 200ms;
    opacity: 0;
  }

  & button:hover ~ span:nth-child(4) {
    filter: drop-shadow(0.125em 0.125em 0 rgba(0, 0, 0, 0.2));
  }
}

@keyframes dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}



/* From Uiverse.io by marcelodolza */ 
.button {
  --white: #ffe7ff;
  --purple-100: #f4b1fd;
  --purple-200: #d190ff;
  --purple-300: #c389f2;
  --purple-400: #8e26e2;
  --purple-500: #5e2b83;
  --radius: 18px;

  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  font-size: 23px;
  font-family: Arial;
  background: transparent;
  letter-spacing: -1px;
  border: 0;
  position: relative;
  width: 220px;
  height: 80px;
  transform: rotate(353deg) skewX(4deg);
}

.bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(1px);
}
.bg::before,
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) * 1.1);
  background: var(--purple-500);
}
.bg::before {
  filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow:
    -7px 6px 0 0 rgb(115 75 155 / 40%),
    -14px 12px 0 0 rgb(115 75 155 / 30%),
    -21px 18px 4px 0 rgb(115 75 155 / 25%),
    -28px 24px 8px 0 rgb(115 75 155 / 15%),
    -35px 30px 12px 0 rgb(115 75 155 / 12%),
    -42px 36px 16px 0 rgb(115 75 155 / 8%),
    -56px 42px 20px 0 rgb(115 75 155 / 5%);
}

.wrap {
  border-radius: inherit;
  overflow: hidden;
  height: 100%;
  transform: translate(6px, -6px);
  padding: 3px;
  background: linear-gradient(
    to bottom,
    var(--purple-100) 0%,
    var(--purple-400) 100%
  );
  position: relative;
  transition: all 0.3s ease;
}

.outline {
  position: absolute;
  overflow: hidden;
  inset: 0;
  opacity: 0;
  outline: none;
  border-radius: inherit;
  transition: all 0.4s ease;
}
.outline::before {
  content: "";
  position: absolute;
  inset: 2px;
  width: 120px;
  height: 300px;
  margin: auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    white 50%,
    transparent 100%
  );
  animation: spin 3s linear infinite;
  animation-play-state: paused;
}

.content {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  height: 100%;
  gap: 16px;
  border-radius: calc(var(--radius) * 0.85);
  font-weight: 600;
  transition: all 0.3s ease;
  background: linear-gradient(
    to bottom,
    var(--purple-300) 0%,
    var(--purple-400) 100%
  );
  box-shadow:
    inset -2px 12px 11px -5px var(--purple-200),
    inset 1px -3px 11px 0px rgb(0 0 0 / 35%);
}
.content::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 10;
  width: 80%;
  top: 45%;
  bottom: 35%;
  opacity: 0.7;
  margin: auto;
  background: linear-gradient(to bottom, transparent, var(--purple-400));
  filter: brightness(1.3) blur(5px);
}

.char {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.char span {
  display: block;
  color: transparent;
  position: relative;
}
.char span:nth-child(5) {
  margin-left: 5px;
}
.char.state-1 span:nth-child(5) {
  margin-right: -3px;
}
.char.state-1 span {
  animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s);
}
.char.state-1 span::before,
.char span::after {
  content: attr(data-label);
  position: absolute;
  color: var(--white);
  text-shadow: -1px 1px 2px var(--purple-500);
  left: 0;
}
.char span::before {
  opacity: 0;
  transform: translateY(-100%);
}
.char.state-2 {
  position: absolute;
  left: 80px;
}
.char.state-2 span::after {
  opacity: 1;
}

.icon {
  animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards;
  z-index: 10;
}
.icon div,
.icon div::before,
.icon div::after {
  height: 3px;
  border-radius: 1px;
  background-color: var(--white);
}
.icon div::before,
.icon div::after {
  content: "";
  position: absolute;
  right: 0;
  transform-origin: center right;
  width: 14px;
  border-radius: 15px;
  transition: all 0.3s ease;
}
.icon div {
  position: relative;
  width: 24px;
  box-shadow: -2px 2px 5px var(--purple-400);
  transform: scale(0.9);
  background: linear-gradient(to bottom, var(--white), var(--purple-100));
  animation: swingArrow 1s ease-in-out infinite;
  animation-play-state: paused;
}
.icon div::before {
  transform: rotate(44deg);
  top: 1px;
  box-shadow: 1px -2px 3px -1px var(--purple-400);
  animation: rotateArrowLine 1s linear infinite;
  animation-play-state: paused;
}
.icon div::after {
  bottom: 1px;
  transform: rotate(316deg);
  box-shadow: -2px 2px 3px 0 var(--purple-400);
  background: linear-gradient(200deg, var(--white), var(--purple-100));
  animation: rotateArrowLine2 1s linear infinite;
  animation-play-state: paused;
}

.path {
  position: absolute;
  z-index: 12;
  bottom: 0;
  left: 0;
  right: 0;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  pointer-events: none;
}

.splash {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  stroke-dasharray: 60 60;
  stroke-dashoffset: 60;
  transform: translate(-17%, -31%);
  stroke: var(--purple-300);
}

/** STATES */

.button:hover .words {
  opacity: 1;
}
.button:hover .words span {
  animation-play-state: running;
}

.button:hover .char.state-1 span::before {
  animation: charAppear 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .char.state-1 span::after {
  opacity: 1;
  animation: charDisappear 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .wrap {
  transform: translate(8px, -8px);
}

.button:hover .outline {
  opacity: 1;
}

.button:hover .outline::before,
.button:hover .icon div::before,
.button:hover .icon div::after,
.button:hover .icon div {
  animation-play-state: running;
}

.button:active .bg::before {
  filter: blur(5px);
  opacity: 0.7;
  box-shadow:
    -7px 6px 0 0 rgb(115 75 155 / 40%),
    -14px 12px 0 0 rgb(115 75 155 / 25%),
    -21px 18px 4px 0 rgb(115 75 155 / 15%);
}
.button:active .content {
  box-shadow:
    inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),
    inset 0px -3px 8px 0px var(--purple-200);
}

.button:active .words,
.button:active .outline {
  opacity: 0;
}

.button:active .wrap {
  transform: translate(3px, -3px);
}

.button:active .splash {
  animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s;
}

.button:focus .path {
  animation: path 1.6s ease forwards 0.2s;
}

.button:focus .icon {
  animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards;
}

.char.state-2 span::after,
.button:focus .char.state-1 span {
  animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s);
}

.button:focus .char.state-2 span::after {
  animation: charAppear 1s ease backwards calc(var(--i) * 0.03s);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes charAppear {
  0% {
    transform: translateY(50%);
    opacity: 0;
    filter: blur(20px);
  }
  20% {
    transform: translateY(70%);
    opacity: 1;
  }
  50% {
    transform: translateY(-15%);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes charDisappear {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-70%);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes arrow {
  0% {
    opacity: 1;
  }
  50% {
    transform: translateX(60px);
    opacity: 0;
  }
  51% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(-128px);
    opacity: 1;
  }
}

@keyframes swingArrow {
  50% {
    transform: translateX(5px) scale(0.9);
  }
}

@keyframes rotateArrowLine {
  50% {
    transform: rotate(30deg);
  }
  80% {
    transform: rotate(55deg);
  }
}

@keyframes rotateArrowLine2 {
  50% {
    transform: rotate(330deg);
  }
  80% {
    transform: rotate(300deg);
  }
}

@keyframes resetArrow {
  0% {
    transform: translateX(-128px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes path {
  from {
    stroke: white;
  }
  to {
    stroke-dashoffset: -480;
    stroke: #f9c6fe;
  }
}

@keyframes splash {
  to {
    stroke-dasharray: 2 60;
    stroke-dashoffset: -60;
  }
}








@media (prefers-color-scheme: dark) {
  .button {
    & button:active,
    & button:focus-visible {
      outline-color: var(--yellow-400);
    }
  }
}

@media screen and (max-width: 500px) {
    .wish-hbd {
        font-size: 2rem;
    }
}


.nine p {
  font-size: 2rem;
  font-weight: lighter;
}

#replay {
  cursor: pointer;
  z-index: 3;
}
  .six .hat {
    transform:rotateZ('45deg');
  }

/* Media Queries */
@media screen and (max-height: 1000px) {
  .six .hat {
    left: 40%;
  }
}

@media screen and (max-height: 800px) {
  .six .hat {
    left: 40%;
  }
}

@media screen and (max-height: 700px) {
  .six .hat {
    left: 40%;
  }
}

@media screen and (max-height: 850px) and (max-width: 450px) {
  .six .hat {
    left: 40%;
  }
}

@media screen and (max-width: 500px) {
  .container {
    width: 90%;
  }

  .four .text-box {
    width: 90%;
  }

  .text-box .fake-btn {
    bottom: -38px;
    right: 5px;
  }

  .idea-5 span {
    display: block;
  }

  .idea-6 span {
    font-size: 10rem;
  }

  .six .profile-picture{
    top: -10vh;
  }

  .six .hat {
    /* top: -20px; */
    width: 50px;
  }

  .wish-hbd {
    font-size: 2.2em;
  }

  .wish h5 {
    font-size: 1.2rem;
  }

  .nine p {
    font-size: 1.5rem;
    font-weight: lighter;
  }
}