:root{
  /* Primary Colors */
  /*
  --color-main: #7d9aa8;
  --color-hover: #55869d;
  --color-active: #55869d;*/

  --color-main: #44aadc;
  --color-hover: #3094c5;
  --color-active: #1982b5;

  /*--color-main: #91db69;
  --color-hover: #1ebc73;
  --color-active: #fbb954;*/

  /* Secondary Colors */
  --color-secondary-main: #FFDD55;
  --color-secondary-hover: #FFD633;
  --color-secondary-active: #FFD11A;

  /* Game Background */
  --game-background: center no-repeat
                     url("../../artwork/bg.svg"),
                     radial-gradient(circle at center,
                                        var(--color-main) 20%,
                                        var(--color-hover) 40%,
                                        var(--color-active) 70%);

  /* Game Box */
  --game-box-border-radius: 1vh;
  --game-box-border: 0.5vh solid black;
  --game-box-box-shadow: -0.5vh 1vh black;
}

@font-face{
  font-family: FontTitle;
  src: url("../artwork/fonts/LuckiestGuy-Regular.ttf");
}

@font-face{
  font-family: FontText;
  src: url("../artwork/fonts/VarelaRound-Regular.ttf");
}

@font-face{
  font-family: FontPixel;
  src: url("../artwork/fonts/unifont-15.1.01.otf");
}

@font-face{
  font-family: FontInGame;
  src: url("../artwork/fonts/Roboto.ttf");
}

body{
  color: white;
  text-align: center;
  font-family: FontText;
  overflow: hidden;
  line-height: 5vh;
  user-select: none;
  -webkit-user-drag: none;
  margin: 0;
  display: none;
  font-size: 2.6vh;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  /*position: relative;
  z-index: -2;*/
}

img{
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: -moz-none;
  pointer-events: none;
}

button::-moz-focus-inner, .game-btn::-moz-focus-inner{
  border: 0;
}

#gameCanvasContainer {
  overflow: clip;
  position: absolute;
  height: 100%;
  width: 100%;
}

#gameCanvas{
  /*z-index: -2;*/
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.game-box, .game-btn{
  border-radius: var(--game-box-border-radius);
  border: var(--game-box-border);
  box-shadow: var(--game-box-box-shadow);
  background: var(--color-main);
  margin: 0;
  padding: 0;
  /*display: block;*/
}

.game-btn{
  background: var(--color-secondary-main);
  color: black;
  font-size: 3vh;
  width: 31.8vh;
  height: 10vh;
  margin: auto;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -0.5vh 0.5vh black;
}

.game-btn:focus{
  outline: none;
}

.game-btn:hover{
  background: var(--color-secondary-hover);
}

.game-btn:active{
  background: var(--color-secondary-active);
}

.game-title{
  text-transform: uppercase;
  position: absolute;
  font-family: FontTitle;
  -webkit-text-stroke: 0.9vh black;
  filter: drop-shadow(-0.1vh 0.5vh 0 black);
  color: white;
  font-size: 5vh;
  text-align: center;
  width: 100%;
}

.game-title::before{
  content: attr(outline);
  position: absolute;
  -webkit-text-stroke: 0;
}

.game-btn-checkbox, .game-btn-checkbox-selected{
  display: inline-block;
  background: white;
  width: 4vh;
  height: 4vh;
  border: var(--game-box-border);
  box-shadow: -0.4vh 0.4vh black;
  cursor: pointer;
  border-radius: 3vh;
}

.game-btn-checkbox-selected{
  background: var(--color-secondary-main);
}

.game-btn-checkbox-selected::after{
  content: "";
  background-image: url('../artwork/interface/check.svg');
  background-size: 100% 100%;
  width: 4vh;
  height: 4vh;
  bottom: 0.4vh;
  left: 0.4vh;
  position: relative;
  display: block;
}

img:-moz-broken{
  opacity: 0
}

*::-webkit-scrollbar {
  width: 3vh;
  height: 3vh;
}

*::-webkit-scrollbar-track {
  background: var(--color-active);
  border-radius: 3vh;
}

*::-webkit-scrollbar-thumb {
  border-radius: 2vh;
  background-color: var(--color-main);
  border: 0.6vh solid var(--color-active);
}

@media all and (orientation: portrait) {
  .game-title {
    font-size: 4vh;
  }

  #gameCanvas {
    /*image-rendering: pixelated;*/ /* dont remember why i put that, but it was making the zoom-out too low-quality on mobile */
  }

  .game-title::before {
    left: 0;
    right: 0;
  }
}