/* ****************************************
  Trouble in Tribble Town
  CSS variables
**************************************** */
:root {
  /* text shadow for game title */
  --trouble-text:
  0 0.1vmin 0 hsl(174, 5%, 80%),
  0 0.2vmin 0 hsl(174, 5%, 75%),
  0 0.3vmin 0 hsl(174, 5%, 70%),
  0 0.4vmin 0 hsl(174, 5%, 66%),
  0 0.5vmin 0 hsl(174, 5%, 64%),
  0 0.6vmin 0 hsl(174, 5%, 62%),
  0 0.7vmin 0 hsl(174, 5%, 61%),
  0 0.8vmin 0 hsl(174, 5%, 60%),

  0 0 0.5vmin rgba(0, 0, 0, 0.05),
  0 0.1vmin 0.3vmin rgba(0, 0, 0, 0.2),
  0 0.3vmin 0.5vmin rgba(0, 0, 0, 0.2),
  0 0.5vmin 1vmin rgba(0, 0, 0, 0.2),
  0 1vmin 1vmin rgba(0, 0, 0, 0.2),
  0 2vmin 2vmin rgba(0, 0, 0, 0.3);

  --in-text:
  0 0.1vmin 0 hsl(160, 21%, 20%),
  0 0.2vmin 0 hsl(160, 21%, 21%),
  0 0.3vmin 0 hsl(160, 21%, 22%),
  0 0.4vmin 0 hsl(160, 21%, 24%),
  0 0.5vmin 0 hsl(160, 21%, 26%),
  0 0.6vmin 0 hsl(160, 21%, 30%),
  0 0.7vmin 0 hsl(160, 21%, 35%),
  0 0.8vmin 0 hsl(160, 21%, 40%),

  0 0 0.5vmin rgba(0, 0, 0, 0.05),
  0 0.1vmin 0.3vmin rgba(0, 0, 0, 0.2),
  0 0.3vmin 0.5vmin rgba(0, 0, 0, 0.2),
  0 0.5vmin 1vmin rgba(0, 0, 0, 0.2),
  0 1vmin 1vmin rgba(0, 0, 0, 0.2),
  0 2vmin 2vmin rgba(0, 0, 0, 0.3);

  --tribble-town-text:
  0 0.1vmin 0 hsl(161, 27%, 51%),
  0 0.2vmin 0 hsl(161, 27%, 52%),
  0 0.3vmin 0 hsl(161, 27%, 53%),
  0 0.4vmin 0 hsl(161, 27%, 55%),
  0 0.5vmin 0 hsl(161, 27%, 57%),
  0 0.6vmin 0 hsl(161, 27%, 61%),
  0 0.7vmin 0 hsl(161, 27%, 66%),
  0 0.8vmin 0 hsl(161, 27%, 71%),

  0 0 0.5vmin rgba(0, 0, 0, 0.05),
  0 0.1vmin 0.3vmin rgba(0, 0, 0, 0.2),
  0 0.3vmin 0.5vmin rgba(0, 0, 0, 0.2),
  0 0.5vmin 1vmin rgba(0, 0, 0, 0.2),
  0 1vmin 1vmin rgba(0, 0, 0, 0.2),
  0 2vmin 2vmin rgba(0, 0, 0, 0.3);

  /* default animation time */
  --animation-time: 15s;
}

/* ****************************************
  CSS RESET
  Much <3 to Eric Meyer
  http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
**************************************** */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ****************************************
  END CSS RESET
**************************************** */

