/* podemos seleccionar los estilos por medio de
ETIQUETAS, por ejemplo div

Para cambiar estilos en una etiqueta solo debo de 
escribir su nombre
*/
/*

div{
}
color: rgb(255, 0, 191); */
    
    /* podemos seleccionar los estilos por medio de
    CLASES 
    
    Para cambiar estilos en una etiqueta solo debo de 
    escribir un punto antes de su nombre, por ejemplo
    .class*/
    
    .container{
    background-color: #62edd1;
    display:grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(3,1fr) ;
    row-gap: 10px;
    column-gap: 10px;
    padding: 20px;
    margin:0 auto;
    border: 10px solid rgb(209, 219, 9);
    }
    
    .container div{
    border-radius: 15px;
    text-align: center;
    display: grid;
    place-items: center;
    }
    
    
    .container div img{
    height: 70px;
    width: 70px;
    }
    
    .item1{
        background-color: #f4dcf0;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start:1;
        grid-row-end:2;
    }
    .item2{
        background-color:#fafbfb;
        grid-column-start: 3;
        grid-column-end: 6;
        grid-row-start:1;
        grid-row-end:2;
        color: black;
    }
    
    .item3{
        background-color:#f4dcf0;
        grid-column-start: 6;
        grid-column-end: 9;
        grid-row-start:1;
        grid-row-end:4;
        display:grid;
        grid-template-rows: repeat(6, 1fr);
    }
    
    .item3 #spine{
        grid-row-start:1;
        grid-row-end:2;
    }
    
    .item3 #letters{
        grid-row-start:2;
        grid-row-end:3;
    }
    
    #food_package{
        grid-row-start: 3;
        grid-row-end: 7;
        width: 220px;
        height: 240px;
    
    }
    
    .item4{
        background-color: #f4dcf0;
        color: black;
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start:2;
        grid-row-end:3;
    }
    .item5{
        background-color:#7b5299;
        grid-column-start: 4;
        grid-column-end: 6;
        grid-row-start:2;
        grid-row-end:3;
    }
    
    .item5 img{
        
        border-color: white;
        border-radius: 900px;
    }
    
    .item6{
        background-color: #fafbfb;
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start:3;
        grid-row-end:4;
    }
    .item7{
        background-color: rgb(255, 255, 0);
    }