.header {
  display: grid;
  grid-template-areas:
    'pos1 pos2 pos3 pos4 pos5'
    'pos6 pos7 pos7 pos7 pos8';
  background-color: var(--yellow);
  border: var(--border-th) solid blue;
  margin: -8px -8px 0px -8px;
}
  
#empty-l {
  grid-area: pos1;
  border: var(--border-th) solid green;
}
#logospace {
  grid-area: pos2;
  border: var(--border-th) solid blue;
  text-align: center;
}
#logo { 
  border: var(--border-th) solid blue;
  width: 100px;
  /*scale: 1.0;
  transition: scale 0.2s;*/
}
/*#logo:hover {
  scale: 1.1;
}*/
#titles {
  grid-area: pos3; 
  text-align: center;
  border: var(--border-th) solid red;
  position: relative;
  top: 10px;
  /*width: 170px;*/
}
#title1 {
  font-family: "comic-sans", sans-serif;
  height: 20px;
  color: var(--orange);
  text-shadow: 1px 1px var(--darkgrey);
  font-size: 20px;
  font-weight: bold;
  border: var(--border-th) solid blue;
  padding: 1px;
  position: relative;
  top: 10px;
}
#title2{
  font-family: "comic-sans", sans-serif;
  text-shadow: 2px 2px var(--darkgrey);
  color: var(--orange);
  font-size: 50px;
  font-weight: bold;
  border: var(--border-th) solid blue;
}
#title3{
  font-family: "comic-sans", sans-serif;
  height: 20px;
  color: var(--darkgrey);
  font-size: 20px;
  border: var(--border-th) solid blue;
}
#slogan {
  grid-area: pos4;
  border: var(--border-th) solid blue;
  font-family: "comic-sans", sans-serif;
  color: var(--darkgrey);
  font-size: 20px;
  text-align: center;
  /*width: 40%;*/
}
#empty-r {
  grid-area: pos5;
  border: var(--border-th) solid green;
}

#menubeam-l {
  grid-area: pos6;
  background-color: var(--orange);
  }
.menutext {
  grid-area: pos7;
  font-family: "comic-sans", sans-serif;
  font-size: 20px;
  color: var(--white);
  text-shadow: 1px 1px var(--darkgrey);
  background-color: var(--orange);
  display: flex;
  justify-content: space-around;
  border: var(--border-th) solid blue;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li a {
  color: var(--white);
  text-shadow: 1px 1px var(--darkgrey);
  text-decoration: none;
}

.menutext li {
  border: 1px solid var(--lightgrey);
}
li a:hover {
  color:  var(--lightgrey);
}
li a:active {
  color:  var(--darkgrey);
}

#menubeam-r {
  grid-area: pos8;
  background-color: var(--orange);
  }

@media only screen and (max-width: 600px) {
#empty-l    {grid-area: 1 / 1 / span 1 / span 5;}
#logospace  {grid-area: 2 / 1 / span 1 / span 5;}
#titles     {grid-area: 3 / 1 / span 1 / span 5;}
#slogan     {grid-area: 4 / 1 / span 1 / span 5;}
#empty-r    {grid-area: 5 / 1 / span 1 / span 5;}
#menubeam-l {grid-area: 6 / 1 / span 1 / span 5;}
.menutext   {grid-area: 7 / 1 / span 1 / span 5;}
.menutext   {display: block;}
li {text-align: center;}
#menubeam-r {grid-area: 8 / 1 / span 1 / span 5;}
}
  
/*
+------+------+------+------+------+
| pos1 | pos2 | pos3 | pos4 | pos5 |
+------+------+------+------+------+
| pos6 | pos7 | pos7 | pos7 | pos8 |
+------+------+------+------+------+
*/