@font-face { font-family: 'Marcellus-Regular'; src: url('Marcellus-Regular.woff2'); }
@font-face { font-family: 'Abel-Regular'; src: url('Abel-Regular.woff2'); }
body {
  margin: 0 auto;
  padding: 1em 0;
  font-family: 'Marcellus-Regular', monospace;
  font-size: 1.2em;
  background: #ffe;
  color: #000;
}

.banner {
    display: block;
    background-color: #ffe;
    padding: 0.5em 1em 0.5em 1em;
    color: #000;
}

.container {
  display: grid;
  gap: 1em;
  grid-template-columns: auto auto auto;
  padding: 1em;
}

.container > a {
  display: block;
  background-color: #ffe;
  padding: 1em;
  text-align: center;
  color: #000;
  text-decoration: none;
  border: 2px dashed #000;
}

.container > a:hover {
  background: #000;
  color: #ffe;
  border: 2px dashed #ffe; 
}

.logo {
  border-top: 1px dashed #fff; 
  border-bottom: 1px dashed #fff;
  color: #fff;
  background: #000;
}

@media screen and (max-width: 960px) {
  .container {
  grid-template-columns: auto auto;
  }
}

@media screen and (max-width: 660px) {
  .container {
  grid-template-columns: auto;
  }
}

mark {
  padding: 1em; 
  border: 3px dashed #ffe; 
}

mark:hover {
  border: 4px dashed yellow;
  background-color: #ffe;
  color: yellow;
}