#rip-hud {
    opacity: 0;
    transition: all 187ms ease;
}

/* MAIN */
#main-body {
    position: fixed;
    width: auto;
    height: auto;
    top: .2vh;
    right: 1vh;
}

#main-name-titel {
    width: auto;
    margin: 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 4.4vh;
    font-weight: bolder;
    text-align: right;
    line-height: 5vh;
    color: var(--main);
    filter: drop-shadow(0vh 0vh 2.6vh var(--glow));
}
#main-name-subtitel {
    margin: 0 .9vh 1vh 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 2.6vh;
    font-weight: bolder;
    font-style: italic;
    text-align: right;
    line-height: 2.5vh;
    color: #FFFFFF90;
    filter: drop-shadow(0vh 0vh .6vh #FFF);
}

#main-time {
    position: relative;
    width: 100%;
    height: 3.5vh;
    margin: 1vh 0 0 auto;
    padding: 0 .5vh;

    display: block;
}

#main-job {
    position: relative;
    width: 100%;
    height: 3.5vh;
    margin: 1vh 0 0 auto;
    padding: 0 .5vh;

    display: block;
}

.main-money {
    position: relative;
    width: 100%;
    height: 3vh;
    margin: 1vh 0 0 auto;
    padding: 0 .5vh;

    display: block;
}

.main-voice {
    position: absolute;
    width: auto;
    height: 3vh;
    margin: 1vh 0 0 auto;
    padding: 0 .5vh;
    right: 0;

    background: var(--background-color);
    border-radius: 1vh;
    display: block;
}
#main-voice-icon {
    margin: 0 .5vh 0 .75vh;
    float: right;

    font-size: 1.5vh;
    line-height: 3vh;
    color:  #FFFFFF90;

    transition: all .2s ease;
}
.main-voice-range {
    height: .75vh;
    width: .75vh;
    margin: 1.125vh .5vh;
    float: left;

    background: #FFFFFF20;
    border-radius: .75vh;
}
.main-voice-range-active {
    background: var(--main);
    box-shadow: 0vh 0vh 1vh 0vh var(--main);
}

.main-value {
    width: auto;
    height: 3.5vh;
    margin: 0 .5vh 0 0;
    padding: 0 1vh;
    float: right;

    background: var(--background-color);
    border-radius: var(--background-border);
    line-height: 3.5vh;
    display: flex;
}
.main-value-small {
    height: 3.2vh;
    line-height: 3.2vh;
}
.main-value span:nth-child(1) {
    width: auto;
    height: inherit;
    margin: 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.9vh;
    font-weight: bold;
    line-height: inherit;
    color: #FFFFFF;
    filter: drop-shadow(0vh 0vh .6vh #ffffff90);
}
.main-value span:nth-child(2) {
    width: auto;
    height: inherit;
    margin: 0 0 0 .5vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.9vh;
    font-weight: normal;
    line-height: inherit;
    color: #FFFFFF60;
    filter: drop-shadow(0vh 0vh .6vh #ffffff90);
}
.main-icon {
    height: inherit;
    margin: 0 0 0 .5vh;
    float: right;

    font-size: 1.75vh;
    line-height: inherit;
    color:  var(--main);
    filter: drop-shadow(0vh 0vh 1vh var(--main));
}

/* STATUS */
#status-body {
    position: fixed;
    width: 25vh;
    height: 3.5vh;
    left: 2vh;
    bottom: 20.5vh;
}

.status-box {
    width: 47.5%;
    height: 100%;
    margin: 0;
    float: left;

    background: linear-gradient(to top, #FFFFFF20 0%, #FFFFFF20 0%);
    border-radius: 1vh;
    box-shadow: 0vh 0vh 9vh 0vh var(--glow);
}
.status-box:last-child {
    margin-left: 5%;
}

.status-box-icon {
    width: 4.5vh;
    height: 3.5vh;
    margin: 0;

    font-size: 1.75vh;
    text-align: center;
    line-height: 3.5vh;
    color: #fff;
    filter: drop-shadow(0vh 0vh .6vh #fff);
}

#status-hunger {
    background: linear-gradient(to right, var(--hunger) 10%, var(--background-color) 10%);
    display: block;
}
#status-thirst {
    background: linear-gradient(to right, var(--thirst) 10%, var(--background-color) 10%);
    display: block;
}

/* AMMO */
#ammo-body {
    position: fixed;
    width: auto;
    height: 3vh;
    right: 2vh;
    bottom: 1.5vh;

    opacity: 0;
    transition: opacity .2s;
}

