* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(106, 81, 197);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-wrap: wrap;
  background-color: #eee;
  padding: 2rem 3rem;
  gap: 2rem;
  border-radius: .5rem;
  box-shadow: 5px 5px 10px rgba(33, 33, 33, 0.5);
  margin: 4rem;
}

span {
  font-weight: 600;
  color: #666;
}

.dynamicPhrase {
  text-align: center;
  font-size: 1.8rem;
}

.otroChiste {
  padding: 1rem 2rem;
  border-radius: .5rem;
  border: none;
  background-color: rgb(156, 105, 190);
  color: #fff;
  font-size: 1rem;
  box-shadow: 3px 3px 5px rgba(33, 33, 33, 0.2);
  cursor: pointer;
}

.otroChiste:hover {
  filter: brightness(0.9);
}

.otroChiste:active {
  font-size: 0.95rem;
}