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

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

header {
    display:grid; 
    grid-template-columns: 20% auto ;
    padding: 2%;
}


header nav {align-self: self-end ; text-decoration: none;}
header nav ul {text-align: right;}
header nav ul li {display: inline-block;}
header nav ul li a {color: black ; text-decoration: none;}
header nav ul li {list-style-type: none;}


figure{display: grid; grid-template-columns: 100%;
    background-color: green;
    margin-top: 30px;
    
    }
figure img {width: 100%;}
figure figcaption {color:aliceblue; text-align: center; align-self: flex-end;}


section {display: grid; grid-template-columns: 70% 30%;}
section aside { padding: 2%;}
h1 {font-family: 'Roboto', sans-serif; font-weight: 700; color: rgb(27, 82, 59); font-size: 2rem ;}
h2 {font-family: 'Roboto', sans-serif;font-weight: 700; color: rgb(27, 82, 59);font-size: 1rem;}


footer {
    background: url(../img/fresas.webp);
    color: aliceblue;
    font-weight: bold;
    text-align: center;
    padding: 5rem;
    background-size: cover;
}


/*responsive */
@media (max-width:40rem){
    body {background: red;}
    section {display: grid; grid-template-columns: 100%;}
    footer {padding: 1 rem;}
    figure{display: grid; grid-template-columns: 100%}


}