.ammo-text {
    width: auto;
    height: 3vh;
    margin: 0 1% 0 0;
    padding: 0;
    float: right;

    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    line-height: 3.2vh;
    color: #FFFFFF;
    filter: drop-shadow(0 0 1.75vh #FFFFFF60);
}
.ammo-icon {
    width: 3vh;
    height: 3vh;
    margin: 0 -10% 0 0;
    padding: 0;
    float: right;

    font-size: 2.5vh;
    line-height: 3vh;
    color: var(--main);
    filter: drop-shadow(0 0 1.5vh var(--main));
}
.ammo-glow {
    position: fixed;
    width: 9vh;
    height: 9vh;
    right: 0vh;
    bottom: -11vh;

    background: #fff00020;
    box-shadow: 0 0 9vh 3vh var(--glow);
    z-index: 1;
}

/* CAR POSITION */
.car-right {
    position: fixed;
    right: 1vh;
}
.car-bottom {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

/* CAR 1*/
#car-body-1 {
    width: 16vh;
    height: 16vh;
    bottom: 1vh;

    opacity: 0;
    transition: opacity .2s;
}

.progress-bar-line-none {
    stroke: var(--background-color);
    stroke-width: .26vh;
    fill: none;
    stroke-linecap: round; 
    transform: translate(-1042px, -1082px);
    transition: all .3s ease;
}
.progress-bar-line-inner {
    stroke-dasharray: calc(97.6754 + 20), calc(97.6754 + 20);
    stroke-dashoffset: 97.6754;
    fill: none;
    stroke-linecap: round;
    stroke-width: .26vh;
    fill-rule: evenodd;
    stroke: var(--main);
    transform: translate(-1042px, -1082px);
    transition: all .3s ease;
}

.car-1-speed {
    position: absolute;
    width: auto;
    margin: 0;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    font-family: 'Arial Black', sans-serif;
    font-size: 4vh;
    font-weight: bold;
    text-align: center;
    line-height: 14.4vh;
    color: #FFFFFF;
    filter: drop-shadow(0 0 1vh #FFFFFF90);
}
.car-1-speed span {
    color: #FFFFFF20;
}

/**/.car-1-speed-text {
    margin: -7.25vh 0 0 0;

    font-family: 'Arial', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF90;
}

.car-speed-icons {
    position: absolute;
    width: 67%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: inline-block;
}
.car-speed-icon {
    margin: 0 .4vh 0 .4vh;
    float: left;

    font-size: 1.6vh;
    text-align: center;
    line-height: 3.3vh;
    color: var(--main);
}
.car-speed-icon span {
    margin-left: .4vh;
    margin-right: 0;
    font-family: 'Arial', sans-serif;
    font-size: 1.5vh;
    font-weight: bold;
    color: #FFFFFF90;
}/**/

.car-1-icons {
    width: auto;
    height: 3.3vh;
    margin: -7.5vh 0 0 50%;
    transform: translateX(-50%);
    float: left;
}
.car-1-icon {
    margin: 0 .4vh 0 .4vh;
    float: left;

    font-size: 1.75vh;
    text-align: center;
    line-height: 3.3vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--main));
}

.car-1-fuel {
    position: absolute;
    width: 60%;
    height: 2vh;
    left: 50%;
    bottom: 1vh;
    transform: translateX(-50%);
    display: inline-block;

    background: #ff00ff00;
}
.car-1-fuel-icon {
    width: 2vh;
    margin: 0;
    float: left;

    font-size: 	1.75vh;
    text-align: center;
    line-height: 2vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--main));
}
#car-1-fuel-bar {
    width: 70%;
    height: .6vh;
    margin: .75vh 0 0 .75vh;
    float: left;

    background: linear-gradient(to right, var(--main) 50%, var(--background-color) 50%);
    border-radius: .6vh;
    box-shadow: 0 0 1.5vh 0 var(--main);
}

#car-1-1 {
    display: none;
}
#car-1-2 {
    display: none;
}

/* CAR 2 */
#car-body-2 {
    position: fixed;
    width: 20vh;
    height: 8.8vh;
    bottom: 0;

    opacity: 0;
    transition: opacity .2s;
}

.car-2-speed {
    margin: 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 4vh;
    font-weight: bolder;
    text-align: center;
    color: #FFFFFF;
    filter: drop-shadow(0 0 1vh #FFFFFF90);
}
.car-2-speed span {
    color: #FFFFFF20;
}

.car-2-icons {
    width: 66%;
    height: 2.6vh;
    margin-left: 50%;
    margin-bottom: 6%;
    transform: translateX(-50%);
    display: inline-block;
}
.car-2-icons-text {
    margin: 0 .6vh 0 .6vh;
    float: left;

    font-size: 1.9vh;
    line-height: 2.6vh;
    color: var(--main);
}
.car-2-icons-text span {
    margin-left: .4vh;
    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    font-weight: normal;
    color: #FFFFFFbb;
}

#car-2-shadow {
    width: 100%;
    height: 200px;
    bottom: 0px;

    background: none;
    box-shadow: 0 0 9vh 3vh var(--glow);
    z-index: 1;
}

/* SETTINGS */
#hud-settings {
    --settings-background: #0d0510, #2f2742;

    width: 35vh;
    height: 47.5vh;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: linear-gradient(60deg, var(--settings-background));
    border-radius: 2vh;
    opacity: 0;
    transition: opacity .2s;
}
#hud-settings h1 {
    margin: 1% 0;

    font-family: 'Calibri', sans-serif;
    font-size: 4.5vh;
    font-weight: bold;
    text-align: center;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#hud-settings h2 {
    margin: -2% 0;

    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    font-weight: normal;
    text-align: center;
    letter-spacing: .2vh;
    color: #FFFFFF60;
}

#hud-settings-items {
    width: 95%;
    height: 80%;
    margin: 4% 2.5%;
    float: left;

    background: none;
    border-radius: 1vh;
    overflow: auto;
}
.hud-settings-item {
    width: 100%;
    height: 4vh;
    margin: 2% 0;

    background: #FFFFFF10;
    border-radius: 1vh;
}
.settings-item-text {
    margin: 0 0 0 3%;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    font-weight: normal;
    text-align: left;
    line-height: 4vh;
    color: #FFF;
}

.switch {
    position: relative;
    width: 4vh;
    height: 2.25vh;
    margin: .875vh 3% .875vh 0;
    float: right;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF20;
    border-radius: .5vh;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 1.5vh;
    width: 1.5vh;
    left: .375vh;
    bottom: .375vh;
    background-color: var(--main);
    border-radius: .2vh;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--main);
}
input:checked + .slider:before {
    -webkit-transform: translateX(1.75vh);
    -ms-transform: translateX(1.75vh);
    transform: translateX(1.75vh);
    background-color: #FFFFFF90;
}