body,html {
  margin: 0;
  padding: 0;
  background: #061be8;
}

body {

  display: grid;
  grid-template-columns: 254px auto 30px;
  grid-template-rows: 80px auto;
  grid-template-areas: "logo mmenu mmenu"
                       "links fill content"
                       "lbox fill content";
  color: white;
  overflow: scroll;
  margin: auto;
  
}

#logo {

   display: none;
}

a:link, a:visited, a:hover, a:active {

  color: black;
}

#main-menu {

  color: white;
  padding: 0;
  grid-area: mmenu;
}

@media screen and (max-width: 860px) {

#main-menu:hover {
  background: #061be8;
   overflow: visible;
   left: 254px;
   position: absolute;
   z-index: 1;
   height: 100%;
}

#main-menu:hover li {

  display: block;
  margin: 0;
}

#main-menu:hover ~ main {

  display: none;
}

}

#main-menu li {

  list-style: none;
  text-decoration: underline;
  display: inline;
  margin-left: 140px;
  margin-top: 124px;
  font-size: 35px;
}

#main-menu li:first-child {

  margin: 0;
}

#main-menu a:link, #main-menu a:visited, #main-menu a:hover, #main-menu a:active {

  color: white;
}

dl > dt {

  background: orange;
  color: white;  
}

.content {
  z-index: 2;
}

#content {
grid-column-start: fill;
grid-column-end: content;
background: url("../img/tlo.png");
grid-row: lbox;
display: flex;
flex-wrap: wrap;
background-attachment: fixed;
color: black;
}

.content {

  position: relative;
  border: 4px solid blue;
}

#main-menu ul li:hover {

  top: 0;
  position: relative;
  animation-name: menuItemActivate;
  animation-duration: 10s;
}

#links {

  grid-area: links;
  padding :0;
  margin: 0;
  
}

#links:hover {

  grid-column-start: links;
  grid-column-end: fill;
}

#content:hover {

grid-column-start: fill;
grid-column-end: content;
}

#links li {

  list-style: none;
  padding: 0;
  margin: 0;
}

@keyframes grow {

  100% {
  
    font-size: 200%;
  }
}

#header {

  overflow: hidden;
  grid-area: lbox;
  
  font-size: 17px;
}

#header:hover {

  position: absolute;
  background: blue;
  margin-top: 10px;
  z-index: 1;
  width: 90%;
  height: 90%;
  animation-name: grow;
  animation-duration: 20s;
  animation-fill-mode: forwards;
  border-right: 5px solid brown;
  border-bottom: 5px solid brown;
  overflow: scroll;
  max-width: 100%;
}

#header:hover ~ main {

  position:absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  background: red;
}

#lookAFeel {

  grid-area: links;
}

#lookAFeel li {

  list-style: none;
}

#lookAFeel {

  display: none;
}