@font-face {
  font-family: C64 Pro Mono;
  src: url(C64_Pro_Mono-STYLE.ttf);
}

body { background-color: #867ade; }

.layout {
  width: 100%;
  height: 100%;

  display: grid;
  grid:
    "header header header" 5vmin
    "leftSide body rightSide" 1fr
    "footer footer footer" 5vmin
    / 5vmin 1fr 5vmin;
  gap: 0;
}

.header { grid-area: header; background-color: #867ade; }
.leftSide { grid-area: leftSide; background-color: #867ade; }
.body { grid-area: body; background-color: #3f3395; color: #867ade; padding: 1em; font-family: C64 Pro Mono; }
.rightSide { grid-area: rightSide; background-color: #867ade }
.footer { grid-area: footer; background-color: #867ade }

.headtxt { display: inline-block; padding-top: 1em; font-size: 1.5vw;}
.headtxt.top { width: 100%; text-align: center; padding-top: 0;}
.headtxt.left { width: 50%; text-align: left;}
.headtxt.right { width: 50%; text-align: right; }

.box {
  height: 1.5vw;
  width: 1.5vw;
  margin-bottom: 15px;
  clear: both;
}
.blue {
  background-color: #867ade;
}