#date,
#clock,
#time,
#logo {
  position: absolute;
}
#logo {
  top: 3vh;
}
#logo {
  right: 4vh;
}
#date,
#stick,
#stick2,
#hashtag,
#logo,
#playerId,
#players,
#time,
#clock {
  float: right;
}
#logo {
  width: 6vh;
}
#clock,
#time {
  color: rgb(255, 255, 255);
}
#clock {
  right: 3.5vh;
}
#clock {
  bottom: 86.5vh;
  font-size: 22px;
}
#players,
#date,
#playerId,
#time {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
#time {
  top: 10vh;
}
#time {
  right: 6.5vh;
}
#time,
#players,
#playerId,
#date {
  font-weight: 500;
  font-size: 35px;
}
#date {
  top: 6vh;
}
#date {
  right: 12vh;
}
#date {
  color: #fffefe00;
}
#stick {
  position: relative;
}
#stick {
  top: 2.9vh;
}
#stick {
  right: 10vh;
}
#stick {
  width: 0.1vh;
}
#stick {
  height: 5vh;
}
#stick {
  background: #ffffff;
}
#stick {
  margin-right: 12vh;
}
#stick {
  margin-right: -0.9vh;
  font-size: 17px;
}
#playerId,
#players,
#graduatedIcon,
#hashtag {
  position: absolute;
}
#hashtag {
  right: 11.0vh;
}
#hashtag {
  top: 5.5vh;
}
#hashtag,
#playerId {
  color: white;
}
#playerId {
  right: 27vh;
}
#playerId {
  top: 4.2vh;
}
#players {
  top: 6vh;
}
#players {
  right: 25vh;
}
#players {
  color: #ffffff;
}
#graduatedIcon {
  top: 5.5vh;
}
#graduatedIcon {
  right: 25.5vh;
}
#graduatedIcon,
#job,
#grade {
  float: right;
}
#graduatedIcon,
#job {
  color: white;
}
#grade,
#job {
  display: inline;
}
#job {
  width: 10vh;
}
#grade,
#job {
  height: 2vh;
}
#job,
#grade {
  position: relative;
}
#grade,
#fuelicon,
#job,
#gear {
  text-align: center;
}
#job {
  right: 2.5vh;
}
#job {
  top: 15.5vh;
}
#speed,
#grade,
#job,
#gear {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
#gear,
#job,
#grade,
#speed {
  font-weight: bold;
}
#grade {
  width: 14vh;
}
#grade {
  top: 17.7vh;
}
#grade {
  right: -8.8vh;
}
#grade {
  color: #ffffffce;
}
#speedHud,
#speed,
#gearbox {
  position: absolute;
}
#speedHud {
  top: 90vh;
}
#speed {
  bottom: -4vh;
}
#speed {
  left: 160vh;
}
#speed {
  font-size: 4vh;
}
#speed.speed-zero {
  color: rgba(143, 141, 141, 0.685);
}
#speed.speed-fade-in {
  color: white;
  transition: color 1s ease-in-out;
}
#fuelicon,
#engineIcon,
#speed,
#gear {
  color: white;
}
#gearbox {
  left: 168vh;
}
#gearbox {
  top: 0.4vh;
}
#gearbox {
  width: 3vh;
}
#gearbox {
  height: 3vh;
}
#gearbox,
#enginebox,
#fuelbox {
  background-color: rgba(0, 0, 0, 0);
}
#heartbox {
  background-color: rgb(0, 0, 0);
}
#fuelbox,
#gearbox,
#heartbox,
#enginebox {
  border-radius: 0.5vh;
}
#gear {
  position: relative;
}
#gear,
#engineIcon,
#fuelicon {
  vertical-align: center;
}
#gear {
  top: 0.15vh;
}
#gear {
  font-size: 2vh;
}
#fuelbox {
  position: absolute;
}
#fuelbox {
  left: 164vh;
}
#fuelbox {
  top: 3.5vh;
}
#fuelbox {
  width: 3.5vh;
}
#fuelbox,
#shieldbox,
#heartbox,
#enginebox {
  height: 2.9vh;
}
#fuelicon {
  position: relative;
}
#fuelicon {
  top: 1vh;
}
#fuelicon {
  left: 0.5vh;
}
#enginebox,
#progressfuel {
  position: absolute;
}
#progressfuel {
  left: 6.6vh;
}
#progressfuel {
  height: 9.9vh;
  transform: rotate(270deg);
}
#engineLevel {
  bottom: -5.5vh;
}
#progressfuel {
  bottom: -3.7vh;
}
#progressfuel {
  width: 1vh;
}
#engineLevel {
  height: 9.9vh;
  transform: rotate(270deg);
}
#enginebox {
  left: 160vh;
}
#enginebox {
  top: 3.5vh;
}
#enginebox {
  width: 3.5vh;
}
#engineIcon {
  position: relative;
}
#engineIcon {
  top: 2.9vh;
}
#engineIcon {
  left: 3.7vh;
}
#heartbox,
#shieldbox,
#engineIcon,
#foodbox {
  text-align: center;
}
#engineLevel {
  position: absolute;
}
#engineLevel {
  left: 9.8vh;
}
#engineLevel {
  width: 1vh;
}
#foodbox,
#shieldbox,
#heartbox,
#waterbox {
  width: 3.5vh;
}
#waterbox,
#foodbox,
#heartbox,
#shieldbox {
  margin-left: 0.1vh;
}
#waterbox,
#heartbox,
#shieldbox,
#foodbox {
  margin-bottom: 0.2vh;
}
#heartbox,
#shieldbox,
#waterbox,
#foodbox {
  margin-right: 0vh;
}
#heartbox,
#waterbox,
#foodbox,
#shieldbox {
  margin-top: 1.7vh;
}
#foodbox,
#shieldbox,
#heartbox,
#waterbox {
  align-self: flex-end;
}
#waterbox,
#shieldbox,
#foodbox,
#heartbox {
  display: flex;
}
#waterbox,
#heartbox,
#shieldbox,
#foodbox {
  align-items: center;
}
#foodbox,
#shieldbox,
#heartbox,
#waterbox {
  justify-content: center;
}
#waterbox,
#shieldbox,
#foodbox {
  border-radius: 0.5vh;
}
#foodbox,
#shieldbox,
#waterbox {
  background-color: rgb(0, 0, 0);
}
#foodbox,
#waterbox {
  height: 3.0vh;
}
#shield,
#heart,
#apple,
#waterbox,
#water {
  text-align: center;
}
#water,
#apple,
#heart,
#progressfood,
#progressHealth,
#shield,
#progresswater,
#progressshield {
  position: relative;
}
#shield,
#heart,
#apple,
#water {
  top: -0.1vh;
}
#heart,
#shield,
#apple,
#water {
  left: 0.7vh;
}
#heart {
  color: rgb(238, 91, 86);
}
#water {
  color: rgb(86, 195, 238);
}
#apple {
  color: rgba(255, 238, 2, 0.904);
}
#shield {
  color: rgb(58, 116, 241);
}
#water,
#shield,
#heart,
#apple {
  vertical-align: center;
}
#water,
#apple,
#heart,
#shield {
  font-size: 1.8vh;
}
#progresswater,
#progressshield,
#progressHealth,
#progressfood {
  left: 0.9vh;
}
#progressHealth {
  top: 0.62vh;
}
#progressHealth {
  width: 1.5vh;
}
#progressshield {
  top: 0.62vh;
}
#progressshield {
  width: 1.5vh;
}
#progressfood {
  top: 0.6vh;
}
#progressfood {
  width: 1.5vh;
}
#progresswater {
  top: 0.6vh;
}
#progresswater {
  width: 1.5vh;
}
#progresswater,
#progressHealth,
#progressshield,
#progressfood {
  transform: rotate(270deg);
}
#statusHud {
  position: absolute;
}
#statusHud {
  width: fit-content;
}
#statusHud {
  height: fit-content;
}
#statusHud {
  left: 0%;
}
#statusHud {
  bottom: 30%;
}
#statusHud {
  display: flex;
}
#statusHud {
  flex-direction: column;
}
#statusHud {
  margin-left: 0vh;
}
#statusHud {
  margin-bottom: 0.2vh;
}
#statusHud {
  margin-right: 0vh;
}
#statusHud {
  margin-top: 0.2vh;
}
#statusHud {
  align-self: flex-end;
}
body {
  user-select: none;
}

