@font-face {
  font-family: 'Korinna-Agency';
  src: url('/jeopardy/OPTIKorinna-Agency.ttf.woff') format('woff'),
    url('/jeopardy/OPTIKorinna-Agency.ttf.eot') format('eot');
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.banner {
  width: 100vw;
  height: 30px;
  background-color: gold;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px 0;
  display: flex;
  flex-direction: row;
}

.banner > * {
  margin: 0;
  padding: 0 10px;
  font-size: 1rem;
}

.board {
  width: 100vw;
  height: Calc(100vh - 30px);
  background-color: black;
  color: white;
  display: grid;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
  margin: 0;
}

.category,
.question {
  padding: 1rem;
  background: #00008b;
  border: 0.5rem solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 1rem;
}

.category {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  word-break: break-word;
  text-transform: uppercase;
  font-family: "Impact";
}

.question {
  cursor: pointer;
  font-size: 3rem;
  color: gold;
  transition: background-color 0.25s;
  font-family: "Impact";
  text-shadow: 2px 2px black;
}

.question:not(.is-answered):not(.is-active):hover {
  background-color: rgba(0, 0, 255, 0.75);
}

.question.is-answered {
  cursor: initial;
  background-color: rgba(0, 0, 255, 0.5);
  color: rgba(0, 0, 255, 0.5);
  font-size: 0px;
  text-shadow: none;
}

.question.is-answered:hover, .question.post-answer {
  color: white;
  font-size: 28px;
}

#prompt {
  position: fixed;
  top: 100%;
  left: -100%;
  height: 100vh;
  width: 100vw;
  background: #00008b;
  font-size: 4rem;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: yellow;
  transition: all 0.5s;
  transition-property: top, left;
  overflow: hidden;
  cursor: pointer;
  color: white;
  font-family: "Korinna-Agency", "Times New Roman", Times, serif;
  text-transform: uppercase;
  text-shadow: 4px 4px black;
}

#prompt.is-active {
  top: 0;
  left: 0;
}