body,html {
  margin: 0;
  padding: 0;
}

body {

  display: grid;
  grid-template-columns: 60px 140px auto;
  grid-template-rows: 40px 160px auto;
  grid-template-areas: "logo logo  mmenu"
                       "logo logo random"
                       "lbox fill content";
  background-image: url("../img/banner.jpg");
  min-height: 1536px;
  color: purple;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  
}

#logo {

  grid-area: logo;
}

#header {

  grid-area: random;
  overflow: scroll;
  background: white;
}

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

  color: black;
}

a:hover {

  animation-name: animation1rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

#main-menu {

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

#main-menu li {

  
  list-style: none;
  display: inline;
}

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

  color: white;
}

dl > dt {

  background: orange;
  color: white;  
}


@keyframes activate {

  100% {
  
    background-color: #fff;
    border: 0px dashed red;
  }
}

@keyframes activatebox {
  
  100% {
    
    background-color: orange;
    border: 0px dashed red;
  }
}

@keyframes menuItemActivate {

  50% {
  
    background: yellow;
    top: 50px;
  }
}

@keyframes rotateImage-part1 {
  
  50% {
    
    transform: rotate(180deg);
  }
  
  100% {
  
    transform: rotate(360deg);
  }
}

.content {
  z-index: 2;
}

.content:before {

  content: "";
  background: transparent url("bąbelki.svg") center center no-repeat;
  background-size: 200px 200px;
  position: absolute;
  
  
  z-index: -1;
  top: 50%;
  left: 50%;
  margin: -100px;
  width: 200px;
  height: 200px;
  animation-name: rotateImage-part1;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

#content {
grid-area: content;
grid-row: lbox;
display: flex;
flex-wrap: wrap;
}

.content {

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

.betterread:hover {

  animation-name: activate;
  animation-duration: 15s;
  animation-fill-mode: forwards;
}

.betterread2:hover {
  
  animation-name: activatebox;
  animation-duration: 15s;
  animation-fill-mode: forwards;
}

#main-menu ul li:hover {

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

#links {

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

#links:hover {

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

#content:hover {

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

#links li {

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