#border {
  position: absolute;
  right: -8vh;
  top: 15vh;
  font-size: 1.2vh;
  height: 50px;
  color: rgba(255, 255, 255, 0);
  font-family: 'Roboto';
  background-color: rgba(255, 255, 255, 0);
  transform: translate(-50%, 0%);
  padding: 0.30% 5.0%;
  border-radius: 5%;
  z-index: 5;
}

#border2 {
  position: absolute;
  right: 17vh;
  top: 3vh;
  font-size: 1.2vh;
  height: 50px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto';
  background-color: rgba(87, 86, 86, 0.274);
  transform: translate(-50%, 0%);
  padding: 0.30% 3.30%;
  border-radius: 5%;
  z-index: 5;
}

#border3 {
  position: absolute;
  right: 3.5vh;
  top: 3vh;
  font-size: 1.2vh;
  height: 50px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto';
  background-color: rgba(87, 86, 86, 0.274);
  transform: translate(-50%, 0%);
  padding: 0.30% 3.50%;
  border-radius: 5%;
  z-index: 5;
}

#stick2 {
  position: relative;
}
#stick2 {
  top: 17.9vh;
}
#stick2 {
  right: -9vh;
}
#stick2 {
  width: 0.1vh;
}
#stick2 {
  height: 2vh;
}
#stick2 {
  background: #ffffff;
}
#stick2 {
  margin-right: 12vh;
}
#stick2 {
  margin-right: -0.9vh;
  font-size: 17px;
}


#stick3 {
  position: relative;
}
#stick3 {
  top: 76.2vh;
}
#stick3 {
  right: -14vh;
}
#stick3 {
  width: 0.1vh;
}
#stick3 {
  height: 2vh;
}
#stick3 {
  background: #ffffff;
}
#stick3 {
  margin-right: 12vh;
}
#stick3 {
  margin-right: -0.9vh;
  font-size: 17px;
}