@font-face {font-family: merrychristmas;src: url(../fonts/merry-christmas/MerryChristmasFlake.ttf);}@font-face {font-family: clausly;src: url(../fonts/clausly/ClauslyFont.ttf);}@font-face {font-family: ChristmasDelight;src: url(../fonts/christmas-delight/ChristmasDelight\ ttf.ttf);}@font-face {font-family: feelingLovely;src: url(../fonts/feeling_lovely/Feeling\ Lovely.ttf);}*{margin: 0;padding: 0;box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;}body{flex-wrap: wrap;position: relative;width: 100%;height: 100vh;}#particles-js{position: fixed;width: 100%;height: 100vh;z-index: -1;}.center{display: flex;justify-content: center;align-items: center;}.tarjeta{position: relative;flex-wrap: wrap;width: 90%;max-width: 1100px;height: 90vh;color: white;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);backdrop-filter: blur(5px);}.tarjeta.animate{backdrop-filter: blur(0);box-shadow: none;transition: all 0.5s linear;overflow: hidden;}.tarjeta.animate.play{box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);backdrop-filter: blur(5px);}.title{align-self: flex-start;width: 100%;margin: 10px;text-align: center;font-size: 7vw;text-shadow: 0px 0px 4px black;letter-spacing: 3px;padding: 5px;}.title.animate{transform: translateY(50vh);opacity: 0;font-size: 7vw;}.title.animate.play{animation: title_amistad 2s forwards ease-in-out;}.title.animate.play2{transform: translateY(0);opacity: 1;font-size: 7vw;filter: hue-rotate(0deg);color: red;}.title span{display: inline-block;font-family: feelingLovely;}@keyframes textoDance {0%, 40%, 100% {transform: translateY(0);}20%{transform: translateY(-50px);}}.contenido{position: relative;align-self: flex-start;width: 50%;height: 30%;overflow: hidden;}.contenido.animate{position: absolute;top: 0;left: 0;z-index: -15;transform: translate(50%, 50%);width: 0;height: 0;overflow: hidden;}.contenido video{width: 100%;height: 100%;object-fit: cover;}.contenido.animate video{opacity: 0.5;}.contenido.animate.play{animation: contenido_amistad 2s forwards ease-in-out;}#contadorNavideno{position: absolute;top: 0;left: 50%;transform: translateX(-50%);align-self: flex-start;width: 90%;max-width: 600px;font-size: 2vw;}.block{flex-wrap: wrap;width: 25%;}.numero{width: 100%;text-align: center;font-size: 1.5em;}.block span{font-family: merrychristmas;}.footer{align-self: flex-start;width: calc(50% - 20px);height: 50%;margin: 0 10px;}.footer.animate{opacity: 0;width: 100%;transition: all 0.5s ease-in;}.footer.animate.play{opacity: 1;}.footer p{margin: 5px 10px;padding: 5px;font-size: 4vh;text-shadow: 0px 0px 4px black;}.to{font-family: clausly;}#texto{max-width: 1000px;padding: 5px 15px;font-family: clausly;}.from{display: block;text-align: right;font-family: ChristmasDelight;}.btn{position: absolute;bottom: 0;left: 0;width: 45px;height: 45px;cursor: pointer;}.btn i{display: block;font-size: 1.8em;transition: all .5s;animation: btn 3s infinite ease-in-out;}.btn i:hover{color: gray;}@keyframes btn{50%{font-size: 1em;};}.modal{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.9);font-family: clausly;font-size: 5vh;overflow: hidden;transition: all 0.5s linear;}.message{position: relative;flex-wrap: wrap;width: 90%;max-width: 600px;height: 250px;padding: 10px;background: url(../img/gift.jpg);background-size: cover;background-position: center center;color: white;text-align: center;text-shadow: 0px 0px 8px red;}.message .cont__btn{position: relative;width: 100%;height: 45px;}.message .btn{left: 50%;transform: translateX(-50%);width: 200px;background: rgba(255,255,255,0.3);border-radius: 5px;transition: all 0.3s;}.message .btn:hover{background: rgba(255,255,255,0.5);}.modal.close{top: 50%;height: 0;}.bk__video{position: absolute;z-index: -2;width: 100%;height: 100%;object-fit: cover;}.new-year{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;font-size: 2.5em;font-family: merrychristmas;opacity: 0;}.new-year span{font-family: 'Courier New', Courier, monospace;}@keyframes animacion{100%{opacity: 1;font-size: 3.5em;}}@keyframes title_amistad{0%{transform: translateY(50vh);opacity: 0;font-size: 25vw;filter: hue-rotate(0deg);color: red;}25%{opacity: 1;font-size: 5vw;}50%{opacity: 1;font-size: 15vw;filter: hue-rotate(360deg);}100%{transform: translateY(0);opacity: 1;font-size: 7vw;filter: hue-rotate(0deg);color: red;}}@keyframes contenido_amistad{0%{opacity: 1;transform: translate(50%, 50%);border-radius: 50%;}75%{border-radius: 50%;}100%{opacity: 1;transform: translate(0%, 0%);width: 100%;height: 100%;border-radius: 0;}}.caracter{backdrop-filter: blur(5px);text-shadow: 0 0 4px red;font-size: 5vw;}#mickey{position: absolute;z-index: -1;opacity: 0.0;transition: all 0.3s ease-in;}#mickey.play{animation: mickey 6s ease-in-out infinite;}#cupido.play{animation: cupido 12s ease-in-out infinite;}.footer__footer{width: 100%;color: white;font-weight: 900;}.footer__footer i{color: red;}.footer__footer a{color: aqua;font-family: cursive;font-style: italic;}@keyframes cupido{0%{transform: translate(50%, 50%) rotateY(90deg);}10%{transform: translate(0%, 0%) rotateY(0deg);}25%{transform: translate(-100%, -100%) rotateY(10deg);}30%{transform: translate(100%, -100%) rotateY(90deg);}50%{transform: translate(50%, -100%) rotateY(90deg);}60%{transform: translate(0%, 0%) rotateY(20deg);}75%{transform: translate(0%, -100%) rotateY(180deg);}80%{transform: translate(-50%, -100%) rotateY(0deg);}100%{transform: translate(100%, 100%) rotateY(180deg);}}@keyframes mickey{0%{opacity: 0.2;transform: rotateY(90deg);}20%{transform: rotateY(0deg);}40%{transform: rotateY(180deg);}60%{transform: rotateY(0deg);}80%{transform: rotateY(-180deg);}100%{opacity: 0.2;transform: rotateY(90deg);}}@media (min-width:480px){.contenido{width: 100%;}.footer{width: 100%;}.footer p{margin: 5px 10px;font-size: 5vh;}}@media (min-width:720px){.contenido{height: 35%;}}@media (min-width:1170px){.title{font-size: 4vw;}.caracter{font-size: 5vh;;}.contenido{width: 100%;height: 40%;}.footer{width: 100%;}@keyframes title_amistad{0%{transform: translateY(50vh);opacity: 0;font-size: 25vw;filter: hue-rotate(0deg);color: red;}25%{opacity: 1;font-size: 5vw;}50%{opacity: 1;font-size: 15vw;filter: hue-rotate(360deg);}100%{transform: translateY(0);opacity: 1;font-size: 4vw;filter: hue-rotate(0deg);color: red;}}}