* {
  font-family: Georgia, "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: white;
}

body .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  justify-content: end;
}

.container {
  height: 300px;
  width: 40%;
  margin-right: 20%;
  margin-top: 100px;
}

.container .title {
  font-size: 40px;
}

.container .buttons .btn {
  height: 40px;
  width: 70px;
  background-color: transparent;
  color: rgba(242, 71, 104, 0.8);
  cursor: pointer;
}

.container .btn:hover {
  color: white;
}

.container .result {
  padding-top: 100px;
}

.container .result .aspas {
  font-size: 50px;
  color: rgb(158, 0, 236);
}

.container .result .aspas-dois {
  display: flex;
  justify-content: end;
  font-size: 50px;
  color: rgb(158, 0, 236);
}

.container #frase {
  font-size: 40px;
  font-style: italic;
}

.container #frase::before {
  content: '" ';
  color: rgb(158, 0, 236);
}

.container #frase::after {
  content: ' "';
  color: rgb(158, 0, 236);
}

.shape {
  background: linear-gradient(64.009163468deg, rgb(243, 72, 104) 23.44140625%, rgb(242, 71, 104) 23.44140625%, rgb(158, 0, 236) 79.84765625%);
  animation: wave 4s ease-in-out infinite;
}

.shape:nth-of-type(1) {
  width: 800px;
  height: 800px;
  position: absolute;
  top: -200px;
  left: -400px;
  opacity: 0.3;
  z-index: -1;
}

@keyframes wave {

  0%,
  100% {
    border-radius: 70% 30% 72% 28%/27% 61% 39% 73%;
  }

  50% {
    border-radius: 77% 23% 54% 46%/40% 38% 62% 60%;
  }
}

/*# sourceMappingURL=style.css.map */


@media only screen and (max-width: 600px) {
  /* Estilos para smartphones em modo retrato */

  main {
    display: flex;
    justify-content: center;

  }

  .container {
    margin: 100px 0;
    width: 80%;
  }

  .shape:nth-of-type(1) {
    width: 800px;
    height: 800px;
    position: absolute;
    top: -200px;
    left: -400px;
    opacity: 0.2;
    z-index: -1;
  }

  .container #frase {
    font-size: 30px;
    font-style: italic;
  }


}

@media only screen and (min-width: 601px) and (max-width: 767px) {
  /* Estilos para smartphones em modo paisagem */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Estilos para tablets */
}

@media only screen and (min-width: 1280px) {
  /* Estilos para desktops médios e grandes */
}