* {
  color: #c0c0c0; }

body {
  font-size: 2.5vmin;
  background: black;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden; }

div {
  margin: 0;
  padding: 0;
  background: transparent; }

canvas {
  position: fixed;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: black; }

canvas.ingame {
  cursor: none; }

a {
  color: #7070b0;
  text-decoration: none; }
  a:hover {
    color: #ccc; }

#logo {
  height: 100%; }

header, footer {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding-top: 2.5vmin;
  padding-bottom: 2.5vmin; }
  header > p, footer > p {
    margin: 0; }

header {
  position: absolute;
  top: 0;
  height: 12vmin; }

footer {
  position: absolute;
  bottom: 0;
  height: 8vmin; }

main {
  position: absolute;
  top: 12vmin;
  position: absolute;
  bottom: 8vmin;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto; }

.hidden {
  visibility: hidden;
  opacity: 0; }

#menu, #invite {
  transition: visibility 0.5s, opacity 0.5s linear 0s; }

#ui {
  transition: visibility 0.5s, opacity 0.5s linear 1s; }
  #ui.hidden {
    transition: visibility 0.5s, opacity 0.5s linear 0s; }

#respawn {
  transition: visibility 0.5s, opacity 0.5s linear 2s; }
  #respawn.hidden {
    transition: visibility 0.5s, opacity 0.5s linear 0s; }

#nameStart {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  height: 14vmin; }

#ship {
  position: absolute;
  top: 26vmin;
  position: absolute;
  bottom: 26vmin;
  position: fixed;
  width: 100%; }

#settings {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: 0;
  width: 90vmin;
  height: 18vmin; }

#ships {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  padding: 1vmin; }

#colors {
  position: absolute;
  bottom: 0;
  width: 100%; }
  #colors > div {
    display: inline-block;
    padding: 1vmin;
    text-align: center; }
    #colors > div:nth-child(odd) {
      float: left; }
    #colors > div:nth-child(even) {
      float: right; }

#respawn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: 2.5vmin;
  padding: 0;
  padding: 2vmin;
  font-weight: bold;
  width: 32vmin; }

#banner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 2.5vmin;
  box-sizing: content-box;
  width: 300px;
  height: 250px;
  max-width: 36vmin;
  max-height: 30vmin; }

#zorelit-io_300x250 {
  transform-origin: 0 0; }

#controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  right: 2.5vmin;
  border: 0.375vmin solid #636f7d;
  -webkit-box-shadow: 0 0 2.5vmin #636f7d;
  -moz-box-shadow: 0 0 2.5vmin #636f7d;
  box-shadow: 0 0 2.5vmin #636f7d;
  border-radius: 2.5vmin;
  background-color: rgba(20, 20, 20, 0.5);
  font-size: 2vmin;
  padding: 0.5em; }

#tips {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  top: 7vmin;
  width: 40vmin;
  height: 6vmin;
  padding: 0.5em;
  text-align: center; }
  #tips > p {
    position: absolute;
    top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #bac;
    opacity: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    animation: fade 16s infinite; }
    #tips > p:nth-child(0) {
      animation-delay: 0s; }
    #tips > p:nth-child(1) {
      animation-delay: 4s; }
    #tips > p:nth-child(2) {
      animation-delay: 8s; }
    #tips > p:nth-child(3) {
      animation-delay: 12s; }

@keyframes fade {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  20% {
    opacity: 1; }
  25% {
    opacity: 0; } }

p {
  margin: 0.75em; }
  p > strong {
    color: #f0f0b0; }
  p > img {
    vertical-align: middle;
    height: 2em; }
  p > em {
    display: inline-block;
    color: #fff;
    border: 0.08em solid #fff;
    padding: 0.3em;
    min-width: 1.2em;
    border-radius: 0.5em;
    text-align: center;
    font-style: normal;
    vertical-align: middle; }

#contact, #privacy, #nowebgl {
  background: rgba(0, 0, 0, 0.8);
  min-height: 100%;
  box-sizing: border-box;
  padding: 1em; }

