.situacion-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.caja {
  text-decoration: none;
  padding: 15px;
  font-weight: 400px;
  font-size: 1.2rem;
  color: #666565;
  background-color: #e7b4ccda;
  border-radius: 27px;
  border: 2px solid #828282;
  float: none;
  text-align: center;
  margin: 25px;
  width: auto;
}

.box {
  text-decoration: none;
  padding: 15px;
  font-weight: 400px;
  font-size: 20px;
  color: #020202;
  background-color: #cfcfcf;
  border-radius: 27px;
  border: 2px solid #828282;
  float: none;
  text-align: center;
  margin: 25px;
  width: auto;
}

.timide {
  display: none;
  padding: 5px 0;
  animation: heartBeat;
  animation-duration: 5s;
  animation-delay: 10s;
  animation-iteration-count: 7;
}

.sociable {
  display: none;
  padding: 5px 0;
  animation: heartBeat;
  animation-duration: 5s;
  animation-delay: 10s;
  animation-iteration-count: 7;
}

#responder {
  display: none;
}

#decision {
  display: inherit;
}

.reloj {
  padding: 10px;
  font-size: 20px;
  color: #fffdfd;
  background-color: #1b1b1bda;
  border-radius: 27px;
  border: 2px solid #828282;
  margin: 1px;
  width: fit-content;
  margin-left: auto;
  display: flex;
  flex-direction: row;
}

.reloj p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.puntos-hora {
  animation: heartBeat;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 16;
}

@media screen and (max-width: 800px) {
}