.modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* Fundo escuro */
}

.modal-content {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    width: 100%; /* Opcional, para ocupar toda a largura da tela */
    height: 100vh; /* Opcional, para ocupar toda a altura da tela */
    /* position: absolute; /* Para posicionar o botão de fechar */

}

.close-button {
  background-color: red;
  transition: 0.2s;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute; /* Posicionamento absoluto */
  top: 31%;
  right: 39%;
  cursor: pointer; /* Para indicar que é clicável */
}

.close-button:hover {
    color: red;
    background-color: rgb(219, 219, 219);
    cursor: pointer
}

@media screen and (min-width: 576px){
    .modal-content {
        margin: auto;
        border-radius: 1.25rem;
    }
}