a.home {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: 2.5vmin; }

input, button {
  border: 0.375vmin solid #636f7d;
  -webkit-box-shadow: 0 0 2.5vmin #636f7d;
  -moz-box-shadow: 0 0 2.5vmin #636f7d;
  box-shadow: 0 0 2.5vmin #636f7d;
  font-size: 2.5vmin;
  border-radius: 0.3em;
  padding: 0.25em;
  color: #c0c0c0;
  background: rgba(20, 20, 20, 0.5); }
  input:focus, button:focus {
    border-color: #888;
    outline: none; }
  input:hover, button:hover {
    border-color: #aaa; }
  input::selection, button::selection {
    background-color: #88b; }

button:active {
  border-color: #fc7;
  -webkit-box-shadow: 0 0 2.5vmin #fc7;
  -moz-box-shadow: 0 0 2.5vmin #fc7;
  box-shadow: 0 0 2.5vmin #fc7; }

button {
  margin: 0.25vmin; }

#ships > div, #colors > div > div {
  display: inline-block;
  border: 0.375vmin solid rgba(0, 0, 0, 0);
  background: transparent;
  border-radius: 50%;
  padding: 0;
  margin: 0.25vmin; }
  #ships > div:hover, #colors > div > div:hover {
    border: 0.375vmin solid #777;
    -webkit-box-shadow: 0 0 1.25vmin #777;
    -moz-box-shadow: 0 0 1.25vmin #777;
    box-shadow: 0 0 1.25vmin #777; }
  #ships > div.sel, #ships > div.sel:hover, #colors > div > div.sel, #colors > div > div.sel:hover {
    border: 0.375vmin solid #fc7;
    -webkit-box-shadow: 0 0 2.5vmin #fc7;
    -moz-box-shadow: 0 0 2.5vmin #fc7;
    box-shadow: 0 0 2.5vmin #fc7; }

#ships > div > img {
  display: block;
  width: 7.5vmin;
  height: 7.5vmin; }

#colors > div > div {
  width: 2.5vmin;
  height: 2.5vmin; }

button#fullscreen {
  position: absolute;
  top: 2.5vmin;
  position: absolute;
  right: 2.5vmin;
  margin: 0;
  width: 5vmin;
  height: 5vmin;
  background-size: contain;
  background-image: url(aac643c0e34bbe527fddb821dea984e7.svg); }
  button#fullscreen.on {
    background-image: url(5de0b6d8c04f62ec0ad622e579962f3d.svg); }

#playWithFriends {
  position: absolute;
  top: 2.5vmin;
  position: absolute;
  left: 2.5vmin;
  z-index: 10;
  border: 0;
  width: 7.5vmin;
  height: 7.5vmin;
  background-size: contain;
  background-image: url(0a334f7992a584a97275ce61f3f70920.svg);
  opacity: 0.7; }
  #playWithFriends:hover {
    opacity: 1; }

#invite {
  position: absolute;
  left: 11.25vmin;
  position: absolute;
  top: 2.5vmin;
  position: fixed; }
  #invite input, #invite p {
    margin: 0.625vmin;
    border: 0;
    font-size: 2vmin;
    text-align: left;
    cursor: default; }
  #invite input {
    padding-right: 3vmin;
    background: url(df30563f994763c3b40a0f940b4bfe53.svg) no-repeat right;
    background-size: contain; }
    #invite input:hover {
      -webkit-box-shadow: 0 0 2.5vmin #aaa;
      -moz-box-shadow: 0 0 2.5vmin #aaa;
      box-shadow: 0 0 2.5vmin #aaa; }
    #invite input:active {
      -webkit-box-shadow: 0 0 2.5vmin #fc7;
      -moz-box-shadow: 0 0 2.5vmin #fc7;
      box-shadow: 0 0 2.5vmin #fc7; }

#links {
  position: absolute;
  left: 2.5vmin;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); }
  #links a {
    opacity: 0.7; }
    #links a:hover {
      opacity: 1; }
    #links a img {
      width: 5vmin; }

/*# sourceMappingURL=main.css.map*/