/* ****************************************
  MAIN CSS
**************************************** */
body {
  height: 100vh;
  width: 100vw;
  cursor: pointer;
  font-family: 'Sarpanch', sans-serif;
  /* clip overflow from game characters */
  overflow: hidden;
  /* disable text selection */
  user-select: none;
}
/* main container */
#container {
  height: 100vh;
  width: 100vw;
}
/* game container */
#game-container {
  height: 100vh;
  width: 100vw;
  background: url("https://samwhindleton.github.io/trouble-in-tribble-town/images/ui/background.svg") no-repeat center center;
  background-size: cover;
  position: absolute;
}
/* title container */
#title-container {
  height: 40vh;
  width: 100vw;
  background: linear-gradient(rgba(199, 204, 203, 0.05), #888787);
  margin-top: 60vh;
  position: absolute;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
#title-container h1 {
  position: absolute;
}
.title-1 {
  color: #EAFAF9;
  font-size: 21.5vmin;
  letter-spacing: -0.5vmin;
  text-shadow: var(--trouble-text);
}
.title-2 {
  color: #20322c;
  font-size: 7vmin;
  letter-spacing: -0.5vmin;
  margin-top: 7.5vh;
  text-shadow: var(--in-text);
  z-index: 1;
}
.title-3 {
  color: #5BA18B;
  font-size: 13vmin;
  letter-spacing: -0.5vmin;
  margin-top: 11.5vh;
  text-shadow: var(--tribble-town-text);
}
/* stats container */
#stats-container {
  height: 30vmin;
  width: 100vw;
  letter-spacing: -0.5vmin;
  position: absolute;
  align-items: center;
  display: flex;
  justify-content: center;
}
#round, #round h1, #round h2,
#timer, #timer h1, #timer h2,
#points, #points h1, #points h2 {
  height: 30vmin;
  width: 31vw;
  color: #20322c;
}
#round h1, #round h2,
#timer h1, #timer h2,
#points h1, #points h2 {
  align-items: center;
  display: flex;
  justify-content: center;
}
#round h1, #timer h1, #points h1 {
  height: 10vmin;
  font-size: 8vmin;
  text-shadow: var(--in-text);
}
#round h2, #timer h2, #points h2 {
  height: 20vmin;
  font-size: 22vmin;
  text-shadow: var(--in-text);
}
#characters-container, #messages-container, #start-button {
  height: 100vh;
  width: 100vw;
  position: absolute;
  align-items: center;
  display: flex;
  justify-content: center;
}
/* game characters */
.tribbles1, .tribbles2, .tribbles3, .tribbles4, .tribbles5, .klingons1, .klingons2 {
  height: 20vmin;
  width: 20vmin;
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/tribbles/tribble_1.svg) no-repeat center center;
  background-size: cover;
  display: inline-block;
  position: absolute;
  z-index: 3;
}
.tribbles2 {
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/tribbles/tribble_2.svg) no-repeat center center;
  background-size: cover;
}
.tribbles3 {
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/tribbles/tribble_3.svg) no-repeat center center;
  background-size: cover;
}
.tribbles4 {
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/tribbles/tribble_4.svg) no-repeat center center;
  background-size: cover;
}
.tribbles5 {
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/tribbles/tribble_5.svg) no-repeat center center;
  background-size: cover;
}
.klingons1 {
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/klingons/klingon_1.svg) no-repeat center center;
  background-size: cover;
}
.klingons2 {
  background: url(https://samwhindleton.github.io/trouble-in-tribble-town/images/klingons/klingon_2.svg) no-repeat center center;
  background-size: cover;
}
/* characters animation */
.characters-animation {
  animation-duration: var(--animation-time);
  animation-iteration-count: infinite;
  animation-name: characters-animation;
  animation-timing-function: ease-in-out;
}
@keyframes characters-animation {
  /* transform: translate(x, y); */
  from {
    transform: translate(0, -100vh);
  }
  to {
    transform: translate(0, 200vh);
  }
}
/* messages container */
#messages-container {
  /* hide visibility, using jQuery to change */
  visibility: hidden;
  z-index: 1;
}
#messages {
  max-height: 60vh;
  max-width: 60vw;
  background: #20322c;
  border: 1vmin solid #888787;
  border-radius: 1vmin;
  color: #EAFAF9;
  font-size: 5vmin;
  padding: 7vmin;
  position: absolute;
  text-align: center;
}
/* message bounce in animation */
.messages-in {
  animation-name: messages-bounce-in;
  animation-duration: 1.2s;
}
@keyframes messages-bounce-in {
  from,
  62%,
  80%,
  92%,
  to {
    animation-timing-function: cubic-bezier(0.182, 0.582, 0.305, 0.98);
  }
  0% {
    opacity: 0;
    transform: translate(0, -2800%);
  }
  62% {
    opacity: 1;
    transform: translate(0, 30%);
  }
  80% {
    transform: translate(0, -12%);
  }
  92% {
    transform: translate(0, 8%);
  }
  to {
    transform: translate(0, 0);
  }
}
/* message bounce out animation */
.messages-out {
  animation-name: messages-bounce-out;
  animation-duration: 1s;
}
@keyframes messages-bounce-out {
  from,
  21%,
  37%,
  48%,
  to {
    animation-timing-function: cubic-bezier(0.98, 0.305, 0.582, 0.182);
  }
  21% {
    transform: translate(0, -12%);
  }
  37% {
    opacity: 1;
    transform: translate(0, 18%);
  }
  48% {
    opacity: 0.98;
    transform: translate(0, 18%);
  }
  to {
    opacity: 0;
    transform: translate(0, -1600%);
  }
}
/* start button */
#start-button img {
  height: 20vmin;
}
/* start button animation */
.start-button-animation {
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-name: start-button-animation;
  animation-timing-function: ease-in-out;
  padding: 2vmin;
}
@keyframes start-button-animation {
  from {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.13, 1.13);
  }
  to {
    transform: scale(1, 1);
  }
}
#info-button img {
  height: 6vmin;
  padding: 2vmin;
  position: fixed;
}
#info-container {
  height: 100vh;
  width: 100vw;
  position: relative;
  visibility: hidden;
  z-index: 1;
  align-items: center;
  display: flex;
  justify-content: center;
}
#info-messages {
  height: 70vh;
  width: 70vw;
  background: #EAFAF9;
  border-radius: 1vmin;
  box-shadow: var(--trouble-text);
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8vmin;
  line-height: 1.2;
  padding: 5vmin 9vmin;
  text-align: justify;
}
#info-messages img {
  height: 5vmin;
  margin: 1vmin;
}
#info-messages #close {
  float: right;
  height: 3.2vmin;
}

/* ****************************************
  FONTS
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-family: 'Sarpanch', sans-serif;
  font-family: 'Montserrat', sans-serif;
**************************************** */