@font-face {
  font-family: 'Black Letter'; src: url("/fonts/blackeb.ttf"); font-weight: normal; font-style: normal;
}

@font-face {
  font-family: 'Manic Miner'; src: url("/fonts/manicminer.ttf"); font-weight: normal; font-style: normal;
}

@font-face {
  font-family: 'Brutal Tooth'; src: url("/fonts/brutal-tooth.ttf"); font-weight: normal; font-style: normal;
}

body {
  font-family: 'Black Letter', monospace; color: ghostwhite; text-align: center;
  background: black url("/backgrounds/lacey lace.png") repeat; background-size: 50%;
}

.header {
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  background-color: dimgrey; border: 2px solid black; border-radius: 10px;
  padding: 0.2em; margin: auto;
  height:50px; min-width: 85%; max-width: 90%;
}

.button {
  border: 2.5px solid black; border-radius: inherit;
  padding: 0.5em; margin: 2.5px;
  min-width: 75px; max-width: 75%;
  font-size: 18px; text-align: center;
}

.here {
  font: normal; color: black; text-align: center; font-family: 'Brutal Tooth';
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); gap: 5px;
}

.container > div {
  background-color: dimgrey; border: 2.5px solid black; border-radius: 10px;
  padding: 0.2em; margin: auto; min-height: 50px; min-width: 50px; max-height: 200px; max-width: 150px; 
}











/* space */