* {
  margin:0;
  padding:0;
  color: black;
}

h1, h2, h3, h4, h5, h6, p {
  font-family: 'Shadows Into Light', cursive;
}


/* grid container */
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: .5fr .5fr .8fr 0.8fr;
  grid-template-rows: 1fr .5fr 1.2fr 1.2fr auto;
  grid-template-areas:
    'header header header header'
    'nav nav nav nav'
    'sidebar main main main'
    'sidebar content1 content2 content3'
    'sidebar footer footer footer';
  /* grid-gap: 1rem; */
  /* grid-column-gap: 1rem; */
}

.header {
  grid-area:header;
  display:grid;
  overflow: hidden;
  width:100%;
  background-image: url(../images/gradient.png);
  background-size: cover;
  background-repeat:no-repeat;
  padding:0;
 
}

footer img {
  width:4%;
}

/* navigation */

nav {
  grid-area: nav;
  display:grid;
 }

nav ul {
  padding-right: 2rem;
  background-color:#0e79be;
  text-align:right; 
}


nav li {
  display:inline-grid; 
  font-size: 1.8em;
  padding: 0 .4rem 0 .4rem;
  font-family: 'Shadows Into Light', cursive;
  color:white;
 }



 nav a {
  color:white;
  text-decoration: none;
 }

 nav a:hover {
  color: #2e752e
 
 }

 #current {
   color:black;
   font-size:1.5em;
 }

/* index */
main {
  grid-area: main;
  display:grid;
  background-color:white;
  /* border-style:solid;
  border-color: black;
  border-width:1px; */
  padding:1rem;
}

main h2  {
  font-size: 1.5em;
  color:black;
  font-family: 'PT Sans Narrow', sans-serif;
}

main h4  {
  font-size: 1.5em;
  color:black;
}

main img {
  box-shadow: 10px 10px 20px grey;
  border-radius: 15px 25px;
}

main h5  {
  font-size: 1.5em;
  color:black;
  font-family: 'PT Sans Narrow', sans-serif;
}

/* about us page */

.main1 {
  grid-area: main;
  display:grid;
  /* border-style:solid;
  border-color: black;
  border-width:1px; */
  padding:1rem;
}

.main1 h2  {
  font-size: 1.5em;
  color:black;
 
}

.main1 h4  {
  font-size: 1.5em;
  color:black;
  font-family: 'PT Sans Narrow', sans-serif;
}

.main1 img {
  box-shadow: 10px 10px 20px grey;
  border-radius: 15px 25px;
}

/* loved page */
.main_loved {
  grid-area: main;
  display:grid;
  background-color:white;
  padding:1rem;
}

.main_loved h2  {
  font-size: 1.5em;
  color:black;
  padding-bottom: 2rem;
 
}

.main_loved ul  {
  font-size: 1em;
  color:black;
  padding-left:2rem;
  padding-top:2rem;
  font-family: 'PT Sans Narrow', sans-serif;
 
}

.main_loved h4  {
  font-size: 1.5em;
  color:black;
  font-family: 'PT Sans Narrow', sans-serif;
}


.sidebar_loved {
  background-color:#0e79be;
  display:grid;
 grid-column-start:1;
  grid-column-end:1;
  grid-row-start:2;
  grid-row-end:5;
}


.sidebar1 {
  background-color:#0e79be;
  display:grid;
 /* grid-column-start:1;
  grid-column-end:1;
  grid-row-start:2;
  grid-row-end:5; */
  grid-area: sidebar;
  padding:1rem;
}


.blue {
  color:#0e79be;
}

.sidebar {
   grid-area: sidebar;
   background-color:white;
   display:grid;
   padding:1rem;
}

.sidebar h2 {
  margin-bottom:0%;
  font-family: 'Shadows Into Light', cursive;
}
.sidebar h5 {
  font-size:1.5em;
  font-family: 'PT Sans Narrow', sans-serif;
  margin-top:0%;
}

/* email buttons */

.content1 {
  grid-area: content;
  display:grid;
  background-color:white;
  grid-column-start:2;
  grid-column-end:5;
  grid-row-start:4;
  grid-row-end:5;
  /* border-style:solid;
  border-color: black;
  border-width:1px; */
  padding:1rem;
}

.content1  h2  {
  font-size: 1.5em;
  color:black;
  font-family: 'PT Sans Narrow', sans-serif;
}

.content1  h4  {
  font-size: 1.5em;
  color:black;
}

.content1  img {
  box-shadow: 10px 10px 20px grey;
  border-radius: 15px 25px;
}

.content1  h5  {
  font-size: 1.5em;
  color:black;
  font-family: 'PT Sans Narrow', sans-serif;
}




/* footer */
footer {
  grid-area: footer;
  display:grid;
  width: 100%;
  height: 100px;
  left: 0;
  /* margin-bottom:-200px; */
  text-align: center;
  background-color: white;
  color:#0e79be;
  /* border-style:solid;
  border-color: black;
  border-width:1px; */
 
 
}

footer h4 {
  padding-top:2%;
  font-style: italic;
  font-size:1.5em;
  color:#0e79be;
 
}

footer p {
  color:white;
  display:inline;
}

footer a {
  color:#0e79be;
  display:inline;
  text-decoration: none;
}

@media only screen and (max-width: 550px) {
  .container {
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
    grid-template-areas:
      'header' 
      'sidebar' 
      'nav'
      'main'
      'main'
      'main'
      'content1'
      'content1'
      'content1'
      'footer';
  }
}