* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: url("background.jpg") repeat;
}

#flag {
  display: block;
  margin: 2em auto 2em auto;
}

#options {
  height: 70vh;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 3px;
}

header {
  background-color: #efefef;
  border-radius: 0 0 10px 10px;
  padding: 0.5em;
  font-size: 0.9rem;
  border: 1px solid #b0b0b0;
  width: 300px;
  text-align: center;
  margin: 0 auto;
}

#options button.correct {
  background-color: #bbeebb;
}

#options button.wrong {
  background-color: #eebbbb;
}

#layout {
  max-width: 600px;
  margin: 0 auto;
}

#options button {
  border: none;
  background-color: #efefef;
  transition: all 100ms;
  font-size: 0.9rem;
}

#options button:hover {
  filter: brightness(90%);
  cursor: pointer;
  transform: scale(102%);
}

/* Some animations */
@keyframes smooth-scale {
  from {
    transform: scale(10%);
  }

  to {
    transform: scale(100%);
  }
}

.smooth-scale {
  animation-name: smooth-scale;
  animation-duration: 200ms;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Lobby and multiplayer-related html styling */
#lobby {
  padding: 1em;
  margin-top: 1em;
  background-color: #f0f0f0;
  border: 1px solid black;
  border-radius: 5px;
}

#lobby p:first-of-type {
  margin-bottom: 1em;
}

#lobby h2 {
  margin-bottom: 0.2em;
}

#chat-container {
  max-width: 400px;
  width: 400px;
  
  padding: 1em;
  position: absolute;
  right: 1em;
  bottom: 1em;
  background-color: #f0f0f0;
  border: 1px solid black;
  border-radius: 5px;
}

#chat-container h3 {
  margin-bottom: 0.2em;
}

#chat-empty {
  margin-bottom: 1em;
}

#chat {
  margin-bottom: 1em;
}

@media screen and (max-width: 600px) {
  #chat-container {
    position: initial;
    margin: 1em auto;
  }
}