@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/pricedown');

.text-health { color: rgb(33, 171, 97) !important; }
.text-stress { color: rgb(255, 0, 0) !important; }
.text-nos { color: rgb(255, 72, 133) !important; }
.text-cruise { color: rgb(255, 72, 133) !important; }
.text-armed { color: rgb(255, 72, 133) !important; }
.text-harness { color: rgb(182, 72, 255) !important; }
.text-oxygen { color: rgb(138, 168, 189) !important; }
.text-parachute { color: rgb(0, 0, 0) !important; }
.text-dev { color: rgb(0, 0, 0) !important; }
.text-gauge { color: rgb(255, 255, 255) !important; }

* {
  font-family: "Poppins", sans-serif;
}

#main-container {
  width: 100%;
  height: 100%;
}

/* Money */
#money-container {
  position: absolute;
  right: 2vw;
  top: 2vh;
  font-weight: 400;
  font-size: 40px;
}

#sign, #bank {
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #00ac31;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

#plus {
  font-size: 50px;
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #00ac31;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

#minus {
  font-size: 50px;
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #ac0000;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

#money {
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #ffffff;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

/* Player HUD */

#playerhud {
  position: absolute;
  display: flex;
  left: 3vh;
  bottom: 0.2vw;
}

.q-ml-xl {
  margin-left: -23.7px!important; /* Change this to space radials */
}

/* Vehicle HUD */

speed:after {
  content: "MPH"; /* If using KPH change this content from MPH */
  display: block;
  padding-top: 3px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 8px;
  font-weight: 900;
}

altitude:after {
  content: "ALT";
  display: block;
  padding-top: 10px;
  padding-left: 2px;
  padding-right: 2px;
  font-weight: 900;
}

speed {
  transform: rotate(150deg);
  font-size: 2.4vh;
  position: fixed; 
  color: #fff; 
  text-align: center;
  font-weight: 600;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); 
}

altitude {
  transform: rotate(135deg);
  font-size: 2.4vh;
  position: fixed; 
  color: #fff; 
  text-align: center;
  font-weight: 600;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); 
}

.border {
  bottom: 7.9%;
  left: 1.3%;
  width: 0%;
  text-align: center;
}

.square {
  bottom: 6.30%;
  width: 29vh;
  height: 18.5vh;
  border: 4px solid #bababa;
  position: absolute;
  display: inline-block;
}

.circle {
  bottom: 6.9%;
  width: 27vh;
  height: 22.9vh;
  border: 4px solid #bababa;
  position: absolute;
  display: inline-block;
  border-radius: 50%;
}

/* Animation */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}