@import url('https://fonts.googleapis.com/css?family=Lato|Oswald');

html, body {
  width: 100%;
  height: 100%;
  font-size: 1em;
  color: #28282F;
  margin: 0;
}
body {
  background-color: #2f2623;

  padding: 0;
  overflow: hidden;
  font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
canvas { width: 100%; height: 100%; }
p, img, div, canvas { vertical-align: top; }

::-moz-selection { background: #34495e; color: #FFF; }
::selection { background: #34495e; color: #FFF; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.u-hide { display: none; }

#progress {
  background-color: grey;
}
#bar {
  width: 1%;
  height: 5px;
  background-color: green;
}

nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;

  border-radius: .9em;
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 15px black;
}

nav section {
  padding: .5em;
  margin: 0 0 .25em;
}
nav header {
  margin-bottom: 1em;
}
nav header h1 {
  color: #65005d;
  font-family: 'Oswald', sans-serif;
  font-size: 1.4em;
  letter-spacing: .25em;
  margin: .7em .5em .25em .5em;
  text-shadow: -1px -1px 1px rgba(90,90,90, 0.3);
}
nav header strong {
  color: #006265;
}
nav header small {
  font-size: 1em;
  color: #656061;
}
nav main {
  margin: .5em 0;
  font-size: 1em;
}
nav footer {
  margin: 1em 0;
}
nav p {
  font-family: 'Lato', sans-serif;
  margin: .2em 0;
  text-shadow: -1px -1px 1px rgba(180,180,180, 0.5);
}
nav a, nav button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: inherit;
  border: solid 1px darkgray;

  display: inline-block;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .063em;
  padding: .61em 1em .55em 1.2em;
  margin: .55em .33em;
  outline: 0;
  border-radius: 15px;
}
nav img {
  width: 100%;

  justify-content: center;
  align-items: center;
  overflow: hidden;

  border-top-left-radius: .9em;
  border-top-right-radius: .9em;
}

.button {
  -webkit-appearance: none;
  appearance: none;
  background-image: -webkit-linear-gradient(#ed391b, #ce1a00);
  background-image: linear-gradient(#ed391b, #ce1a00);
  background-color: #ed391b;
  color: white;

  border: none;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(40, 40, 40, 0.31), 3px 3px 3px 1px rgba(0, 0, 0, 0.13);

  -webkit-transition: background .5s, filter .3s ease-in-out;
  transition: background .5s, filter .3s ease-in-out;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.button:hover {
  -webkit-transition: background .15s;
  transition: background .15s;

  color: white;
  text-decoration: none;
  background-image: -webkit-linear-gradient(#cf321a, #ae1600);
  background-image: linear-gradient(#cf321a, #ae1600);
}
.button:active {
  -webkit-transition: background .15s;
  transition: background .15s;
  background-color: #ce1a00;
}

.skip {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  cursor: pointer;
  opacity: 0.75;

  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translate(-50%, -50%);

  color: black;
  font-family: 'Lato', sans-serif;
  text-align: center;
  text-decoration: none;
  letter-spacing: .055em;
  white-space: nowrap;

  outline: none;
  padding: .5em .8em;

  border: 1px solid #fff;
  border-radius: 4px;
  background: rgba( 255,255,255,.33);
  text-shadow: 0 0 3px #fff786;
  box-shadow: 0 10px 15px black;

  z-index: 999;
}

.skip img {
  margin-right: 8px;
  opacity: .9;
}
#skip span {
  color: #134155;
  font-weight: bold;
}
#quit {
  left: auto; right: .5em;
  font-weight: bold;
  border-radius: 50%;
  opacity: .25;
}

@media screen and (min-width: 750px) {
  nav { width: 28em; }
  nav a, nav button { font-size: .9em; }
  .d-hide { display: none; }
}
@media screen and (max-width: 749px) {
  .m-hide { display: none; }
  .skip { bottom: .25em; }
  #quit { right: .25em; }
}
@media screen and (max-width: 749px) and (orientation: portrait) {
  nav { width: 96%; }
  nav a, nav button { font-size: 1.1em; }
}
@media screen and (max-width: 749px) and (orientation: landscape) {
  nav { width: 20em; }
  nav main { font-size: .9em; margin: 0; }
  nav header, nav header small { font-size: .91em; }
  nav header h1 { font-size: 1.15em; letter-spacing: .15em; margin: .25em .5em .33em .5em; }
  nav section { padding: .33em 1em; margin: 0 0 .15em; }
  nav header { margin-bottom: .5em; }
  nav footer { margin: .5em 0; }
  nav a, nav button {
    font-size: .93em;
    letter-spacing: .05em;
    padding: .47em 1em .36em 1.2em;
    margin: .33em .22em;
  }
}