@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");

html, body {
    height: 100%;
    margin: 0;
    position: relative;
    font-family: 'Poppins';
    background: #322f2f;
}

h2 {
  margin: 0;
  font-size: 5rem;
  padding: 0;
  color: white;
  text-shadow: 0 0.1em 20px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
    0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1),
    0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
    -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);
}

span {
    transform: scale(0.9);
    display: inline-block;
}
span:first-child {
animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite
    alternate;
}
span:last-child {
animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
    infinite alternate;
}

.bgImages {
    background-image: url("/src/images/forestway-with-sunshine.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.siteHeadline {
    color: #ffffff;
    opacity: .7;
    display: inline-block;
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%);
}

@media(min-width: 768px) {
    h2 {
        font-size: 8.5rem;
    }
}

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