body {
 background: url("/Imágenes/hauntología.jpg") no-repeat;
 background-attachment: fixed;
 background-size: 100%
}

.encabezado{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-bottom: 8.5px
  }
  
  .contenido{
   background:black;
   border: 2px solid #ccc;
   font-family: "Candara";
   margin: 15px 300px 50px 300px;
   padding: 15px 0;
   border-radius:20px;
   text-align: justify
  }
  
  .contenidopoema{
   background:black;
   border: 2px solid #ccc;;
   font-family: "Candara";
   width: fit-content;
   margin: 15px auto 50px auto;
  padding: 0 50px 0 50px;
  border-radius:20px
  }
  
  .contenidoretales{
   background:black;
   border: 2px solid #ccc;
   font-family: "Candara";
   margin: 15px 300px 12px 300px;
   padding: 15px 0;
   border-radius:20px;
   text-align: justify
  }
  
  .introretales{
   background:black;
   border: 2px solid #ccc;
   font-family: "Candara";
   margin: 15px 300px 12px 300px;
   padding: 0 0;
   border-radius:20px;
   text-align: justify;
   color: #FCBBF0
  }
  
  .finretales{
   background:black;
   border: 2px solid #ccc;
   font-family: "Candara";
   margin: 15px 300px 50px 300px;
   padding: 15px 0;
   border-radius:20px;
   text-align: justify
  }
  
h1 {
  font-size: 70px;
  text-align: center;
  align-self: center;
  color:white;
  font-family: "Mistral";
  background-color:black;
  width: calc(100% - 600px);
  min-width: fit-content;
  margin-bottom: 12px;
  padding:13px 13px 13px 13px;
  border: 2px solid #ccc;
    border-radius:20px;
    letter-spacing: 5px
}

.tituloretazos{
   font-size: 70px;
  text-align: center;
  align-self: center;
  color:white;
  font-family: "Mistral";
  background-color:black;
  width: calc(100% - 600px);
  min-width: fit-content;
  margin-bottom: 12px;
  padding:13px 13px 13px 13px;
  border: 2px solid #ccc;
    border-radius:20px;
    letter-spacing: 5px;
    font-weight:bold
}
h2{
font-size: 18px;
background: #D1CCCB;
 padding: 15px 0 15px 0;
 text-align: center;
 color:black;
 word-spacing:175px;
 margin:0 0 0 0;
 
}
h3{
 text-align: center;
 font-family: "Vivaldi";
 font-size: 27px;
 padding: 19px 0 12px 0;
    background: url("/Imágenes/Sylveon.gif") no-repeat;
 background-position:56% 100%;
 background-size:4%
}

.poema{
 text-align:center;
  font-size: 18px;
  line-height:2; 
  }

p{
  font-size: 18px;
  line-height:2;
    Background-color:black;
    color:white;
  padding: 0 50px 0 50px;
  font-family: "candara";
}


a{
 color: #FCBBF0
}

img{
  display: block;
  margin: 25px auto 25px auto;
  max-width: 65%;
  max-height: 350;
  background: black
}

 .boton{
 display:inline-block;
 font-size: 20px;
font-family: "Candara";
text-align:center;
color: black;
background: #D1CCCB;
padding: 3px 25px 3px 25px;
margin: 12px 0 12px 0;
border-radius:20px;
text-decoration:none;
font-weight: bold
}
.boton:hover{
 background: black;
 color: #FCBBF0
}
.boton:active{
 color: #dabbfc 
}

.columnas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      background: black;
      margin: 0 300px 0 300px;
      color:white;
      border: 2px solid #ccc;
      padding-bottom:0;
      font-family: "Candara";
      border-radius:20px
    }
 .columna {
      background: black;
      padding-bottom:0;
      font-family: "Candara";
      border-radius:20px;
      text-align:center;
      }

.dedicatoria {
  text-align: right;
  margin-left: 400px
 }
 
 .italic {
  font-style: italic;
  text-align: center
 }
 
 .cursiva{
   font-style: italic
 }
 
 .cita{
 text-align: right  
 }
 
 hr{
   height: 1px;
  margin: 25px 300px 25px 300px; 
  background:#D1CCCB
 }
  
@media (orientation: portrait) { 
  
  body{
   background-color: #12171b 
  }
  
  body::before{
  background: url("/Imágenes/Fondo-Post.jpeg") center / cover no-repeat;
  content: "";
  position:fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:-1
   }
.encabezado{
  margin: -159% -8.3px 0 -8.3px;
}
.contenido{
  font-size: 20px;
  margin-left: 15%;
  margin-right: 15% 
}
p {
 font-size: 25px 
}
.poema{
 font-size: 25px 
}
h1{
    letter-spacing:0;
     font-size:50px;
     min-width: 68%;
 margin: 0 15% 12px 15%;
 padding: 13px 0 13px 0;
      }
.tituloretazos{
  letter-spacing:0;
     font-size:50px;
     min-width: 80%;
 margin: 0 10% 12px 10%;
 padding: 13px 0 13px 0;
 font-weight:bold
  }
  
  .retazos{
   min-width:80% 
  }

.dedicatoria {
  text-align: right;
  margin-left: 200px
 }
 
 .columnas{
   margin: 0 10% 0 10% ;
   gap: 0;
   justify-content:center
 }
 .boton{
  margin: 12px 0 12px 10px 
 } 
 hr{
  margin: 25px 200px 25px 200px 
 }
 
  .contenidoretales{
   margin: 15px 10% 12px 10%;
   padding: 15px 0;
   
  }
  
  .introretales{
    margin: 15px 10% 12px 10%;
   padding: 0 0;
     }
  
  .finretales{
    margin: 15px 10% 50px 10%;
   padding: 15px 0;
   
  }

   }