#colorbeam {
  height: 30px;
  background-color: var(--orange);
  margin: -8px -8px 0px -8px;
}
#footer {
  background-color: var(--darkgrey);
  color: var(--white);
  margin: 0px -8px 0px -8px;
  display: grid;
  grid-template-areas:
    'pos1 pos2 pos3 pos3 pos3 pos3 pos3 pos3 pos3 pos4 pos5';
  /*height: 80px;*/
  border: var(--border-th) solid red;
}
#empty-fl {
  grid-area: pos1;
  border: var(--border-th) solid white;
}
/*.footertext {
  display: grid;
  grid-template-columns: 50px auto 50px;
  border: var(--border-th) solid red;*/
}
#logo2 {
  grid-area: pos2;
  border: var(--border-th) solid white;
}
#logo2 img {
  width: 40px;
}

#ftext {
  grid-area: pos3;
  border: var(--border-th) solid white;
}
#ftext > a:link {
  color: var(--white);
  text-decoration: none;
}

#ftext > a:hover {
  color: var(--orange);
  text-decoration: none;
}
#ftext > a:visited {
  color: var(--lightgrey);
  text-decoration: none;
}
#qr-fb {
  grid-area: pos4;
  position: relative;
  border: var(--border-th) solid white;
  text-align: right;
}

#qr {
  width: 50px;
  /*float: left;*/
  position: relative;
  top: 8px;
  right: 10px;
}

#fb {
  width: 50px;
  /*float: left;*/
  scale: 1;
  transition: scale 0.2s;
  position: relative;
  top: 10px;
}

#fb:hover {
  scale: 1.2;
}

#empty-fr {
  grid-area: pos5;
  border: var(--border-th) solid white;
}

@media only screen and (max-width: 400px) {
#footer {grid-template-columns: auto auto auto auto;}
#empty-fl    {grid-area: 1 / 1 / span 1 / span 4;}
#logo2       {grid-area: 2 / 2 / span 1 / span 1;}
#ftext       {grid-area: 2 / 3 / span 1 / span 4;}
#qr-fb       {grid-area: 3/ 3 / span 1 / span 1;}
#empty-fr    {grid-area: 4 / 1 / span 1 / span 4;}
}