:root {
  font-family: "din-2014", sans-serif;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html,
canvas {
  width: -webkit-fill-available;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #f47920;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/gamebg.jpg);
  touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
body * {
  font-family: "din-2014", sans-serif;
  color: white;
}

@media only screen and (max-width: 768px) {
  body {
    background-image: none;
  }
}
button, a {
  position: absolute;
  outline: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  border-radius: 8px;
}
button img, a img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

button:focus,
button:focus-visible {
  outline: none;
}

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  font-size: 18px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameContainer,
.gameOverlay,
.canvas {
  position: absolute;
  margin: auto;
  height: 177.777dvw;
  width: 100vw;
  max-height: 100dvh;
  max-width: 56.25dvh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

canvas {
  border: 0;
  outline: none;
}

.start__button {
  top: 78.6%;
  left: 18.3%;
  width: 63.7%;
  height: 8.2%;
}

.ranking__button {
  top: 88.7%;
  left: 18.3%;
  width: 63.7%;
  height: 8.2%;
}

.before__start__button {
  top: 33.5%;
  left: 18.3%;
  width: 63.7%;
  height: 8.2%;
}

.second__before {
  top: 39.5%;
}

.points__p {
  position: absolute;
  top: 34.5%;
  left: 25.2%;
  font-size: 8.2vh;
  font-family: "din-condensed", sans-serif;
  margin: 0;
  color: #f47920;
}

.points__p.active__font {
  font-size: 14.57vw;
}

form input {
  position: absolute;
  background-color: transparent;
  resize: none;
  margin: 0;
  outline: none;
  border: 0;
  color: #012d6b;
  font-family: "din-condensed", sans-serif;
  font-weight: 400;
  font-size: 3vh;
  background-color: white;
  width: 82.7%;
  height: 3.4%;
  left: 6.7%;
  padding: 2%;
  border-radius: 15px;
  box-shadow: inset 0px 3px 8px 0px rgb(66, 68, 90);
}
form input.active__font {
  font-size: 5.33vw;
}
form input::-moz-placeholder {
  color: #012d6b;
  font-family: "din-condensed", sans-serif;
  font-weight: 400;
}
form input::placeholder {
  color: #012d6b;
  font-family: "din-condensed", sans-serif;
  font-weight: 400;
}
form #nick {
  top: 49.5%;
}
form #full__name {
  top: 57.1%;
}
form #email {
  top: 64.7%;
}
form input:-webkit-autofill.show-error,
form input:-webkit-autofill:hover.show-error,
form input:-webkit-autofill:focus.show-error,
form input:-webkit-autofill:active.show-error,
form .show-error {
  background-color: #ff0033;
}
form input[type=checkbox] {
  display: none;
}
form input[type=checkbox] + label {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  padding: 0 0 0 0px;
  background-position: left !important;
  background: url(../img/checkbox.png) no-repeat;
  height: 2.9%;
  width: 6.4%;
  background-size: contain !important;
  left: 6.6%;
}
form .rules_checkbox + .rules_label {
  top: 72.3%;
}
form .privacy_checkbox + .privacy_label {
  top: 76.5%;
}
form input[type=checkbox]:checked + label {
  background: url(../img/checkbox_ok.png) no-repeat !important;
  background-size: contain !important;
}
form .checkbox_error {
  background: url(../img/checkbox_bad.png) no-repeat !important;
  background-size: contain !important;
}
form .send-button {
  cursor: pointer;
  top: 82.1%;
  left: 23.9%;
  width: 52.3%;
  height: 6.7%;
  padding: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
  border-radius: 12px;
}

.play__again__button {
  position: absolute;
  top: 90.8%;
  left: 27.9%;
  width: 44.3%;
  height: 5.6%;
}

.backBttn {
  top: 89.2%;
  width: 74.1%;
  height: 7.1%;
  left: 13.1%;
  border-radius: 10px;
}

.rankingRecords,
.personalRecords {
  position: absolute;
  top: 36.1%;
  left: 3.4%;
  width: 94%;
  height: 42%;
}
.rankingRecords .personalRecords,
.personalRecords .personalRecords {
  top: 82%;
  left: 11%;
  width: 82%;
}
.rankingRecords p,
.personalRecords p {
  position: absolute;
  font-size: 3.05vh;
  margin: 0;
  font-family: "din-condensed", sans-serif;
}
.rankingRecords p.active__font,
.personalRecords p.active__font {
  font-size: 5.4vw;
}
.rankingRecords .nameRecord,
.personalRecords .nameRecord {
  left: 7.1%;
}
.rankingRecords .pointsRecord,
.personalRecords .pointsRecord {
  left: 62.5%;
}
.rankingRecords .pointsRecord2,
.personalRecords .pointsRecord2 {
  left: 77.5%;
}
.rankingRecords .pointsTotal,
.personalRecords .pointsTotal {
  left: 90.4%;
  color: #f47920;
}
.rankingRecords .singleRecord,
.personalRecords .singleRecord {
  text-transform: uppercase;
  color: white;
  display: flex;
  flex-direction: row;
  height: 10%;
}
.rankingRecords .PositionRecord,
.personalRecords .PositionRecord {
  color: #f47920;
}

.personalRecords {
  top: 84.7%;
}

.rules_link {
  position: absolute;
  top: 72.8%;
  left: 27.6%;
  height: 1.9%;
  width: 25.9%;
  border-radius: 0;
  background-color: transparent;
}/*# sourceMappingURL=style.css.map */