<div class="container">
  <h2>Modal HTML</h2>
  <p>¿Es posible crear una ventana modal solo con HTML, sin necesidad de usar Javascript? ¡Por supuesto! Y aquí tenemos un ejemplo.</p>
  <button onclick="window.modal1.showModal();">Abrir  ventana modal</button>
  <dialog id="modal1">
  <h3>¡Esto es una ventana modal!</h3>
    <p>Y no le falta detalle. Su contenido, su botón parar cerrar, su fondo con color personalizado... ¡Tiene de todo!</p>
    <p>Hablando del botón para cerrar, vamos a hacer clic en él para ver si todo funciona como debería.</p>
  <button onclick="window.modal1.close();">Cerrar</button>
</dialog>
  <p>Construir una ventana modal solo con HTML es muy sencillo. Solo es necesario saber que atributos y valores hay que aplicar a cada uno de los elementos.</p>
  <p>Incluso podemos tener varios botones, cada uno de ellos enlazados a diferentes ventanas modales, con diferentes contenidos.</p>
  <button onclick="window.modal2.showModal();">Otra ventana modal</button>
  <dialog id="modal2">
  <h3>¡Otra ventana modal diferente!</h3>
    <p>Podemos crear tantas botones y ventanas modales como queramos en nuestro diseño, siempre teniendo en cuenta de enlazar bien cada botón con el elemento HTML <i>dialog</i> que debe abrir.</p>    
  <button onclick="window.modal2.close();">Cerrar</button>
</dialog>
</div>

body {
  margin: 0;
  padding: 0;
  background-color: #321c3b;
}

h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0;
  color: #eacee3;
}

h2 {
  font-size: 4rem;
  color: #eacee3;
  margin-bottom: 35px;
}

h3 {
  font-size: 2.5rem;
  color: #321c3b;  
}

p {
  font-family: 'Lato', sans-serif;
  font-size: 1.4rem;  
  color: #fff;
}

.container {
  padding: 20px;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
}

button {
  cursor: pointer;
  border-radius: 0;
  border: none;
  background-color: #eacee3;
  color: #321c3b;
  padding: 20px 35px;
  margin: 30px 0 20px 0;
  font-size: 1.2rem;
  text-transform: uppercase;  
  font-weight: 700;  
  transition: box-shadow 0.25s ease-in-out;
  box-shadow: 0px 0px 0 #fff;
}

button:hover {
  box-shadow: 8px 8px 0 #fff;
}

dialog {
  max-width: 650px;
  padding: 40px 70px;
  border: 8px solid #321c3b;
  background-color: #FAFAFA;
}

dialog::backdrop {
  background: rgba(234, 206, 227, 0.9);
}

dialog p {
  color: #321c3b;
}

dialog button {
  box-shadow: 0px 0px 0 #321c3b;
}

dialog button:hover {
  box-shadow: 8px 8px 0 #321c3b;
}