@-webkit-keyframes pop {
  50% {
    transform: scale(1.2);
  }
}
@keyframes pop {
  50% {
    transform: scale(1.2);
  }
}
@-webkit-keyframes red-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 40, 30, 0.6);
  }
  80% {
    box-shadow: 0 0 0 13px rgba(255, 40, 30, 0.3);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 40, 30, 0);
  }
}
@keyframes red-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 40, 30, 0.6);
  }
  80% {
    box-shadow: 0 0 0 13px rgba(255, 40, 30, 0.3);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 40, 30, 0);
  }
}
@-webkit-keyframes orange-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 124, 0, 0.6);
  }
  80% {
    box-shadow: 0 0 0 13px rgba(255, 124, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 124, 0, 0);
  }
}
@keyframes orange-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 124, 0, 0.6);
  }
  80% {
    box-shadow: 0 0 0 13px rgba(255, 124, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 124, 0, 0);
  }
}
body {
  background: #afa0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    top,
    #eceeff 0%,
    #ffffff 19%,
    #ffffff 74%,
    #afa0ff 100%
  );
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

button {
  font-family: sans-serif;
  cursor: pointer;
  margin: 0em;
  border-radius: 50px 30px 2px 5px;
  font-size: 3em;
  padding: 0.3em 1em;
  font-weight: bold;
  text-shadow: 3px 3px 0px white, 0px 2px 0 white, -2px 0 0 white,
    0 -2px 0 white;
  border: black solid;
  border-right-width: 15px;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 10px;
}
button:focus,
button:active {
  color: white;
  outline: none;
  text-shadow: 3px 3px 0px black, 0px 2px 0 black, -2px 0 0 black,
    0 -2px 0 black;
  -webkit-animation: pop 80ms linear 1, red-pulse 700ms ease-out infinite;
  animation: pop 80ms linear 1, red-pulse 700ms ease-out infinite;
  box-shadow: 0 0 0 5px rgba(255, 40, 30, 0.6);
}

.main {
  background: #ff281e;
}

.second {
  background: #ff7c00;
  border-radius: 3px 50px 3px 30px;
}
.second:focus,
.second:active {
  -webkit-animation: pop 80ms linear 1, orange-pulse 700ms ease-out infinite;
  animation: pop 80ms linear 1, orange-pulse 700ms ease-out infinite;
}

.button-container {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}