.container {
    display: grid;
    grid-template-columns: 0.2fr 1fr 1fr;
    grid-template-rows: 1.5fr 4fr 4fr 1.2fr; 
    
    grid-template-areas: "sidebar nav nav"
                         "sidebar header header"
                         "sidebar box1 box2"
                         "sidebar footer footer";

}
.nav{
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    background-color: lightcoral;
  
}

.header {
     grid-column: 2 / 4;   
    grid-row: 2 / 3;
    background-color: lightgreen;
}
.sidebar{
     grid-column: 1 / 2;   
    grid-row: 1 / 5;
    background-color: lightblue;}
.box1 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        background-color: lightyellow;
}
.box2 {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
        background-color: lightpink;
}

.footer {
        grid-column: 2 / 4;
        grid-row: 4 / 5;
    background-color: lightgray;
}



body {
  margin: 0;
  padding: 0;
  background: linear-gradient(gold,white);
  background-image: -moz-radial-gradient(circle at center, #ffdf00 0%, #ff8c00 100%);
  background-attachment: fixed;
  font-size: large;
  text-transform: capitalize;
  text-shadow: #f00909;
  text-decoration: double;
  
  font-style: italic;
}

h1, p {
  margin-left: 20px;
  text-decoration: wavy;
}

a:link {
text-decoration: none;
color: rgb(26, 197, 10);
font-family: "Neonderthaw", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a:hover {
font-weight: lighter;
cursor: cell;
text-shadow:  9px 3px 6px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(lightblue,lightgreen);
}

ul li {
  float: left;
  border-right:1px solid #bbbbbb;
}

ul li:last-child {
  border-right: none;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 22px;
  text-decoration: ivory;
  text-decoration-style: dotted;
  font-style: oblique;
  font-variant: small-caps;
  font-weight: 600;
  font-display: fallback;
  font-language-override: initial;
  font-variant-ligatures: no-common-ligatures;
  font-variant-caps: all-small-caps;
  font-variant-numeric: slashed-zero;
motion: reverse;
}

ul li a:hover:not(.active) {
  background-color: #4f7245;
  font-synthesis-position: var(#bbbbbb);
  motion: reverse;
}

ul li a.active {
  background-color: #04AA6D;
  font-style: inherit;
  motion: reverse;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}


li a:hover {
  background-color: #555555;
  color: white;
}

h2 {
  margin-left: 20px;
  text-decoration: wavy;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-size: large;
  font-style: unset;
  font-display: swap;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}