body {
  background-color: #dd8888;
  color: black;
  font-family: "Didact Gothic";
}

table {
  border: 1px solid black;
  text-align: center;
}

th, td {
  border: 1px solid black;
  padding: 2px;
  font-family: "Deja Vu";
  font-size: 85%;
}

@font-face {
  font-family: "Didact Gothic";
  src: url('/@main/DidactGothic-Regular.ttf');
}

@font-face {
  font-family: "Xadwg";
  src: url('/@main/XadwgRegular.otf');
}

@font-face {
  font-family: "Deja Vu";
  src: url('/@main/DejaVuSans.ttf');
}

@font-face {
  font-family: "Roboto Mono";
  src: url('/@main/RobotoMono-VariableFont_wght.ttf')
}

@font-face {
  font-family: "Elms";
  src: url('/@main/ElmsSans-VariableFont_wght.ttf')
}

@font-face {
  font-family: "Kode";
  src: url('/@main/KodeMono-VariableFont_wght.ttf');
}

.thea {
  color: #882222;
  font-family: 'Roboto Mono';
}

.boude {
  color: #aaffaa;
  font-family: 'Elms';
}

.ghiorsh {
  color: #ff1199;
  font-family: 'Kode';
}

.ipa {
  font-family: "Deja Vu";
}

.xadwg {
  font-family: "Xadwg";
}

.banner {
  background-color: #ffff66;
  height: 250px;
  align-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.banner-thea {
  background-color: red;
  height: 250px;
  align-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.banner-boude {
  background-color: green;
  height: 250px;
  align-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.banner-ghiorsh {
  background-color: hotpink;
  height: 250px;
  align-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  align-content: center;
}

.column {
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  align-content: center;
}