@font-face {
  src: url('/fonts/gilroy-extrabold.eot');
  font-family: 'Gilroy-ExtraBold';
  src: url('/fonts/gilroy-extrabold.woff2') format('woff2'), url('/fonts/gilroy-extrabold.woff') format('woff'), url('/fonts/gilroy-extrabold.eot?#iefix') format('embedded-opentype'), url('/fonts/gilroy-extrabold.ttf') format('truetype');
}
@font-face {
  src: url('../fonts/gilroy-light.eot');
  font-family: 'Gilroy-Light';
  src: url('../fonts/gilroy-light.woff2') format('woff2'), url('../fonts/gilroy-light.woff') format('woff'), url('../fonts/gilroy-light.eot?#iefix') format('embedded-opentype'), url('../fonts/gilroy-light.ttf') format('truetype');
}
body,
html {
  background: #f10c49;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Gilroy-ExtraBold", cursive;
}

h1 {
  margin: 0;
  font-size: 8em;
  padding: 0;
  color: white;
  text-shadow: none;
}
h1 span {
  transform: scale(0.9);
  display: inline-block;
}
h1 span:first-child {
  -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
          animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
h1 span:last-child {
  -webkit-animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
          animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}

@-webkit-keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%, 100% {
    transform: scale(1);
  }
}

@keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%, 100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%, 100% {
    transform: scale(1) rotateZ(-3deg);
  }
}
@keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%, 100% {
    transform: scale(1) rotateZ(-3deg);
  }
}