/**
 * ----------------------------------------
 * Created by me0wt3x
 * ----------------------------------------
 */

 /* ----------------------------------------------
 * Animations generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation tracking-in-expand
 * animation tracking-out-expand
 * ----------------------------------------
 */

 @-webkit-keyframes tracking-in-expand {
   0% {
     letter-spacing: -0.5em;
     opacity: 0;
   }

   40% {
     opacity: 0.6;
   }

   100% {
     opacity: 1;
   }
 }

 @keyframes tracking-in-expand {
   0% {
     letter-spacing: -0.5em;
     opacity: 0;
   }

   40% {
     opacity: 0.6;
   }

   100% {
     opacity: 1;
   }
 }



 /* Reset base styles  */
 * {
   padding: 0px;
   margin: 0px;
   border: none;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 body {
   background-color: #FBECD7;
 }

 .love {
   opacity: 0;
 }

 .container {
   background-color: #FBECD7;
   height: 100vh;
 }

 .letter {
   background: #FBECD7 url(background_2x.jpg) top left/contain no-repeat;
   height: 100vh;
   min-height: 720px;
   min-width: 450px;
 }

 .letter-content {
   position: absolute;
   top: 24%;
   left: 160px;
   padding-right: 1rem;
   min-width: 165px;
 }

 @media (min-width: 400px) {
   .letter-content {
     left: 44%;
   }
 }

 @media (min-width: 540px) {
   .letter-content {
     top: 24%;
     left: 44%;
   }

   .letter {
     height: 80vh;
   }
 }

 @media (min-width: 900px) {
   .letter-content {
     top: 24%;
     left: 440px;
   }
 }


 .animate.tracking-in-1s {
   -webkit-animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s both;
   animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s both;
 }

 .animate.tracking-in-2s {
   -webkit-animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2s both;
   animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2s both;
 }

 .animate.tracking-in-3s {
   -webkit-animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 3s both;
   animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 3s both;
 }

 .animate.tracking-in-5s {
   -webkit-animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 5s both;
   animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 5s both;
 }

 .animate.tracking-out {
   -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) reverse both;
   animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) reverse both;
 }