* {
    box-sizing: border-box;
    background-color: none;
}

main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 5% 95%;
    justify-items: center;
    margin: 5px;
}
p{
    margin:0;
}

main h1 {
    grid-row: 1/2;
    grid-column: 1/4;
    font-family: 'Anton', sans-serif;
    font-family: 'Carter One', cursive;
    color: #22150B;
    -webkit-text-stroke: #22150B solid 2px;

}

.cosas {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 40%;
    justify-content: flex-start;
    gap: 20px;
}


article button {

    margin: 10px;
    height: 50px;
    width: 120px;
    font-size: 18px;
    border: #22150B solid 1px;
}

.verMas {
    margin-top: 20px;
}

.verMas a,
.boton p {
    text-align: center;
    text-decoration: none;
    color: #22150B;
}

button:hover {
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.414), inset -4px -4px 10px rgba(0, 0, 0, 0.25);

}

.verMas button a:hover {
    text-decoration: none;
    color: #22150B;
}

.boton {

    grid-row: 2/3;
    height: 55px;
    border: #22150B 1px solid;
    border-radius: 20%;
}


.boton:active {
    transform: rotate(10deg);
}

.boton:hover p {
    color: #DECEBC;
}

.boton:hover {

    background-color: #22150B;
}

.titulo {
    font-family: 'Anton', sans-serif;
    font-family: 'Carter One', cursive;
    font-size: 45px;
    color: #22150B;
    font-weight: 300;
    text-align: left;
    text-shadow: -4px -4px 10px rgba(136, 82, 0, 0.553), 4px 4px 10px rgba(136, 82, 0, 0.37);
}


.sub {
    font-size: 20px;
    text-shadow: none;
}
h1{
    font-size: 45px;
}

input {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
}


/* PRODUCTOS */

.fondosProducto {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 70% 30%;
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.414), inset -4px -4px 10px rgba(0, 0, 0, 0.25);

    text-align: center;
    height: 240px;
    background-color: none;

}

.producto {
    grid-row: 1/2;
    height: 180px;

}

.descripcion {
    padding: 10px;
    color: #DECEBC;
    display: grid;
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.414), inset -4px -4px 10px rgba(0, 0, 0, 0.25);
    align-items: center;
    height: 60px;
    background-color: #22150bb4;

}

/* PRODUCTOS */

.fondosProducto {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 70% 30%;
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.414), inset -4px -4px 10px rgba(0, 0, 0, 0.25);
    text-align: center;
    height: 240px;
    background-color: #22150bb4;

}

.producto {
    grid-row: 1/2;
    height: 180px;

}

.descripcion {
    margin-top: 12px;
    color: #DECEBC;
    display: grid;
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.414), inset -4px -4px 10px rgba(0, 0, 0, 0.25);
    align-items: center;
    height: 60px;
    background-color: #22150bb4;

}



@media screen and (max-width: 640px) {

    body {
        display: grid;
        grid-template-rows: 4.5% 89.5% 5%;
        gap: 5px;
    }

    main {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 3% 97%;
        justify-items: center;
        margin: 5px;
    }
    

    .cosas {
        justify-content: center;
    }

    article {
        text-align: center;
    }

    .titulo {
        text-align: center;
    }



}

@media screen and (min-width: 640px) and (max-width: 1000px) {
    /* CUERPO */

    body {
        display: grid;
        grid-template-rows: 8% 89% 5%;
        gap: 10px;
    }





}

@media screen and (min-width: 1000px) {

    /* CUERPO */

    body {
        display: grid;
        grid-template-rows: 14% 81% 5%;
        gap: 10px;
    }




}