/* press-start-2p-regular - cyrillic-ext_cyrillic_greek_latin-ext_latin */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/press-start-2p-v6-cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Press Start 2P Regular'), local('PressStart2P-Regular'),
       url('./fonts/press-start-2p-v6-cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/press-start-2p-v6-cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/press-start-2p-v6-cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/press-start-2p-v6-cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/press-start-2p-v6-cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.svg#PressStart2P') format('svg'); /* Legacy iOS */
}

html, body{
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    font-family: 'Press Start 2P', sans-serif;
    color: white;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.hidden{
  display: none;
}

.startButton{
  position: absolute;
  width: 200px;
  height: 60px;
  bottom: 150px;
  left: calc(50vw - 100px);
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  border: 2px solid white;
  cursor: pointer;
  background-color: rgba(0, 0, 0, .5);
}

canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

.scores{
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
}

.textBlock{
  position: absolute;
  width: 80vw;
  left: 10vw;
  text-align: center;
  height: auto;
  background-color: rgba(0, 0, 0, .5);
}

#text{
  top: 5vh;
}

@media only screen and (min-height: 550px){
#text{
  top: 15vh;
}
}

@media only screen and (min-height: 700px){
#text{
  top: 30vh;
}
}

#credits{
  bottom: 50px;
}

.big{
  line-height: 24px;
  font-size: 24px;
}

a{
  color: white;
}