/* font converted using font-converter.net. thank you! */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap');
/* font-family: 'Noto Sans JP', sans-serif; */

@font-face {
  font-family: "Misses";
  src: url("../fonts/Misses.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Misses.oft"), /* IE9 Compat Modes */  
    url("../fonts/Misses.otf"); /* Open Type Font */
}

.main-content .item {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 0vh;
  flex-wrap: wrap;
  background-color: none;
}

a.boton {
  background: #fff;
  color: #000;
  border: 3px solid #fff;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font-family: 'Noto Sans JP', sans-serif;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
}

.name {
  width: 100%;
  text-align: center;
  padding: 0 0 3rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.button-jittery a.boton {
  animation: jittery 4s infinite;
}
.button-jittery a.boton:hover {
  animation: heartbeat 0.2s infinite;
}

@keyframes jittery {
  5%,
	50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}
@keyframes heartbeat {
  50% {
    transform: scale(1.1);
  }
}