html, body {
  overflow-x: hidden;
}

body {
  padding: 0;
  margin: 0;
  color: #23466d;
  position: relative;
  background: rgb(232,243,252);
  background: linear-gradient(0deg, rgba(232,243,252,1) 0%, rgba(110,189,255,1) 100%);
  background-size: 100% 100vh;
  background-repeat: no-repeat;
  font-family: "Helvetica";
}

body::after {
  content: "";
  display: block;
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100%;
  height: calc(100% - 100vh);
  background-color: rgba(232,243,252,1);
  z-index: -1;
}

.caprasimo-regular {
  font-family: "Caprasimo", serif;
  font-weight: 400;
  font-style: normal;
}

.stage {
  padding: 0 1rem;
}

.stage .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  padding: 3rem 0;
}

.messageIntro {
  font-size: 10.5vw;
  line-height: 1;
  text-align: center;
}

@media screen and (min-width: 760px) {
  .messageIntro {
    font-size: 5rem;
  }
}

.messageMain {
  font-size: 1.5rem;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.5);
  transition: visibility 0s, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

@media screen and (min-width: 760px) {
  .messageMain {
    font-size: 1.8rem;
  }
}

.messageMain.visible {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  animation: bounce 0.7s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(2.1);
    }
    60% {
        transform: scale(0.9);
    }
}

.countdown {
  font-size: 1.4rem;
  text-align: center;
}

/* Flower*/
.flower {
  position: relative;
  width: 10rem;
  height: 10rem;
}

.center {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #fff8b5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

.center-1 {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #fbe100;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  box-shadow: 0px 0px 12px 0px rgba(251, 186, 0, 0.93); transform:translate(-50%,-50%);
}

.center-2 {
  width: 3.0rem;
  height: 3.0rem;
  border-radius: 50%;
  background: rgb(251,186,0);
  background: radial-gradient(circle, rgba(251, 186, 0, 1) 0%, rgb(251 218 0) 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  box-shadow: 0px 0px 12px 0px rgba(251, 186, 0, 0.93);
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  z-index: 9;    
}

.petal {
  width: 4rem;
  height: 4rem;
  background-color: white;
  border-radius: 1.8rem 12.8rem 0 12.8rem;
  position: absolute;
  box-shadow: 0 1px 11px 0 rgba(92, 92, 92, .1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.petal:hover {
  cursor: pointer;
}

.petal.clicked {
  opacity: 0;
  transform: translateY(4rem) rotate(20deg) !important;
  z-index:50;
  pointer-events: none;
}

.choiceHolder {
  position: absolute;
  padding: 1rem;
  font-size: 2rem;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0);
}

#choiceHolder.active {
  opacity: 0;
  visibility: visible;
  display: block;
  transform: translateY(-8rem);
  pointer-events: none;
}

#messageHolder {
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: auto;
}

.center-2.happy:before,
.center-2.sad:before {
  content: ". .";
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 4rem;
  white-space: nowrap;
  line-height: 0.2;
  top: 0;
}

.center-2.happy:after,
.center-2.sad:after {
  content: ")";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0) rotate(90deg);
  font-size: 3rem;
  line-height: 0.2;
}

.center-2.sad:after {
  transform: translate(-50%, 0) rotate(-90deg);
  font-size: 1rem;
}

.addHolder {
  text-align: center;
}

/* Hint */
.hint {
  font-size: 1.2rem;
  //animation: fadeOut 5s 0.1s forwards;
  transition: opacity 0.5s ease-out;
  position: absolute;
  z-index: 500;
  top: -6%;
  right: 0;
  transform: translateX(67%);
  white-space: nowrap;
  pointer-events: none;
}

.hint:before {
  content: "<";
  display: inline-block;
  margin-right: 10px;
  animation: moveArrow 1s infinite;
}

.hint.fade-out {
    opacity: 0;
}

@keyframes moveArrow {
  0%, 100% {
      transform: translateX(0);
  }
  50% {
      transform: translateX(5px);
  }
}

/*@keyframes fadeOut {
  0%, 90% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}*/

