body {
  background-image: url(Images/Backsplash.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 1em;
  background-size: cover;
}

.container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25% ;
  grid-template-rows: auto;
  grid-template-areas:
   "navbar navbar navbar navbar"
   "maincontent maincontent none sidebar"
   "maincontent maincontent none sidebar"
   "content1 content2 content3 content4"
   "footer footer footer footer";
}

li {
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

li a {
  text-decoration: none;
  color: black;
}

.navbar {
  background-color: #00CED1;
  grid-area: navbar;
  text-align: center;
  display: inline-grid;
  font-family: 'Fredoka One', cursive;
}

header img {
  float: left;
  padding-left: 2em;
  padding-top: 0.5em;
}

nav {
  display: inline;
}

ul {
  display: inline-flex;
}

nav ul li {
  display: inline;
  padding: 10px;
  color: black;
  padding-left: 1em;
  padding-right: 1em;
  font-size: large;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}

.maincontent {
  background-color: #ff983d;
  grid-area: maincontent;
  padding: 1em;
    margin-top: 1em;
    border-radius: 2em;
    filter: opacity(0.8);
}


h1 {
  font-family: 'Fredoka One', cursive;
}

h3 {
  font-family: 'Ubuntu Condensed', sans-serif;
}

.sidebar {
  background-color: #ff983d;
  grid-area: sidebar;
  text-align: center;
  padding: 1em;
    margin-top: 1em;
    border-radius: 2em;
    filter: opacity(0.6);
}

h4 {
  font-family: 'Fredoka One', cursive;
}

p{
  font-family: 'Ubuntu Condensed', sans-serif;
}

.content1 {
  background-color: #ff983d;
  grid-area: content1;
    margin-top: 10em;
    text-align: center;
    font-weight: bold;
    filter: opacity(0.6);
    border-radius: 2em;
    font-family: 'Fredoka One', cursive;
}

.content2 {
  background-color: #ff983d;
  grid-area: content2;
  margin-top: 10em;
    text-align: center;
    font-weight: bold;
    filter: opacity(0.6);
    border-radius: 2em;
    font-family: 'Fredoka One', cursive;
}

.content3 {
  background-color: #ff983d;
  grid-area: content3;
    margin-top: 10em;
    text-align: center;
    font-weight: bold;
    filter: opacity(0.6);
    border-radius: 2em;
    font-family: 'Fredoka One', cursive;
}

.content4 {
  background-color: #ff983d;
  grid-area: content4;
  margin-top: 10em;
  text-align: center;
  font-weight: bold;
  filter: opacity(0.6);
  border-radius: 2em;
  font-family: 'Fredoka One', cursive;
}

footer {
  background-color: #00CED1;
  grid-area: footer;
  color: black;
  margin-top: 10em;
  text-align: center;
  font-weight: bold;
  padding: 0.5em;
  font-family: 'Ubuntu Condensed', sans-serif;
}



@media only screen and (max-width: 768px){
   .container {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     grid-template-areas:
     "navbar"
     "maincontent"
     "sidebar"
     "content1"
     "content2"
     "content3"
     "content4"
     "footer";
   }

   nav ul li {
     font-size: 0.8em;
   }

   .content1{
     margin-top: 2em;
   }

   .content2 {
     margin-top: 2em;
   }

   .content3 {
     margin-top: 2em;
   }

   .content4 {
     margin-top: 2em;
   }

   footer {
     margin-top: 3em;
   }
}

@media only screen and (max-width: 480px) {
  header img {
    padding-left: 0.5em;
    block-size: 35px;
  }

  ul {
    font-size: small;
  }
}