body,
h1,
p,
button {
  margin: 0px;
  padding: 0px;
}
body {
  background: radial-gradient(circle at center, #f6ffea, #e9f6d9);
  font-family: "Quicksand", sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
h1 {
  margin: 100px 120px 0px 120px;
  font-size: 2.25rem;
  font-weight: 400;
  color: #212121;
}
h1 span {
  color: #33500f;
}
.opcoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  padding: 20px 0px;
  gap: 20px;
  margin: 40px 120px;
}
.btn {
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #f3faea;
  background: #5f862f;
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  color: #33500f;
  background: linear-gradient(
    to right,
    rgba(176, 207, 136, 0.6),
    rgba(102, 158, 30, 0.6)
  );
}
.resultado {
  width: 100%;
  font-size: 2.25rem;
  padding: 60px 0px;
  background: linear-gradient(
      to right,
      rgba(176, 207, 136, 0.6),
      rgba(102, 158, 30, 0.6)
    ),
    url("./star.svg") no-repeat center right 60px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
.resultado-texto {
  margin: 0px 120px;
  color: #212121;
  max-width: 40ch;
}
@media (max-width: 800px) {
  h1 {
    margin: 40px 60px;
    font-size: 2rem;
  }
  .opcoes {
    justify-content: start;
    margin-bottom: 20px;
  }
  .opcoes,
  .resultado-texto {
    margin: 0px 60px;
  }
  .resultado-texto {
    font-size: 2rem;
  }
  .resultado {
    padding: 40px 0px;

    background: linear-gradient(
      to right,
      rgba(176, 207, 136, 0.6),
      rgba(102, 158, 30, 0.6)
    );
  }
}
@media (max-width: 500px) {
  h1 {
    margin: 20px 20px;
  }
  .opcoes,
  .resultado-texto {
    margin: 0px 20px;
  }
  .btn {
    font-size: 0.875rem;
    padding: 4px 8px;
  }
}

.resultado-texto {
  opacity: 1;
  transition: opacity 0.4s ease;
}