/* VARIABLES. colors. either --"color" or var(--"color")  */
:root{
    --grey: #4B5158;
    --blue: #CEEAF7;
    --lightblue: #CAD5E3;
    --lavender: #D5C9DF;
    --pink: #DCB8CB;
}

/* @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;500&display=swap');  */

body {

  display: grid;
  margin: 0;
  grid-template-rows: 10em 50vh auto 10em;
  grid-template-columns: .5fr 2.5fr minmax(25em, 6fr) .5fr;
  grid-template-areas:
  "nav header header header" 
  "hero hero hero hero" 
  ". aside main ."
   "footer footer footer footer" ;
  
  font-family: 'Work Sans', sans-serif;
}

header{
	grid-area: header;
  font-size:large;
}

header a{
  text-decoration: none;
  color: #4B5158;
}

nav{
	grid-area: nav;
	background-color: var(--blue);
}

header, footer{
	background-color: var(--blue);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* subtitle */
.hero{
	grid-area: hero;
  display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;   
}

/* img for the subtitle */
#home{
  background-image: url("../images/home.jpg");  
  background-size: 100%;  
}

#eggs{
  background-image: url("../images/a-basket-of-eggs.jpg"); 
  background-size: 100%;
}


#pasta{
  background-image: url("../images/pasta.jpg"); 
  background-size: 100%;
}

#potatoes{
  background-image: url("../images/potatoes.jpg"); 
  background-size: 100%;
}

#soup{
  background-image: url("../images/soup.jpg"); 
  background-size: 100%;
}

/* content of the subtitle */
.hero-title{
	font-size: 3em;
	margin: 0;
	padding: .5em;
  text-shadow: var(--lavender) 0px 0px 10px;;
}

/* aside. info about the page */
aside{
	grid-area: aside;
    background-color: var(--blue);
	margin-right: 1.5em;
	padding: 1.5em;

}
main{
	grid-area: main;

}
footer{
	grid-area: footer;
}

/* cards */
.card {
  display: grid;
  grid-template-rows: min-content auto;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
  "img title"
  "img content";
  grid-column-gap: 1.5em;
  box-shadow: 0 0 .5em rgba(0, 0, 0, 0.5);
  padding: 1.5em;
  margin: 1.5em;
	background-color: var(--pink)
}

.card-img {
  grid-area: img;
  max-width: 100%;
}

.card-title {
  grid-area: title;
  margin: 0;
  font-weight: 300;

}
.card-title a{
  color:#4B5158;
}
.card-content {
  grid-area: content;
	  
}
 .card-content a {
 
  font-size: 1.1em;
	color: var(--grey);
}

/* media queries for when it gets too big. test:DONE! */
@media (max-width: 50rem){
	body{
	grid-template-rows: 10em 40vh auto auto 10em;
 	grid-template-columns: .5fr 2fr minmax(30em, 5fr) 0.5fr;
  grid-template-areas:
  	"nav header header header" 
  	"hero hero hero hero" 
	". aside aside ."
  	". main main ."
   	"footer footer footer footer";
	}

}