html {
  padding: 20px;
  background-color: honeydew;
  font-family: monospace;
  line-height: 30px;
}
.wrapper{
  display: grid;
  grid-template-areas:
    "border-top border-top border-top border-top"
    "border-left . header header"
    "border-left content navi border-right"
    "border-left footer footer border-right";
  grid-template-columns: 15vw auto 10vw 15vw;
}
.wrapper div {
  /*border: 1px solid black;*/
  font-size: 20px;
  padding-top: 5px;
  padding-left: 20px;
}
.border-top {
  grid-area: border-top;
  padding: 30px;
}
.border-right {
  grid-area: border-right;
}
.border-left{
  grid-area: border-left;
}
.header {
  color: #548772;
  font-weight: bold;
  grid-area: header;
}
.navi {
  grid-area: navi
}
a {
  color: #548772;
}
.content {
  color: #34385b;
  grid-area: content;
}
.type {
  color: #34385b;
  grid-area: content;
  text-align: center;   
}
span {
  border-right: .1em solid;
  animation: flash 1s steps(1) infinite;
}
@keyframes flash {
  50% {
    border-color: transparent;
  }
}
.footer {
  text-align: center;
  grid-area: footer;
}