.text {
  max-width: 920px;
  margin: 0 auto;
  padding: 1rem 1rem 16rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.text h2 {
  font-size: 2rem;
  font-weight: 800;
  margin: 4rem 0 1.6rem;
}

.text ol {
  padding-left: 1.5rem;
}

@media screen and (min-width: 760px) {

  .text h2 {
    font-size: 2.8rem;
    font-weight: 600;
    margin: 6rem 0 1.6rem;
  }

  .text ol {
    padding-left: 3.5rem;
  }
}

.text ol > li {
  margin: 1rem 0;
}

.text li ul li {
  margin: .2rem 0;
}

.footer {
  pointer-events: none;
  position: fixed;
  top: 50vh;
  height: 50vh;
  width: 100%;
  background: url("meadow.png") left bottom repeat-x;
  background-size: cover;
}

@media screen and (min-width: 760px) {

  .footer {
    background-size: contain;
  }
}

/* Fireworks */
.fireworks {
  display: none;
}

.fireworks.visible {
  display: block;
}

.fireworks:before, .fireworks:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.fireworks:after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: 16px -270.6666666667px #ff0022, -33px -315.6666666667px #d0ff00, 132px -405.6666666667px #4000ff, -187px -339.6666666667px #ff8000, 139px -158.6666666667px #ff00d5, 93px -234.6666666667px #ff0095, 73px 70.3333333333px #ffdd00, -92px -166.6666666667px #0040ff, 237px -317.6666666667px #ff0073, 65px -156.6666666667px #b300ff, 114px -99.6666666667px #91ff00, -138px -236.6666666667px #ff00bb, 98px -163.6666666667px #00f2ff, 101px -219.6666666667px #84ff00, 30px -324.6666666667px #001eff, 163px 31.3333333333px #00a2ff, 148px -301.6666666667px #0040ff, 135px 18.3333333333px #006fff, -31px -124.6666666667px #ff5e00, -39px -298.6666666667px #44ff00, 52px -264.6666666667px #00ffdd, 37px -109.6666666667px #59ff00, 141px -101.6666666667px #ff0073, 158px -120.6666666667px #ff5100, 175px -260.6666666667px #c800ff, 43px 14.3333333333px #6fff00, -177px -72.6666666667px #0022ff, 42px 8.3333333333px #00ffaa, 37px -296.6666666667px #00fff2, -204px 9.3333333333px #009dff, 121px -89.6666666667px #00ff77, -145px -257.6666666667px #00ff22, -31px 36.3333333333px #40ff00, -240px -167.6666666667px #ff00e6, -244px 60.3333333333px #26ff00, -81px 44.3333333333px #ff006f, -14px -205.6666666667px #ff0091, -105px -103.6666666667px #0033ff, -74px 36.3333333333px #eaff00, -242px -2.6666666667px #00f2ff, -139px -46.6666666667px #00b7ff, 166px -313.6666666667px #00ff6a, 7px 61.3333333333px #00ff2f, 37px -394.6666666667px #00e1ff, 6px -28.6666666667px #00fff2, -153px 64.3333333333px #00ff6f, -33px -256.6666666667px #ff0004, 117px -151.6666666667px #00ff99, -34px 26.3333333333px #00ff44, 29px -202.6666666667px #5eff00, 96px -14.6666666667px #d5ff00;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: 16px -270.6666666667px #ff0022, -33px -315.6666666667px #d0ff00, 132px -405.6666666667px #4000ff, -187px -339.6666666667px #ff8000, 139px -158.6666666667px #ff00d5, 93px -234.6666666667px #ff0095, 73px 70.3333333333px #ffdd00, -92px -166.6666666667px #0040ff, 237px -317.6666666667px #ff0073, 65px -156.6666666667px #b300ff, 114px -99.6666666667px #91ff00, -138px -236.6666666667px #ff00bb, 98px -163.6666666667px #00f2ff, 101px -219.6666666667px #84ff00, 30px -324.6666666667px #001eff, 163px 31.3333333333px #00a2ff, 148px -301.6666666667px #0040ff, 135px 18.3333333333px #006fff, -31px -124.6666666667px #ff5e00, -39px -298.6666666667px #44ff00, 52px -264.6666666667px #00ffdd, 37px -109.6666666667px #59ff00, 141px -101.6666666667px #ff0073, 158px -120.6666666667px #ff5100, 175px -260.6666666667px #c800ff, 43px 14.3333333333px #6fff00, -177px -72.6666666667px #0022ff, 42px 8.3333333333px #00ffaa, 37px -296.6666666667px #00fff2, -204px 9.3333333333px #009dff, 121px -89.6666666667px #00ff77, -145px -257.6666666667px #00ff22, -31px 36.3333333333px #40ff00, -240px -167.6666666667px #ff00e6, -244px 60.3333333333px #26ff00, -81px 44.3333333333px #ff006f, -14px -205.6666666667px #ff0091, -105px -103.6666666667px #0033ff, -74px 36.3333333333px #eaff00, -242px -2.6666666667px #00f2ff, -139px -46.6666666667px #00b7ff, 166px -313.6666666667px #00ff6a, 7px 61.3333333333px #00ff2f, 37px -394.6666666667px #00e1ff, 6px -28.6666666667px #00fff2, -153px 64.3333333333px #00ff6f, -33px -256.6666666667px #ff0004, 117px -151.6666666667px #00ff99, -34px 26.3333333333px #00ff44, 29px -202.6666666667px #5eff00, 96px -14.6666666667px #d5ff00;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: 16px -270.6666666667px #ff0022, -33px -315.6666666667px #d0ff00, 132px -405.6666666667px #4000ff, -187px -339.6666666667px #ff8000, 139px -158.6666666667px #ff00d5, 93px -234.6666666667px #ff0095, 73px 70.3333333333px #ffdd00, -92px -166.6666666667px #0040ff, 237px -317.6666666667px #ff0073, 65px -156.6666666667px #b300ff, 114px -99.6666666667px #91ff00, -138px -236.6666666667px #ff00bb, 98px -163.6666666667px #00f2ff, 101px -219.6666666667px #84ff00, 30px -324.6666666667px #001eff, 163px 31.3333333333px #00a2ff, 148px -301.6666666667px #0040ff, 135px 18.3333333333px #006fff, -31px -124.6666666667px #ff5e00, -39px -298.6666666667px #44ff00, 52px -264.6666666667px #00ffdd, 37px -109.6666666667px #59ff00, 141px -101.6666666667px #ff0073, 158px -120.6666666667px #ff5100, 175px -260.6666666667px #c800ff, 43px 14.3333333333px #6fff00, -177px -72.6666666667px #0022ff, 42px 8.3333333333px #00ffaa, 37px -296.6666666667px #00fff2, -204px 9.3333333333px #009dff, 121px -89.6666666667px #00ff77, -145px -257.6666666667px #00ff22, -31px 36.3333333333px #40ff00, -240px -167.6666666667px #ff00e6, -244px 60.3333333333px #26ff00, -81px 44.3333333333px #ff006f, -14px -205.6666666667px #ff0091, -105px -103.6666666667px #0033ff, -74px 36.3333333333px #eaff00, -242px -2.6666666667px #00f2ff, -139px -46.6666666667px #00b7ff, 166px -313.6666666667px #00ff6a, 7px 61.3333333333px #00ff2f, 37px -394.6666666667px #00e1ff, 6px -28.6666666667px #00fff2, -153px 64.3333333333px #00ff6f, -33px -256.6666666667px #ff0004, 117px -151.6666666667px #00ff99, -34px 26.3333333333px #00ff44, 29px -202.6666666667px #5eff00, 96px -14.6666666667px #d5ff00;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: 16px -270.6666666667px #ff0022, -33px -315.6666666667px #d0ff00, 132px -405.6666666667px #4000ff, -187px -339.6666666667px #ff8000, 139px -158.6666666667px #ff00d5, 93px -234.6666666667px #ff0095, 73px 70.3333333333px #ffdd00, -92px -166.6666666667px #0040ff, 237px -317.6666666667px #ff0073, 65px -156.6666666667px #b300ff, 114px -99.6666666667px #91ff00, -138px -236.6666666667px #ff00bb, 98px -163.6666666667px #00f2ff, 101px -219.6666666667px #84ff00, 30px -324.6666666667px #001eff, 163px 31.3333333333px #00a2ff, 148px -301.6666666667px #0040ff, 135px 18.3333333333px #006fff, -31px -124.6666666667px #ff5e00, -39px -298.6666666667px #44ff00, 52px -264.6666666667px #00ffdd, 37px -109.6666666667px #59ff00, 141px -101.6666666667px #ff0073, 158px -120.6666666667px #ff5100, 175px -260.6666666667px #c800ff, 43px 14.3333333333px #6fff00, -177px -72.6666666667px #0022ff, 42px 8.3333333333px #00ffaa, 37px -296.6666666667px #00fff2, -204px 9.3333333333px #009dff, 121px -89.6666666667px #00ff77, -145px -257.6666666667px #00ff22, -31px 36.3333333333px #40ff00, -240px -167.6666666667px #ff00e6, -244px 60.3333333333px #26ff00, -81px 44.3333333333px #ff006f, -14px -205.6666666667px #ff0091, -105px -103.6666666667px #0033ff, -74px 36.3333333333px #eaff00, -242px -2.6666666667px #00f2ff, -139px -46.6666666667px #00b7ff, 166px -313.6666666667px #00ff6a, 7px 61.3333333333px #00ff2f, 37px -394.6666666667px #00e1ff, 6px -28.6666666667px #00fff2, -153px 64.3333333333px #00ff6f, -33px -256.6666666667px #ff0004, 117px -151.6666666667px #00ff99, -34px 26.3333333333px #00ff44, 29px -202.6666666667px #5eff00, 96px -14.6666666667px #d5ff00;
  }
}
@keyframes bang {
  to {
    box-shadow: 16px -270.6666666667px #ff0022, -33px -315.6666666667px #d0ff00, 132px -405.6666666667px #4000ff, -187px -339.6666666667px #ff8000, 139px -158.6666666667px #ff00d5, 93px -234.6666666667px #ff0095, 73px 70.3333333333px #ffdd00, -92px -166.6666666667px #0040ff, 237px -317.6666666667px #ff0073, 65px -156.6666666667px #b300ff, 114px -99.6666666667px #91ff00, -138px -236.6666666667px #ff00bb, 98px -163.6666666667px #00f2ff, 101px -219.6666666667px #84ff00, 30px -324.6666666667px #001eff, 163px 31.3333333333px #00a2ff, 148px -301.6666666667px #0040ff, 135px 18.3333333333px #006fff, -31px -124.6666666667px #ff5e00, -39px -298.6666666667px #44ff00, 52px -264.6666666667px #00ffdd, 37px -109.6666666667px #59ff00, 141px -101.6666666667px #ff0073, 158px -120.6666666667px #ff5100, 175px -260.6666666667px #c800ff, 43px 14.3333333333px #6fff00, -177px -72.6666666667px #0022ff, 42px 8.3333333333px #00ffaa, 37px -296.6666666667px #00fff2, -204px 9.3333333333px #009dff, 121px -89.6666666667px #00ff77, -145px -257.6666666667px #00ff22, -31px 36.3333333333px #40ff00, -240px -167.6666666667px #ff00e6, -244px 60.3333333333px #26ff00, -81px 44.3333333333px #ff006f, -14px -205.6666666667px #ff0091, -105px -103.6666666667px #0033ff, -74px 36.3333333333px #eaff00, -242px -2.6666666667px #00f2ff, -139px -46.6666666667px #00b7ff, 166px -313.6666666667px #00ff6a, 7px 61.3333333333px #00ff2f, 37px -394.6666666667px #00e1ff, 6px -28.6666666667px #00fff2, -153px 64.3333333333px #00ff6f, -33px -256.6666666667px #ff0004, 117px -151.6666666667px #00ff99, -34px 26.3333333333px #00ff44, 29px -202.6666666667px #5eff00, 96px -14.6666666667px #d5ff00;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}

@media (prefers-color-scheme: dark) {

    body {
      background: linear-gradient(0deg, rgba(232,243,252,1) 0%, rgba(110,189,255,1) 100%);
      background-size: 100% 100vh;
      background-repeat: no-repeat;
    }

    body::after {
      background-color: rgba(232,243,252,1);
    }

    .petal {
      background: url("bg_img.gif");
    }
}