@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;900&display=swap');

body{
    font-family: 'Roboto', sans-serif;
    transition: all 2s;
    }

header{
    display: grid;
    grid-template-columns: 85% 15%;
    padding: 1.2rem 1rem 1rem 1rem;
}

header nav{
    align-self:self-end;
    font-weight: 300;
}

header nav ul{
    text-align: right;
}

header nav ul li{
    display: inline-block;
}

header nav ul li a{
    color:black; 
    text-decoration:none;
}

h1{
    font-weight:900;
    padding-top: 3rem;
}

figure{
    display: grid;
    grid-template-columns: 50% 50%;
    background: rgb(2, 49, 2);
}

figure img{
    width: 65%;
}

figure figcaption{
    color:white;
    text-align: center;
    align-self: center;
}

section{
    display: grid;
    grid-template-columns: auto auto auto;
}

.receta{
    padding-bottom: 3rem;
}

aside{
    padding-right:5%;
}

footer{
    background-image: url('../img/fresas.webp');
    color:white;
    text-align: center;
    padding: 3.5rem;
    background-size: cover;
}

@media (max-width:720px) {
    body{
        background:red;
    }

    figure{
        padding:2rem;
    align-items:center;
    }

    section {grid-template-columns: 1fr;
    }
    .receta{padding:2rem;
    text-align:center; 
    }


}