/* ================
// Settings
// ============= */
/* ================
// Love Letters
// ============= */
.love {
    position: relative;
    text-align: center;
    color: #000000;
    z-index: 2;
    font-size: 15px;    
  }
.byautor{
    font-size: 15px;
}  
.nameLove{
    font-size: 70px;
    margin: 30px;
}  
  @media (min-width: 600px) {
    .love {
      left: 50%;
      margin-bottom: 0;
      transform: translate(-50%, 0);
      text-align: center;
      color: #000000;
      z-index: 2;
      font-size: 15px;          
    }
    .nameLove{ 
        font-size: 70px;
        margin: 30px;
    }      
  }
  
  @media (min-width: 600px) {
    .letter {
      offset-distance: 0;
      offset-path: path("m0, 0 c100, -150 200, -150 300, 0");
    }
  }
  @-webkit-keyframes twinkle {
    50% {
      text-shadow: 0 0 0.25em red, 0 0 0.35em red, 0 0 0.45em red, 0 0 0.55em red, 0 0 0.65em red;
    }
  }
  
  @keyframes twinkle {
    50% {
      text-shadow: 0 0 0.25em red, 0 0 0.35em red, 0 0 0.45em red, 0 0 0.55em red, 0 0 0.65em red;
    }
  }
  /* ================
  // Roses
  // ============= */
  .roses {
    position: relative;
    height: 50vmin;
    width: 100%;
    -webkit-animation: grow 10s forwards;
            animation: grow 10s forwards;
    transform: rotate(-180deg);
    scale: 1;
  }

  @media (min-width: 600px) {
    .roses {
        scale: 0.7;
    }
  }

  @-webkit-keyframes grow {
    100% {
      transform: rotate(15deg);
    }
  }
  
  @keyframes grow {
    100% {
      transform: rotate(15deg);
    }
  }
  .rose {
    position: absolute;
    top: 50%;
    left: 50%;
    perspective: 50em;
    transform: translate(-50%, -50%) rotate(-25deg);
    transform-style: preserve-3d;
  }
  .rose:nth-child(1) {
    z-index: 6;
    height: 8.6vmin;
    width: 8.6vmin;
  }
  .rose:nth-child(2) {
    z-index: 5;
    height: 8.85vmin;
    width: 8.85vmin;
  }
  .rose:nth-child(3) {
    z-index: 4;
    height: 16.95vmin;
    width: 16.95vmin;
  }
  .rose:nth-child(4) {
    z-index: 3;
    height: 17.8vmin;
    width: 17.8vmin;
  }
  .rose:nth-child(5) {
    z-index: 2;
    height: 24.4vmin;
    width: 24.4vmin;
  }
  .rose:nth-child(6) {
    z-index: 1;
    height: 27.4vmin;
    width: 27.4vmin;
  }
  .rose:nth-child(7) {
    z-index: 0;
    height: 28.5vmin;
    width: 28.5vmin;
  }
  
  .pedal {
    position: absolute;
    bottom: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform-origin: center 100%;
  }
  .pedal:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    border-radius: 0.35em 50% 35% 50%;
    transform: rotate(45deg);
  }
  .pedal:nth-child(1) {
    transform: translate(-50%, 0) rotateZ(51.4285714286deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(1) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 2.7s;
            animation: flower-1 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(1):before {
    background: #d50000;
  }
  .rose:nth-child(1) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 2.7s;
            animation: flower-2 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(2):before {
    background: #ad0000;
  }
  .rose:nth-child(1) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 2.7s;
            animation: flower-3 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(3):before {
    background: #990000;
  }
  .rose:nth-child(1) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 2.7s;
            animation: flower-4 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(4):before {
    background: #fd0000;
  }
  .rose:nth-child(1) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 2.7s;
            animation: flower-5 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(5):before {
    background: #cb0000;
  }
  .rose:nth-child(1) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 2.7s;
            animation: flower-6 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(6):before {
    background: #c80000;
  }
  .rose:nth-child(1) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 2.7s;
            animation: flower-7 10s forwards 2.7s;
  }
  .rose:nth-child(1) .pedal:nth-child(7):before {
    background: #fe0000;
  }
  .pedal:nth-child(2) {
    transform: translate(-50%, 0) rotateZ(102.8571428571deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(2) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 2.25s;
            animation: flower-1 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(1):before {
    background: #9b0000;
  }
  .rose:nth-child(2) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 2.25s;
            animation: flower-2 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(2):before {
    background: #d50000;
  }
  .rose:nth-child(2) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 2.25s;
            animation: flower-3 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(3):before {
    background: #a90000;
  }
  .rose:nth-child(2) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 2.25s;
            animation: flower-4 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(4):before {
    background: #a60000;
  }
  .rose:nth-child(2) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 2.25s;
            animation: flower-5 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(5):before {
    background: #f60000;
  }
  .rose:nth-child(2) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 2.25s;
            animation: flower-6 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(6):before {
    background: #cd0000;
  }
  .rose:nth-child(2) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 2.25s;
            animation: flower-7 10s forwards 2.25s;
  }
  .rose:nth-child(2) .pedal:nth-child(7):before {
    background: #bb0000;
  }
  .pedal:nth-child(3) {
    transform: translate(-50%, 0) rotateZ(154.2857142857deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(3) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 1.8s;
            animation: flower-1 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(1):before {
    background: #e70000;
  }
  .rose:nth-child(3) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 1.8s;
            animation: flower-2 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(2):before {
    background: #d90000;
  }
  .rose:nth-child(3) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 1.8s;
            animation: flower-3 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(3):before {
    background: #920000;
  }
  .rose:nth-child(3) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 1.8s;
            animation: flower-4 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(4):before {
    background: #c60000;
  }
  .rose:nth-child(3) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 1.8s;
            animation: flower-5 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(5):before {
    background: #c70000;
  }
  .rose:nth-child(3) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 1.8s;
            animation: flower-6 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(6):before {
    background: #c60000;
  }
  .rose:nth-child(3) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 1.8s;
            animation: flower-7 10s forwards 1.8s;
  }
  .rose:nth-child(3) .pedal:nth-child(7):before {
    background: #cd0000;
  }
  .pedal:nth-child(4) {
    transform: translate(-50%, 0) rotateZ(205.7142857143deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(4) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 1.35s;
            animation: flower-1 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(1):before {
    background: #c20000;
  }
  .rose:nth-child(4) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 1.35s;
            animation: flower-2 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(2):before {
    background: #c30000;
  }
  .rose:nth-child(4) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 1.35s;
            animation: flower-3 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(3):before {
    background: #e20000;
  }
  .rose:nth-child(4) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 1.35s;
            animation: flower-4 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(4):before {
    background: #bc0000;
  }
  .rose:nth-child(4) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 1.35s;
            animation: flower-5 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(5):before {
    background: #b30000;
  }
  .rose:nth-child(4) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 1.35s;
            animation: flower-6 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(6):before {
    background: #940000;
  }
  .rose:nth-child(4) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 1.35s;
            animation: flower-7 10s forwards 1.35s;
  }
  .rose:nth-child(4) .pedal:nth-child(7):before {
    background: #c80000;
  }
  .pedal:nth-child(5) {
    transform: translate(-50%, 0) rotateZ(257.1428571429deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(5) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 0.9s;
            animation: flower-1 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(1):before {
    background: #bf0000;
  }
  .rose:nth-child(5) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 0.9s;
            animation: flower-2 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(2):before {
    background: #a60000;
  }
  .rose:nth-child(5) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 0.9s;
            animation: flower-3 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(3):before {
    background: #b60000;
  }
  .rose:nth-child(5) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 0.9s;
            animation: flower-4 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(4):before {
    background: #f50000;
  }
  .rose:nth-child(5) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 0.9s;
            animation: flower-5 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(5):before {
    background: #af0000;
  }
  .rose:nth-child(5) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 0.9s;
            animation: flower-6 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(6):before {
    background: #ad0000;
  }
  .rose:nth-child(5) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 0.9s;
            animation: flower-7 10s forwards 0.9s;
  }
  .rose:nth-child(5) .pedal:nth-child(7):before {
    background: #fc0000;
  }
  .pedal:nth-child(6) {
    transform: translate(-50%, 0) rotateZ(308.5714285714deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(6) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 0.45s;
            animation: flower-1 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(1):before {
    background: #f80000;
  }
  .rose:nth-child(6) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 0.45s;
            animation: flower-2 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(2):before {
    background: #b60000;
  }
  .rose:nth-child(6) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 0.45s;
            animation: flower-3 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(3):before {
    background: #ab0000;
  }
  .rose:nth-child(6) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 0.45s;
            animation: flower-4 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(4):before {
    background: #e20000;
  }
  .rose:nth-child(6) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 0.45s;
            animation: flower-5 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(5):before {
    background: #a80000;
  }
  .rose:nth-child(6) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 0.45s;
            animation: flower-6 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(6):before {
    background: #920000;
  }
  .rose:nth-child(6) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 0.45s;
            animation: flower-7 10s forwards 0.45s;
  }
  .rose:nth-child(6) .pedal:nth-child(7):before {
    background: #f60000;
  }
  .pedal:nth-child(7) {
    transform: translate(-50%, 0) rotateZ(360deg) rotateX(-70deg) rotateY(8deg) scale(0);
  }
  .rose:nth-child(7) .pedal:nth-child(1) {
    -webkit-animation: flower-1 10s forwards 0s;
            animation: flower-1 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(1):before {
    background: #b90000;
  }
  .rose:nth-child(7) .pedal:nth-child(2) {
    -webkit-animation: flower-2 10s forwards 0s;
            animation: flower-2 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(2):before {
    background: #b90000;
  }
  .rose:nth-child(7) .pedal:nth-child(3) {
    -webkit-animation: flower-3 10s forwards 0s;
            animation: flower-3 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(3):before {
    background: #c20000;
  }
  .rose:nth-child(7) .pedal:nth-child(4) {
    -webkit-animation: flower-4 10s forwards 0s;
            animation: flower-4 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(4):before {
    background: #d20000;
  }
  .rose:nth-child(7) .pedal:nth-child(5) {
    -webkit-animation: flower-5 10s forwards 0s;
            animation: flower-5 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(5):before {
    background: #ad0000;
  }
  .rose:nth-child(7) .pedal:nth-child(6) {
    -webkit-animation: flower-6 10s forwards 0s;
            animation: flower-6 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(6):before {
    background: #ad0000;
  }
  .rose:nth-child(7) .pedal:nth-child(7) {
    -webkit-animation: flower-7 10s forwards 0s;
            animation: flower-7 10s forwards 0s;
  }
  .rose:nth-child(7) .pedal:nth-child(7):before {
    background: #b10000;
  }
  
  @-webkit-keyframes flower-1 {
    100% {
      transform: translate(-50%, 0) rotateZ(51.4285714286deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  
  @keyframes flower-1 {
    100% {
      transform: translate(-50%, 0) rotateZ(51.4285714286deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @-webkit-keyframes flower-2 {
    100% {
      transform: translate(-50%, 0) rotateZ(102.8571428571deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @keyframes flower-2 {
    100% {
      transform: translate(-50%, 0) rotateZ(102.8571428571deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @-webkit-keyframes flower-3 {
    100% {
      transform: translate(-50%, 0) rotateZ(154.2857142857deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @keyframes flower-3 {
    100% {
      transform: translate(-50%, 0) rotateZ(154.2857142857deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @-webkit-keyframes flower-4 {
    100% {
      transform: translate(-50%, 0) rotateZ(205.7142857143deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @keyframes flower-4 {
    100% {
      transform: translate(-50%, 0) rotateZ(205.7142857143deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @-webkit-keyframes flower-5 {
    100% {
      transform: translate(-50%, 0) rotateZ(257.1428571429deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @keyframes flower-5 {
    100% {
      transform: translate(-50%, 0) rotateZ(257.1428571429deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @-webkit-keyframes flower-6 {
    100% {
      transform: translate(-50%, 0) rotateZ(308.5714285714deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @keyframes flower-6 {
    100% {
      transform: translate(-50%, 0) rotateZ(308.5714285714deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @-webkit-keyframes flower-7 {
    100% {
      transform: translate(-50%, 0) rotateZ(360deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  @keyframes flower-7 {
    100% {
      transform: translate(-50%, 0) rotateZ(360deg) rotateX(0) rotateY(8deg) scale(1);
    }
  }
  /* ================
  // Bursts
  // ============= */
  .bubbles {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
  }
  
  .bubble {
    position: absolute;
    z-index: 200;
    border-radius: 50%;
  }
  .bubble:nth-child(1) {
    top: 37%;
    left: 36%;
    height: 3vmin;
    width: 3vmin;
    -webkit-animation: love-burst 3s infinite 0s;
            animation: love-burst 3s infinite 0s;
    box-shadow: inset 0 0 0 1.5vmin #fff;
    transform: translate(0, 0.7em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(2) {
    top: 69%;
    left: 94%;
    height: 18vmin;
    width: 18vmin;
    -webkit-animation: love-burst 3s infinite 0.15s;
            animation: love-burst 3s infinite 0.15s;
    box-shadow: inset 0 0 0 9vmin #fff;
    transform: translate(0, 0.85em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(3) {
    top: 84%;
    left: 85%;
    height: 14vmin;
    width: 14vmin;
    -webkit-animation: love-burst 3s infinite 0.3s;
            animation: love-burst 3s infinite 0.3s;
    box-shadow: inset 0 0 0 7vmin #fff;
    transform: translate(0, 0.3em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(4) {
    top: 93%;
    left: 97%;
    height: 9vmin;
    width: 9vmin;
    -webkit-animation: love-burst 3s infinite 0.45s;
            animation: love-burst 3s infinite 0.45s;
    box-shadow: inset 0 0 0 4.5vmin #fff;
    transform: translate(0, 0.9em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(5) {
    top: 86%;
    left: 66%;
    height: 3vmin;
    width: 3vmin;
    -webkit-animation: love-burst 3s infinite 0.6s;
            animation: love-burst 3s infinite 0.6s;
    box-shadow: inset 0 0 0 1.5vmin #fff;
    transform: translate(0, 0.45em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(6) {
    top: 76%;
    left: 29%;
    height: 6vmin;
    width: 6vmin;
    -webkit-animation: love-burst 3s infinite 0.75s;
            animation: love-burst 3s infinite 0.75s;
    box-shadow: inset 0 0 0 3vmin #fff;
    transform: translate(0, 0.2em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(7) {
    top: 3%;
    left: 89%;
    height: 8vmin;
    width: 8vmin;
    -webkit-animation: love-burst 3s infinite 0.9s;
            animation: love-burst 3s infinite 0.9s;
    box-shadow: inset 0 0 0 4vmin #fff;
    transform: translate(0, 0.4em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(8) {
    top: 45%;
    left: 9%;
    height: 9vmin;
    width: 9vmin;
    -webkit-animation: love-burst 3s infinite 1.05s;
            animation: love-burst 3s infinite 1.05s;
    box-shadow: inset 0 0 0 4.5vmin #fff;
    transform: translate(0, 0.5em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(9) {
    top: 76%;
    left: 67%;
    height: 18vmin;
    width: 18vmin;
    -webkit-animation: love-burst 3s infinite 1.2s;
            animation: love-burst 3s infinite 1.2s;
    box-shadow: inset 0 0 0 9vmin #fff;
    transform: translate(0, 0.35em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(10) {
    top: 12%;
    left: 2%;
    height: 13vmin;
    width: 13vmin;
    -webkit-animation: love-burst 3s infinite 1.35s;
            animation: love-burst 3s infinite 1.35s;
    box-shadow: inset 0 0 0 6.5vmin #fff;
    transform: translate(0, 0.65em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(11) {
    top: 73%;
    left: 88%;
    height: 14vmin;
    width: 14vmin;
    -webkit-animation: love-burst 3s infinite 1.5s;
            animation: love-burst 3s infinite 1.5s;
    box-shadow: inset 0 0 0 7vmin #fff;
    transform: translate(0, 0.8em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(12) {
    top: 57%;
    left: 80%;
    height: 7vmin;
    width: 7vmin;
    -webkit-animation: love-burst 3s infinite 1.65s;
            animation: love-burst 3s infinite 1.65s;
    box-shadow: inset 0 0 0 3.5vmin #fff;
    transform: translate(0, 1.1em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(13) {
    top: 66%;
    left: 98%;
    height: 9vmin;
    width: 9vmin;
    -webkit-animation: love-burst 3s infinite 1.8s;
            animation: love-burst 3s infinite 1.8s;
    box-shadow: inset 0 0 0 4.5vmin #fff;
    transform: translate(0, 0.6em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(14) {
    top: 83%;
    left: 83%;
    height: 2vmin;
    width: 2vmin;
    -webkit-animation: love-burst 3s infinite 1.95s;
            animation: love-burst 3s infinite 1.95s;
    box-shadow: inset 0 0 0 1vmin #fff;
    transform: translate(0, 1.15em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(15) {
    top: 21%;
    left: 64%;
    height: 4vmin;
    width: 4vmin;
    -webkit-animation: love-burst 3s infinite 2.1s;
            animation: love-burst 3s infinite 2.1s;
    box-shadow: inset 0 0 0 2vmin #fff;
    transform: translate(0, 0.05em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(16) {
    top: 57%;
    left: 71%;
    height: 1vmin;
    width: 1vmin;
    -webkit-animation: love-burst 3s infinite 2.25s;
            animation: love-burst 3s infinite 2.25s;
    box-shadow: inset 0 0 0 0.5vmin #fff;
    transform: translate(0, 0.5em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(17) {
    top: 63%;
    left: 42%;
    height: 20vmin;
    width: 20vmin;
    -webkit-animation: love-burst 3s infinite 2.4s;
            animation: love-burst 3s infinite 2.4s;
    box-shadow: inset 0 0 0 10vmin #fff;
    transform: translate(0, 0.3em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(18) {
    top: 52%;
    left: 71%;
    height: 7vmin;
    width: 7vmin;
    -webkit-animation: love-burst 3s infinite 2.55s;
            animation: love-burst 3s infinite 2.55s;
    box-shadow: inset 0 0 0 3.5vmin #fff;
    transform: translate(0, 1.05em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(19) {
    top: 92%;
    left: 32%;
    height: 10vmin;
    width: 10vmin;
    -webkit-animation: love-burst 3s infinite 2.7s;
            animation: love-burst 3s infinite 2.7s;
    box-shadow: inset 0 0 0 5vmin #fff;
    transform: translate(0, 0.4em) scale(0);
    transform-origin: center bottom;
  }
  .bubble:nth-child(20) {
    top: 50%;
    left: 99%;
    height: 1vmin;
    width: 1vmin;
    -webkit-animation: love-burst 3s infinite 2.85s;
            animation: love-burst 3s infinite 2.85s;
    box-shadow: inset 0 0 0 0.5vmin #fff;
    transform: translate(0, 0.65em) scale(0);
    transform-origin: center bottom;
  }
  
  @-webkit-keyframes love-burst {
    50%, 100% {
      box-shadow: inset 0 0 0 0 red;
      transform: translate(0, 0) scale(1);
    }
  }
  
  @keyframes love-burst {
    50%, 100% {
      box-shadow: inset 0 0 0 0 red;
      transform: translate(0, 0) scale(1);
    }
  }
  .heart {
    fill: #fff;
    opacity: 0;
  }
  .bubble:nth-child(1) .heart {
    -webkit-animation: love 3s forwards infinite 0s;
            animation: love 3s forwards infinite 0s;
    transform: scale(0.5) rotate(-14deg);
  }
  .bubble:nth-child(2) .heart {
    -webkit-animation: love 3s forwards infinite 0.15s;
            animation: love 3s forwards infinite 0.15s;
    transform: scale(0.5) rotate(29deg);
  }
  .bubble:nth-child(3) .heart {
    -webkit-animation: love 3s forwards infinite 0.3s;
            animation: love 3s forwards infinite 0.3s;
    transform: scale(0.5) rotate(-33deg);
  }
  .bubble:nth-child(4) .heart {
    -webkit-animation: love 3s forwards infinite 0.45s;
            animation: love 3s forwards infinite 0.45s;
    transform: scale(0.5) rotate(42deg);
  }
  .bubble:nth-child(5) .heart {
    -webkit-animation: love 3s forwards infinite 0.6s;
            animation: love 3s forwards infinite 0.6s;
    transform: scale(0.5) rotate(-34deg);
  }
  .bubble:nth-child(6) .heart {
    -webkit-animation: love 3s forwards infinite 0.75s;
            animation: love 3s forwards infinite 0.75s;
    transform: scale(0.5) rotate(46deg);
  }
  .bubble:nth-child(7) .heart {
    -webkit-animation: love 3s forwards infinite 0.9s;
            animation: love 3s forwards infinite 0.9s;
    transform: scale(0.5) rotate(-35deg);
  }
  .bubble:nth-child(8) .heart {
    -webkit-animation: love 3s forwards infinite 1.05s;
            animation: love 3s forwards infinite 1.05s;
    transform: scale(0.5) rotate(24deg);
  }
  .bubble:nth-child(9) .heart {
    -webkit-animation: love 3s forwards infinite 1.2s;
            animation: love 3s forwards infinite 1.2s;
    transform: scale(0.5) rotate(-24deg);
  }
  .bubble:nth-child(10) .heart {
    -webkit-animation: love 3s forwards infinite 1.35s;
            animation: love 3s forwards infinite 1.35s;
    transform: scale(0.5) rotate(29deg);
  }
  .bubble:nth-child(11) .heart {
    -webkit-animation: love 3s forwards infinite 1.5s;
            animation: love 3s forwards infinite 1.5s;
    transform: scale(0.5) rotate(-28deg);
  }
  .bubble:nth-child(12) .heart {
    -webkit-animation: love 3s forwards infinite 1.65s;
            animation: love 3s forwards infinite 1.65s;
    transform: scale(0.5) rotate(18deg);
  }
  .bubble:nth-child(13) .heart {
    -webkit-animation: love 3s forwards infinite 1.8s;
            animation: love 3s forwards infinite 1.8s;
    transform: scale(0.5) rotate(-25deg);
  }
  .bubble:nth-child(14) .heart {
    -webkit-animation: love 3s forwards infinite 1.95s;
            animation: love 3s forwards infinite 1.95s;
    transform: scale(0.5) rotate(13deg);
  }
  .bubble:nth-child(15) .heart {
    -webkit-animation: love 3s forwards infinite 2.1s;
            animation: love 3s forwards infinite 2.1s;
    transform: scale(0.5) rotate(-30deg);
  }
  .bubble:nth-child(16) .heart {
    -webkit-animation: love 3s forwards infinite 2.25s;
            animation: love 3s forwards infinite 2.25s;
    transform: scale(0.5) rotate(7deg);
  }
  .bubble:nth-child(17) .heart {
    -webkit-animation: love 3s forwards infinite 2.4s;
            animation: love 3s forwards infinite 2.4s;
    transform: scale(0.5) rotate(-7deg);
  }
  .bubble:nth-child(18) .heart {
    -webkit-animation: love 3s forwards infinite 2.55s;
            animation: love 3s forwards infinite 2.55s;
    transform: scale(0.5) rotate(49deg);
  }
  .bubble:nth-child(19) .heart {
    -webkit-animation: love 3s forwards infinite 2.7s;
            animation: love 3s forwards infinite 2.7s;
    transform: scale(0.5) rotate(-23deg);
  }
  .bubble:nth-child(20) .heart {
    -webkit-animation: love 3s forwards infinite 2.85s;
            animation: love 3s forwards infinite 2.85s;
    transform: scale(0.5) rotate(33deg);
  }
  
  @-webkit-keyframes love {
    50% {
      fill: red;
      opacity: 1;
    }
  }
  
  @keyframes love {
    50% {
      fill: red;
      opacity: 1;
    }
  }
  /* ================
  // Structure
  // ============= */
  html,
  body {
    height: 100%;
  }
  
  html {
    overflow-y: auto;
    overflow-x: hidden;    
    font-family: "Petit Formal Script";
    background: radial-gradient(ellipse at center, #ffffff, #bfbfbf 100%);
    color: #fff;
  }