body {
  background-color: black;
  color: #e5f6ff;
}

@font-face {
  font-family: RomanceA;
  src: url("/fonts/RomanceA.ttf");
}

iframe {
  border: 0px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 60px); /*setting 10 columns, each 50px wide*/

  grid-auto-rows: 60px; /*setting X number of rows to be 50px tall*/

  grid-gap: 10px; /*setting the gaps */

  transform: translate(-50%, -50%);
  position: fixed;
  top: 50%;
  left: 50%;
}

.nav-bar {
  margin: auto;
  background-color: #5da3f9;
  text-align: center;
  color: #020c26;
  padding: 5px;

  font-family: RomanceA;
}

.nav-bar > a {
  color: #020c26;
}

.sect-welcome {
  grid-column: 1 / 7;
  grid-row: 1 / 3;

  text-align: center;
  padding: 5px;
  background-image: url("/site-zones/blue-zone/background-welcome.png"), url("/site-zones/blue-zone/background-tile.png");
  background-repeat: no-repeat, repeat;
}

.sect-image {
  grid-column: 7 / -1;
  grid-row: 1 / 5;
}

.sect-1 {
  grid-column: 1 / 4;
  grid-row: 3 / 5;

  text-align: center;
  background-image: url("/site-zones/blue-zone/background-tile.png");

  padding: 5px;
}

.sect-2 {
  grid-column: 4 / 7;
  grid-row: 3 / 5;

  text-align: center;
  background-image: url("/site-zones/blue-zone/background-tile.png");

  padding: 5px;
}

.sect-text {
  grid-column: 1 / -1;
  grid-row: 5 / 11;
  background-image: url("/site-zones/blue-zone/background-text.png"), url("/site-zones/blue-zone/background-tile.png");
  background-repeat: no-repeat, repeat;

  padding: 10px;
}

.header {
  font-family: RomanceA;
  font-size: 20px;
  color: #94d2e7;
}