/* Assignment 10 styles */

body {
  background: darkcyan;
  font-size: 15px;
  /* font-family: sans-serif; */
  font-family: 'Averia Sans Libre', italic;
}

h1,
h2,
h3 {
  /* font-family: serif; */
  font-family: 'Bungee';
  font-weight: normal;
  padding-bottom: 0.6em;
}

main h2 {font-family: 'Averia Sans Libre', bold;}

h2 {font-size:1.25em;}
h3 {font-size:1.1em;}

p {
  margin-bottom: 1.8em;
  line-height: 1.8em;
}

strong {
    font-family: 'Bungee';
    font-size: 14px;
    color: darkslategray
}
em {
    font-family: 'Averia Sans Libre', italic;
    font-size: 18px;
    color: rgb(3, 64, 3)
}

hr {
  border: 4px solid lightslategray;
  margin: 20px 0;
}

li {
    margin-left: -10px;
}

header,
/* nav, */
main,
/* section, */
aside,
footer {
  padding: 1.5em;
  /* border-radius: inherit; */
  border: 1px darkblue solid;
}

header,
footer {
  text-align: center;
  border-radius: inherit;
}

main {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

aside {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  /* background: rgb(86, 234, 86); */
  border-radius: 25px;
  /* border: 1px darkblue solid; */
  display: grid;
  width: 100vw;
  /* height: 100vh; */
  grid-template-columns: /* Can change these values to spit page into half, thirds, etc */
   1fr       2fr       1fr;
  grid-template-areas:
  "heady     heady     heady"
  "navvy     navvy     navvy"
  "mainy    mainy     aside1"
  "mainy    mainy     aside1"
  "mainy    mainy     aside1"
  "footy     footy     footy";
}

header {grid-area: heady; background:Papayawhip;}
/* nav {grid-area: navvy; background:Peachpuff;} */
main {grid-area: mainy; background: powderblue; max-height: 100%;}
#aside1 {grid-area: aside1; background: mediumaquamarine;}
/* #aside2 {grid-area: aside2; background: lavender;} */
footer {grid-area: footy; background: lightsteelblue;}

/* Keeping these for future */
/* nav ul {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}

nav ul li {
  list-style: none
} */


/* -------------------------------------------------- */
/* Media Queries */
@media screen
  and (min-width: 641px)
  and (max-width: 900px)  {
.container {
grid-template-columns:
   1fr 1fr;
grid-template-areas:
  "heady heady"
  "navvy navvy"
  "mainy mainy"
  "aside1 aside1"
  "footy footy";
}

main, aside {
    border-radius: inherit;
}
}/* end tablet media query */

@media screen
  and (max-width: 640px)  {
.container {
grid-template-columns:
   1fr;
grid-template-areas:
  "heady"
  "mainy"
  "aside1"
  /* "aside2" */
  "navvy"
  "footy";
}

main, aside {
    border-radius: inherit;
}

/* Keeping for future */
/* nav ul {
  flex-flow: column nowrap;
  text-align: center;
}
nav ul li a {
  display: block;
  padding: 10px 5px;
  margin: 5px;
  border: 1px black solid;
  background: white;
} */

}  /* end mobile media query */