/*styles go here*/

html {
    font-size: 100%;
  }

p {
	color: black;
	font-family: "Merriweather", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;

}

#first-paragraph-style {
  color: black;
  font-weight: bold;
}

#container {
	text-align: center;
	font-family: Georgia, "Times New Roman", sans-serif;

}

#header {
	text-align: center;
	color: skyblue;
	/*font-family: cursive;*/
	font-family: "Merriweather Sans", Georgia, "Times New Roman", serif;
  font-size: 3rem;
	/*font-size: 0.8em;*/
}

#nav {
	list-style-type: none;
	padding: 0;
}

#nav a:link, a:visited {
	display: block;
	color: white;
	background-color: skyblue;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	padding: 10px;
}

#nav a:hover, a:active {
	background-color: goldenrod;
}

.navigation{
  list-style: none;
  background: steelblue;
  margin:0;
  padding: 0;
  display: flex;
  flex-flow:column;
}

@media (min-width:800px) {
	.navigation {
		flex-flow: row;
		justify-content: flex-end;
	}
	.navigation a{
  border-top:none;
  border-bottom:none;
  }
	.navigation a:hover{
  background:gold;
  }

  .container {
  flex-flow: row;
}


.aside-1{
  background: gold;
}

.aside-2{
  background: steelblue;
}



  #first-paragraph-style {
    width: 100%;
    grid-area: a;
  }
  .nav {
    grid-area: b;
  }
  #second-paragraph-style  {
    grid-area: c;
  }
  .list {
    grid-area: d;
  }
  }


@media screen and (min-width: 600px) {
#article{
	display: grid;
	grid-template-columns: 200px 1fr 1fr;
	grid-gap: 20px;
    grid-template-areas: 
      "a b b c"
      ". . . e"
      ". d d .";

  }

}

/*@media screen and (min-width: 800px) {


}*/



@media screen and (min-width: 1000px){
  article {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-template-areas:
        "a b b c"
        ". . . e"
        ". . d d";
  }


}