.title,
#status {
  position: absolute;
  width: 748px;
  height: 196px;
  left: 116px;

  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 96px;
  line-height: 116px;

  color: white;
  animation: load 1s;
}

.play-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin: auto;
  width: 384px;
  height: 106px;
  left: 528px;
  top: 400px;
}

/* CSS */
.button {
  background-color: #111827;
  border: 1px solid transparent;
  border-radius: .75rem;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: .75rem 1.2rem;
  text-align: center;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;

  position: absolute;
  height: 60px;
  bottom: 50px;
}

.button:hover {
  background-color: #374151;
}

.button:focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .button {
    padding: .75rem 1.5rem;
  }
}

.yes-button {
  width: 160.2px;
  left: 385px;
}

.no-button {
  width: 156.89px;
  left: 898.62px;
}

.neutral-button {
  width: 260.94px;
  left: 591.44px;
}

.mbti-header {
  position: absolute;
  width: 1021px;
  height: 116px;
  left: 209px;
  top: -50px;

  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 96px;
  line-height: 100px;

  color: white;
  animation: load 1s;
}

.mbti {
  position: absolute;
  width: 267px;
  height: 155px;
  left: 586px;
  top: 150px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 128px;
  line-height: 155px;
  /* identical to box height */

  color: white;
  animation: mbti-load 3s;
}

@keyframes load {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 100%;
    transform: translateY(0);
  }
}

@keyframes mbti-load {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  90% {
    opacity: 0;
    visibility: visible;
  }

  100% {
    opacity: 1;
  }
}

body {
  background: url("https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  height: 700px;
  z-index: -1;
}


.fa-solid fa-pause {
  z-index: 1000;
  position: relative;
}