body {
  background-image: url("flowers.jpg");
  background-color: #e4fff7;
  background-size: 100%;
}

.main-container {
  display: flex;
  /* removing this shows iframe, want ot keep this flexbox whilst showing iframe scaling */
  flex-direction: column;
  align-items: center;
}

.main-container .embed-container {
  /* padding-top: 30px; */
  position: relative;
  padding-bottom: 80.25%;
  height: 0;
  overflow: hidden;
}

@media (max-width: 800px) {
  .main-container {
    flex-direction: column;
  }
}

.playful span {
  position: relative;
  color: #5362f6;
  text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
    1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8,
    1.75px 1.75px #e485f8, 2px 2px #e485f8, 2.25px 2.25px #e485f8,
    2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8, 3px 3px #e485f8,
    3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
    4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8,
    4.75px 4.75px #e485f8, 5px 5px #e485f8, 5.25px 5.25px #e485f8,
    5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8, 6px 6px #e485f8;
  animation: scatter 1.75s infinite;
}

.playful span:nth-child(2n) {
  color: #ed625c;
  text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,
    1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063,
    1.75px 1.75px #f2a063, 2px 2px #f2a063, 2.25px 2.25px #f2a063,
    2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063, 3px 3px #f2a063,
    3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,
    4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063,
    4.75px 4.75px #f2a063, 5px 5px #f2a063, 5.25px 5.25px #f2a063,
    5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063, 6px 6px #f2a063;
  animation-delay: 0.3s;
}

.playful span:nth-child(3n) {
  color: #ffd913;
  text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,
    1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9,
    1.75px 1.75px #6ec0a9, 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9,
    2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9, 3px 3px #6ec0a9,
    3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,
    4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9,
    4.75px 4.75px #6ec0a9, 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9,
    5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9, 6px 6px #6ec0a9;
  animation-delay: 0.15s;
}

.playful span:nth-child(5n) {
  color: #555bff;
  text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
    1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8,
    1.75px 1.75px #e485f8, 2px 2px #e485f8, 2.25px 2.25px #e485f8,
    2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8, 3px 3px #e485f8,
    3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
    4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8,
    4.75px 4.75px #e485f8, 5px 5px #e485f8, 5.25px 5.25px #e485f8,
    5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8, 6px 6px #e485f8;
  animation-delay: 0.4s;
}

.playful span:nth-child(7n),
.playful span:nth-child(11n) {
  color: #ff9c55;
  text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,
    1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555,
    1.75px 1.75px #ff5555, 2px 2px #ff5555, 2.25px 2.25px #ff5555,
    2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555, 3px 3px #ff5555,
    3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,
    4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555,
    4.75px 4.75px #ff5555, 5px 5px #ff5555, 5.25px 5.25px #ff5555,
    5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555, 6px 6px #ff5555;
  animation-delay: 0.25s;
}

@keyframes scatter {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}

h1 {
  font-size: 65px;
  text-transform: uppercase;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: normal;
  display: block;
  width: 666px;
  max-width: 60vw;
  min-height: 90px;
  height: auto;
  text-align: center;
  /* margin: 10rem auto; */
  /* margin: calc(50vh - 5rem) auto; */
}