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

.Cassette {
 text-align: center;
 max-width: 75%
}

.encabezado{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  margin: 0 -8.3px 0 -8.3px
}


h1 {
  font-size: 70px;
  text-align: center;
  color:white;
  font-family: "Mistral";
  background-color:black;
  margin: 0 50px 12px 50px;
  padding:13px 0 13px 0;
  letter-spacing:7px;
  border: 2px solid #ccc;
  border-radius:20px
}


h2{
font-size: 50px;
font-family: "Mistral";
text-align:center;
color: black;
background: #D1CCCB;
margin: 30px 20px 20px 20px;
border-radius:20px
}


h2:hover{
  background:black
}


h3{
text-align: center;
 font-family: candara;
 font-size: 25px;
 padding: 0 0 0 0;
    }


h4{
  text-align:center
}


.firma{
 text-align: center;
 font-family: "Vivaldi";
 font-size: 27px;
 padding: 0 0 12px 0;
    background: url("/Imágenes/Sylveon.gif") no-repeat;
 background-position:61% -5%;
 background-size:7%;
 background-color:black
}


p {
  text-align: center;
  font-size: 18px;
  line-height:2;
  padding: 20px 20px 0 20px;
  font-family: candara
}


a{
 color: #FCBBF0
}


a.navigation{
 color:black;
 text-decoration:none;
 text-align:center
}


a.navigation:hover{
 color: #FCBBF0;
 background-color:black;
}

a.navigation2{
 color:white;
 text-decoration:none;
 text-align:center
}


a.navigation2:hover{
 color: #FCBBF0;
 background-color:black;
}


.columnas {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      gap: 25px;
      background: transparent;
      margin: 50px 50px 50px 50px;
      color:white
    }
    

 .columna {
      background: black;
      border: 2px solid #ccc;
      padding-bottom:0;
      font-family: "Candara";
      border-radius:20px
    }
    
    
    .columnacentro {
      background: black;
      border: 2px solid #ccc;
      padding-bottom:0;
      font-family: "Candara";
      border-radius:20px
    }





.movil{
    display:none
}

@media (orientation: portrait) { 
  body{
background: url("/Imágenes/Fondo-Post.jpeg") no-repeat;
 background-attachment: fixed;
 background-size: 100%
}

.encabezado{
  margin: 35% 0 0 0;
}
h1{
 margin:0 30PX 0 30PX;
 border-radius:20px
}
h2{
 font-size:25px;
 padding: 2px;
 text-decoration:underline
}
 .columnas{
  margin: 50px 30px 12PX 30px;
 }
.firma{
  background-position:75% 20%;
 background-size:14%;
 margin-top:0;
 padding-top:12px
}
.intro{
 margin-bottom:0 
}
.movil{
  display:block;
  color: #FCBBF0;
  background: black;
margin: 50PX 30px 20px 30px;
padding: 10px 0 10px 0;
border: 2px solid #ccc;
border-radius:20px
}

a.navigation2{
 color:#FCBBF0;
 text-decoration:none;
 text-align:center
}

    }