body {
  font-family: helvetica, arial, sans-serif;
}

body#display {
  font-size: 10px;
  background: url('/static/background.jpg') no-repeat black;
  background-position: center center;
  background-size: contain;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Preload both background images */
body#display::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content: url(/static/background-announcing.jpg) url(/static/background-announcing.jpg);
}

#display.announcing {
  background-image: url('/static/background-announcing.jpg');
}

a {
  color: #0075c9;
}

.links {
  text-align: center;
}

[v-cloak] {
  display: none;
}

#idle, #info {
  position: absolute;
  margin: 0;
  left: 0; right: 0;
  text-align: center;
  line-height: 100vh;
}

#idle h1 {
  margin: 0;
  font-size: 5vw;
}

#info h1 {
  margin: 0;
  font-size: 35vw;
}

body#default #disconnected {
  display: none;
}

#disconnected {
  position: absolute;
  bottom: 1rem; right: 1rem;
  color: red;
  opacity: 0.3;
  z-index: -1;
}

.connected #disconnected {
  opacity: 0;
}

#index ul {
  text-align: center;
  padding: 0;
}

#index li {
  list-style: none;
  display: inline;
}

#index button {
  font-family: inherit;
  font-size: 5em;
  background: none;
  border: 1px solid;
  width: 3em;
  height: 1.5em;
  margin: .1em;
  transition: all .2s;
}

@media (max-width: 700px) {
  #index button {
    font-size: 3em;
  }
}

#index button:active, #index button.active {
  background-color: #0075c9;
  color: #ffffff;
  transition: none;
}
