game.css

/** Generated by https://google-webfonts-helper.herokuapp.com 
  Using latin and "Modern Browser" support
*/

/* teko-300 - latin */
@font-face {
  font-family: "Teko Light";
  font-style: normal;
  font-weight: 300;
  src: local("Teko Light"), local("Teko-Light"),
    url("fonts/teko-v8-latin-300.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("fonts/teko-v8-latin-300.woff")
      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* teko-regular - latin */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 400;
  src: local("Teko Regular"), local("Teko-Regular"),
    url("fonts/teko-v8-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("fonts/teko-v8-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Generated by https://google-webfonts-helper.herokuapp.com */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"),
    url("booyah/fonts/roboto-condensed/roboto-condensed-v16-latin-regular.woff2")
      format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("booyah/fonts/roboto-condensed/roboto-condensed-v16-latin-regular.woff")
      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* From https://css-tricks.com/a-couple-of-use-cases-for-calc/ */
/* So 100% means 100% */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto Condensed", sans-serif;
  background-color: black;
  color: white;
}

a {
  color: white;
}

#sharing .fb_iframe_widget span {
  vertical-align: baseline !important;
}

/*#header {
  width: 100%;
  height: 64px;
  background-color: #82324F;
  color: #F1D300;
  text-align: center;
}*/

#game-parent {
  position: relative;

  height: 540px; /* fallback */
  height: calc((9 / 16) * 100vw);
  max-height: calc(100vh - 80px);

  width: 100%;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#game-parent:fullscreen {
  max-height: unset;
}

#game-parent:-webkit-full-screen {
  max-height: unset;
}

#game-parent:-moz-full-screen {
  max-height: unset;
}

#game-parent:-ms-fullscreen {
  max-height: unset;
}

#game-parent.embedded {
  height: 100vh;
  max-height: unset;
}

#game-parent canvas {
  position: absolute;

  height: 540px; /* fallback */
  height: calc((9 / 16) * 100vw);
  max-height: calc(100vh - 80px);

  /* Center the element
     Based on https://css-tricks.com/centering-percentage-widthheight-elements/ */
  left: 50%;

  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);

  /* background-color: black; */

  background-image: url(images/splash.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#game-parent.embedded canvas {
  height: 100vh;
  max-height: unset;
}

#game-parent:fullscreen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#game-parent:-webkit-full-screen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#game-parent:-moz-full-screen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#game-parent:-ms-fullscreen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#descriptive-content {
  max-width: 1024px;
  margin: 20px auto;
  padding: 10px;
}

.build-info {
  font-size: x-small;
}

.text-accent {
  color: #7efffe;
}

#purchase-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

#purchase-left {
  padding: 10px 0;
}

#purchase-right {
  padding: 10px 0;
  flex-shrink: 0; /* Do not allow to get too small, otherwise it looks stupid */
}

#purchase {
  background-color: #7efffe;
  border-radius: 30px;
  border: 0px;
  padding: 1em 2em;

  color: black;
  font-size: large;
  font-weight: 500;
  text-decoration: none;
}

#login-required {
  position: absolute;

  font-size: x-large;

  /* Horizontally center */
  left: 50%;
  top: 80%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}

#access-container {
  border: 1px dashed #7efffe;
  padding: 0px 20px 20px 20px;
}

#access-container,
#access-container input,
#access-container button {
  font-family: monospace;
  font-size: large;
}

#access-container button {
  color: blacks;
  background-color: #7efffe;
}

#login-error {
  display: none;
  color: #fc5f3b;
}