/* Estilo da linha horizontal */
hr {
  width: 800px;
  margin: auto;
}
/* Estilo do elemento principal */
main {
  height: 1fr;
}
/* Estilo da caixa de redação */
main .redacao_box {
  width: 600px;
  height: 1fr;
  margin: auto;
}
/* Estilo do tema */
main .tema {
  font-size: 2.5em;
  text-align: center;
  margin: 50px auto 25px;
  width: 600px;
}
/* Estilo da redação */
main .redacao {
  width: 500px;
  height: 700px;
  margin: 20px auto 100px auto;
  filter: blur(4px);
  animation-duration: 0.3s;
  animation-name: blur-back;
  display: flex;
  transition: transform 0.3s;
  position: relative;
  z-index: 0;
}
/* Estilo das imagens dentro do elemento principal */
main img {
  width: inherit;
  height: inherit;
  border-radius: 20px;
}
/* Estilo da redação ao passar o mouse */
main .redacao:hover {
  animation-duration: 0.3s;
  animation-name: blur;
  transform: scale(1.07);
  filter: blur(0);
  z-index: 2;
}
/* Estilo das imagens dentro do elemento de redação */
main .redacao img {
  width: 500px;
}
/* Estilo do texto sobreposto */
.sobreposto {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 32px;
  position: absolute;
  width: 482px;
  height: 700px;
  background-color: rgba(255, 255, 255, 0.836);
  z-index: 1;
  margin-left: 40px;
  padding: 28px;
  text-align: justify;
}
/* Estilo do texto sobreposto ao passar o mouse */
.sobreposto:hover {
  z-index: 0;
  opacity: 0;
  transition: 0.4s;
}
/* Animação de desfoque */
@keyframes blur {
  0% {
    filter: blur(4px);
  }
  50% {
    filter: blur(2px);
  }
  100% {
    filter: blur(0px);
  }
}
/* Animação de desfoque de volta */
@keyframes blur-back {
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(2px);
  }
  100% {
    filter: blur(4px);
  }
}
/* Estilos para telas menores */
@media (max-width: 992px) {
  /* Redefinição da largura da caixa de redação */
  main .redacao_box {
    width: 400px;
    height: 1fr;
    margin: auto;
  }
  hr {
    width: 600px;
    margin: auto;
  }
  /* Redefinição do tamanho do tema */
  main .tema {
    font-size: 2em;
    text-align: center;
    margin: 50px auto 25px;
    width: 300px;
  }
  /* Redefinição do tamanho da redação */
  main .redacao {
    width: 300px;
    height: 400px;
  }
  /* Redefinição do tamanho das imagens dentro do elemento de redação */
  main .redacao img {
    width: 100%;
    height: 110%;
  }
  /* Redefinição do tamanho do texto sobreposto */
  .sobreposto {
    font-size: 1em;
    width: 300px;
    height: 400px;
    margin-left: 20px;
  }
}