html   {
    
    background-image: url("imagenes/IMG_2220.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    font-family:fantasy;
    color: darkorchid

}



.layout {
    
    display: grid;
    grid-template-columns: 1fr 2.5fr; /* cada 1fr es una fraccion del espacio disponible */
    gap: 20px;

}



head {
    
 
    
}



body    {
    color:darkmagenta; 
    font-family: fantasy;
    text-align: center


}



.cabecera  {
    
    display:flex;
    align-items:center;
    gap: 20px;
    
    background-color: ;
    background-image: ;
    
    border: 2px double darkorchid; /* ej: 4px solid red */
    border-radius: 20px ; /* cuanto se redondean las esquinas ej: 50px*/
    
    color:darkorchid;
    text-align:center;
    font-family: fantasy;
    font-size: 20px;
    
    padding: 20px;
        
    grid-column: 1 / 3; /* el 3 es el numero de lineas divisorias que delimitan las 2 columnas. El numero a la izquierda del / es en la linea donde empeiza y el numero a la derecha del / es la linea donde acaba la seccion. 
    
    Tambien se puede hacer con grid-column: span 2, es decir, ocupa dos columnas */
   
    
}



a  {
    color:darkmagenta;
 
}



a:hover {
    
    color:darkkhaki
}



h1 {
    color:aliceblue;
    text-align: left;
    text-shadow: 0px 0px 10px lightyellow;

}



.todo  { 

    color:darkorchid;
    font-size: 20px;
    text-align: left;
    
    background-image: url("imagenes/ganchillo.png");
    background-size:contain;
    background-repeat: no-repeat;
    background-size: 215%;
    background-position: center;
    
    border: 2px solid darkorchid;
    padding: 20px;
    border: 2px double darkmagenta; 
    border-radius: 20px; 


}



.guestbook {
    
    color: darkorchid;
    font-family: iniciales;
    border: 2px double darkorchid;
     border-radius: 20px; 
    padding: 20px;
    
}



.poema {
    
    border: 2px solid darkorchid;
    border-radius: 20px; 
    padding: 20px;
    grid-column: 1/3;
    
    font-family: "Playwrite GB S Guides", cursive;
    font-weight: 400;
    font-style: normal
}



.boton2:hover {
    filter: drop-shadow(0 0 5px darkkhaki) drop-shadow(0 0 40px darkkhaki);
    transform: scale(1.3);
    transform: rotate(-10deg);
}
.boton2 {
    transition: 0.2s;
    transition: transform 0.9s;
}



/* fonts embeded codes*/
.playwrite-gb-s-guides-regular {
  font-family: "Playwrite GB S Guides", cursive;
  font-weight: 400;
  font-style: normal;
}

.playwrite-gb-s-guides-regular-italic {
  font-family: "Playwrite GB S Guides", cursive;
  font-weight: 400;
  font-style: italic;
}


/* fonts descargadas*/
@font-face  { 
    font-family: inciales;
    src: url("FloralCapitals.ttf");

}