@font-face {
  font-family: f;
  src: url("media/FutureMillennium.ttf");
}
::-webkit-scrollbar {
  background: transparent;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 5px;
}

body {
  padding: 0;
  margin: 0;
}

#full-area {
  width: 100%;
  height: 100vh;
  background: #000;
  user-select: none;
  font-family: f;
}
#full-area #game-area {
  width: 1084px;
  height: 718px;
  position: absolute;
  background: #89d7fc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 3px;
  overflow: hidden;
}
#full-area #game-area #characters {
  position: absolute;
  width: 100%;
  height: 240px;
  z-index: 10;
  top: 100%;
  transform: translateY(-100%);
  left: 25px;
}
#full-area #game-area #characters img {
  max-height: 80px;
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
  margin-top: 0%;
  left: 0;
}
#full-area #game-area #start-btn {
  position: absolute;
  background: #1a7a3fef;
  color: white;
  width: 200px;
  left: 50%;
  top: 50px;
  z-index: 100;
  transform: translateX(-50%);
  text-align: center;
  font-size: 30px;
  border: none;
  border-radius: 3px;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.459);
  outline: none;
  display: none;
}
#full-area #game-area #start-btn:hover {
  background: #1a7a3fcc;
}
#full-area #game-area #play-page {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  transition: left 20s linear;
}
#full-area #game-area #play-page #timer {
  font-size: 150px;
  position: absolute;
  color: #1a7a3fcc;
  z-index: 100;
  width: 100%;
  text-align: center;
  display: none;
}
#full-area #game-area #play-page #sky {
  width: 1200%;
  height: 225px;
  position: absolute;
}
#full-area #game-area #play-page #sky #cloud1 {
  position: absolute;
  top: 20px;
  left: 50px;
  height: 100px;
}
#full-area #game-area #play-page #sky #cloud2 {
  position: absolute;
  top: 20px;
  left: 450px;
  height: 50px;
}
#full-area #game-area #play-page #sky #cloud3 {
  position: absolute;
  top: 80px;
  left: 670px;
  height: 80px;
}
#full-area #game-area #play-page #wood {
  width: 1200%;
  height: 130px;
  background: url("media/default/wood.webp");
  position: absolute;
  top: 214px;
}
#full-area #game-area #play-page #road {
  width: 1200%;
  height: 240px;
  background: url("media/default/road.webp");
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
}
#full-area #game-area #play-page #road #start-line {
  height: 100%;
  width: 20px;
  position: absolute;
  left: 100px;
  background: url("media/default/startline.webp");
  background-size: cover;
}
#full-area #game-area #play-page #road #end-line {
  height: 100%;
  width: 20px;
  position: absolute;
  left: 10950;
  background: url("media/default/endline.webp");
  margin-left: 2px;
}
#full-area #game-area #play-page #grass {
  width: 1200%;
  height: 135px;
  background: url("media/default/green.webp");
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  margin-top: -240px;
}
#full-area #game-area #play-page #grass #grass-obs {
  width: 100%;
  height: 16px;
  background: url("media/default/obs.webp");
  position: relative;
  top: 100%;
  z-index: 9;
  transform: translateY(-100%);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.212);
}
#full-area #game-area #play-page #grass #grass-spectators {
  width: 100%;
  height: 100%;
  position: absolute;
}
#full-area #game-area #play-page #grass #grass-spectators img {
  height: 90%;
  position: absolute;
  margin-top: -16px;
  left: 20px;
}
#full-area #game-area #play-page #grass #grass-trees {
  width: 100%;
  height: 100%;
  position: absolute;
}
#full-area #game-area #play-page #grass #grass-trees img {
  height: 130%;
  position: absolute;
  margin-top: -100px;
  left: 420px;
}
#full-area #game-area #play-page #grass #end-column {
  width: 40px;
  position: absolute;
  left: 10950;
  top: -65px;
  margin-left: -10px;
}
#full-area #game-area #leaderboard {
  width: 200px;
  height: 150px;
  background: #bb7547bc;
  position: absolute;
  z-index: 100;
  left: 100%;
  transform: translateX(-100%);
  margin: 25px -30px;
  border: 2px solid white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.404);
  display: none;
}
#full-area #game-area #leaderboard h1 {
  color: white;
  font-size: 15px;
  border-bottom: 2px solid white;
  padding: 2.5px 10px;
}
#full-area #game-area #leaderboard svg {
  position: absolute;
  margin-left: 60px;
  margin-top: 1.5px;
  cursor: pointer;
}
#full-area #game-area #leaderboard #players {
  width: 100%;
  height: 110px;
  overflow: hidden;
  overflow-y: scroll;
}
#full-area #game-area #leaderboard #players #player {
  display: flex;
}
#full-area #game-area #leaderboard #players #player #player-rank {
  color: white;
  margin-left: 3px;
  width: 30px;
  text-align: center;
}
#full-area #game-area #leaderboard #players #player #player-img {
  max-height: 20px;
  margin-top: 0px;
  position: relative;
  left: 0;
  margin-left: 5px;
  left: 0;
}
#full-area #game-area #map {
  width: 250px;
  height: 2px;
  background: #1a7a3fef;
  margin: 30px 30px;
  position: absolute;
  z-index: 100;
  border-radius: 5px;
  display: none;
}
#full-area #game-area #map #map-character {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-size: cover;
  position: absolute;
  transform: translateY(-43%);
  left: 0%;
  z-index: 2;
  transition: left 20s linear;
}
#full-area #game-area #map #map-end {
  border-radius: 3px;
  width: 15px;
  position: absolute;
  left: 100%;
  transform: translate(-100%, -43%);
  opacity: 0.9;
}
#full-area #game-area #map-menu {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.754);
  z-index: 900;
}
#full-area #game-area #map-menu h1 {
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 20%;
}
#full-area #game-area #map-menu #map-btns {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}
#full-area #game-area #map-menu #map-btns div {
  width: 250px;
  height: 250px;
  background: red;
  margin: 0 10px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.442);
  cursor: pointer;
  border: 3px solid white;
}
#full-area #game-area #map-menu #map-btns div:hover {
  transform: scale(1.05);
  transition: 0.1s;
}

/*# sourceMappingURL=index.css.map */