@font-face {
  font-family: 'Atlantis';
  src: url('atlantis_font/atlantistext-regular-webfont.woff');
}

@font-face {
  font-family: 'Atlantis';
  src: url('atlantis_font/atlantistext-bold-webfont.woff');
  font-weight: bold;
}

@font-face {
  font-family: 'Atlantis Heading';
  src: url('atlantis_font/atlantisheadline-bold-webfont.woff');
}

body {
  background-color: #130424;
  color: white;
  font-family: 'Atlantis', courier;
  font-size: 25px;
  background-image: url('background.png');
  text-align: center;
  line-height: 1.3;

  margin: auto;
}

h1 {
  font-family: 'Atlantis Heading', courier;
}

a {
  color: #2486ff
}

.thin_list {
  max-width: 550px;
  margin: auto;
}

.red {
  color: #4f0002
}

/* everything: */
div.everythingbox {
  display: grid;
  grid-template-columns: 15% 70% 15%;
}

/* contact buttons */
div.contact_buttons_left {
  grid-column: 1;
  grid-row: 1;
  width: 10vw;
}

div.contact_buttons_right {
  grid-column: 3;
  grid-row: 1;
}

img.logo {
  width: 10vw;
  image-rendering: pixelated;
}

/* the top title/slots/postit portion: */
div.titlecluster {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 30% 20% 30% 20%;

  height: 70vw;
  width: 70vw;
}

/* title: */
img.title {
  grid-row-start: 1;

  height: 100%;
  width: 100%;
  margin: auto;
  image-rendering: pixelated;
}

/* the post it */
div.postit {
  grid-row: 2;
  width: 12vw;
  height: 12vw;
  display: flex;

  transform: translate(459%, -36%);
}

img.postit {
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

p.postit_text {
  transform: translate(-113%, 10%) rotate(-4.9deg);
  font-size: 2vw;
  line-height: 0.8;
  color: #00185e;


}

/* the slots: */
div.slotbox {
  grid-row: 3;

  transform: translate(0%, -155%);
}

h2.slot_text {
  font-size: 4vw;
  transform: translate(-2%, 218%);
  color: #00185e;
}

img.slots {
  height: 90%;
  width: 60%;
  image-rendering: pixelated;
  margin: auto;
}

/* nav buttons: */
div.nav_buttons {
  grid-row: 4;
  margin: auto;
  transform: translate(0%, -125%)
}

div.button {
  width: 20vw;
  height: 20vw;
  background-image: url("button.png");
  background-repeat: no-repeat;
  background-size: 20vw 20vw;
  image-rendering: pixelated;
}

p.button {
  text-decoration-line: none;
  font-size: 4vw;
  font-weight: bold;
  line-height: .9;
  transform: translate(0%, 220%)
}

img.home_button {
  image-rendering: pixelated;
  width: 65px;
}