@import url("https://fonts.googleapis.com/css?family=Sniglet");
@import url("https://fonts.googleapis.com/css?family=Patrick+Hand");

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

html #background,
body #background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  /*-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);*/
}

a
{
  text-decoration: none;
}

a.boton {

  display: inline-block;
  font: normal 22px/25px "Patrick Hand", sans-serif;
  margin-right: 10px;
  color: navy;
  padding-bottom: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 #000;
  transition: padding 0.1s, box-shadow 0.1s, top 0.1s;
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==');
}

a.boton:hover {
  box-shadow: 0 2px 0 #000, 0 2px 0px 2px #f03755;
}

a.boton span {
  background: #FFF;
  display: block;
  padding: 5px 15px;
  border-radius: 5px;
  border: 2px solid #000;
}

a.boton span:hover
{
  background: navy;
  color: white;
}

a.boton:active {
  top: 4px;
  padding-bottom: 0px;
  box-shadow: 0 1px 0 #000;
}

.garza {
  width: 310px;
  height: 310px; 
  margin: 35px auto;
  margin-bottom: 20px;
  background-image: url(../garza.png);
  background-size: cover;
}

.waving {
  perspective: 1000px;
  -moz-perspective: 1000px;
}
.waving > * {
  display: inline-block;
  font-size: 6rem;
  font-weight: 700;
  font-family: Sniglet;
  color: #fff;
  transform-origin: top;
  animation: waving 1s infinite ease-in-out;
  animation-fill-mode: backwards;
  
}
.waving > *:nth-child(1) {
  animation-delay: 0.12s;
}
.waving > *:nth-child(2) {
  animation-delay: 0.24s;
}
.waving > *:nth-child(3) {
  animation-delay: 0.36s;
}
.waving > *:nth-child(4) {
  animation-delay: 0.48s;
}
.waving > *:nth-child(5) {
  animation-delay: 0.6s;
}
.waving > *:nth-child(6) {
  animation-delay: 0.72s;
}
.waving > *:nth-child(7) {
  animation-delay: 0.84s;
}
.waving > *:nth-child(8) {
  animation-delay: 0.96s;
}
.waving > *:nth-child(9) {
  animation-delay: 1.08s;
}
.waving > *:nth-child(10) {
  animation-delay: 1.2s;
}
.waving > *:nth-child(11) {
  animation-delay: 1.32s;
}
.waving > *:nth-child(12) {
  animation-delay: 1.44s;
}
.waving > *:nth-child(13) {
  animation-delay: 1.56s;
}
.waving > *:nth-child(14) {
  animation-delay: 1.68s;
}
.waving > *:nth-child(15) {
  animation-delay: 1.8s;
}
.waving > *:nth-child(16) {
  animation-delay: 1.92s;
}
.waving > *:nth-child(17) {
  animation-delay: 2.04s;
}
.waving > *:nth-child(18) {
  animation-delay: 2.16s;
}
.waving > *:nth-child(19) {
  animation-delay: 2.28s;
}
.waving > *:nth-child(20) {
  animation-delay: 2.4s;
}

@keyframes waving {
  0% {
    transform: rotateX(30deg) translateY(0);
    text-shadow: 0px 3px 0px #ccc, 0px 10px 10px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: rotateX(45deg) translateY(-20px);
    text-shadow: 0px 3px 0px #ccc, 0px 55px 20px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: rotateX(30deg) translateY(0);
    text-shadow: 0px 3px 0px #ccc, 0px 10px 10px rgba(0, 0, 0, 0.5);
  }
}

.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1);
  }
  24% {
    transform: scale(1.03);
    transition-timing-function: ease-in;
  }
  31% {
    transform: scale(1);
    transition-timing-function: ease-out;
  }
  41% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.96);
  }
  49% {
    transform: scale(1.3);
  }
  52% {
    transform: scale(0.92);
  }
  55% {
    transform: scale(1);
  }
  69% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.06);
    transition-timing-function: ease-in;
  }
  86% {
    transform: scale(1);
    transition-timing-function: ease-out;
  }
  100% {
    transform: scale(1);
  }
}

.corazon
{
  color: #fff;
  font-family: "Sniglet";
  font-size: 3em;
  margin-top: 5px;
  text-align: center;
  -webkit-text-stroke: 1px navy;
}

@media only screen and (max-width: 720px) {

.waving > * {
  
  font-size: 3rem;
  
  }


}