/* =========================
   FLOATING LOVE QUOTES
========================= */

.floating-quotes{
  position:fixed;

  inset:0;

  overflow:hidden;

  pointer-events:none;

  z-index:4;
}

.floating-quote{
  position:absolute;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:30px;

  font-style:italic;

  font-weight:500;

  color:
    rgba(255,255,255,.34);

  text-shadow:
    0 0 24px rgba(255,255,255,.16),
    0 0 40px rgba(255,255,255,.08);

  white-space:nowrap;

  user-select:none;

  letter-spacing:.5px;

  backdrop-filter:blur(1px);

  animation:
    floatQuote linear infinite;
}

/* DIFFERENT SIZES */

.floating-quote.small{
  font-size:22px;
  opacity:.22;
}

.floating-quote.medium{
  font-size:30px;
  opacity:.30;
}

.floating-quote.large{
  font-size:42px;
  opacity:.38;
}

/* FLOAT ANIMATION */

@keyframes floatQuote{

  from{
    transform:
      translateY(110vh)
      translateX(0px)
      rotate(-2deg);

    opacity:0;
  }

  10%{
    opacity:1;
  }

  90%{
    opacity:1;
  }

  to{
    transform:
      translateY(-120vh)
      translateX(50px)
      rotate(2deg);

    opacity:0;
  }

}

/* GOLD TINT */

.floating-quote.gold{
  color:
    rgba(212,176,123,.42);

  text-shadow:
    0 0 30px rgba(212,176,123,.30),
    0 0 60px rgba(212,176,123,.16);
}

/* MOBILE */

@media(max-width:768px){

  .floating-quote{
    font-size:20px;
  }

  .floating-quote.large{
    font-size:30px;
  }

}