@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

:root {
    --clr-blue: #42e994;
    --clr-white: rgba(255, 255 ,255, 1);
    --clr-black: rgba(0, 0, 0, 1);
    --clr-grey: rgba(255, 255, 255, .5);

    --ff-poppins: 'Poppins', sans-serif;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ff-poppins);
    color: var(--clr-white);
    font-weight: 500;
    font-size: 1.5vh;
    /* background: url(../img/bg.svg);
    background-size: cover; */
}

.main__container {
    position: absolute;
    top: 0vh;
    left: 0vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.main__top-right-hud-container {
    position: absolute;
    top: 2vh;
    right: 2vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.main__top-right-hud-big-text {
    font-size: 2.25vh;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__top-right-hud-big-text p span {
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue) !important;
}

.main__top-right-hud-small-text {
    font-size: 1.3vh;
    text-transform: uppercase;
    color: var(--clr-grey);
    letter-spacing: .75vh;
    margin-left: .5vh;
    margin-top: -.5vh;
}

.main__top-left-container {
    position: absolute;
    top: 2.25vh;
    left: 2vh;
}

.main__top-left-time-container {
    display: flex;
    align-items: center;
    gap: 1vh;
}

.main__top-left-time-icon-container {
    font-size: 2vh;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
}

.main__top-left-time-information-date-container {
    font-size: 1.5vh;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__top-left-time-information-time-container {
    font-size: 1.3vh;
    text-transform: uppercase;
    color: var(--clr-grey);
    margin-top: -.5vh;
}

.main__top-right-information-container {
    position: absolute;
    top: 7vh;
    left: 2.25vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.main__top-right-information-id-container,
.main__top-right-information-player-container {
    display: flex;
    align-items: center;
    gap: 1vh;
}

.main__top-right-information-id-icon-container,
.main__top-right-information-player-icon-container {
    font-size: 1.5vh;
    text-transform: uppercase;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
}

.main__top-right-information-id-text-container p span,
.main__top-right-information-player-text-container p span {
    color: var(--clr-grey) !important;
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey) !important;
}

.main__top-right-information-id-text-container,
.main__top-right-information-player-text-container {
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__top-hud-speech-container {
    position: absolute;
    top: 2.5vh;
    right: 17vh;
    /* background: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;
}

.main__top-hud-mic-container,
.main__top-hud-radio-container {
    position: relative;
    width: 5vh;
    height: 5vh;
    /* background: red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main__top-hud-mic-sphere-container {
    /* position: relative; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

.main__top-hud-mic-icon-container,
.main__top-hud-radio-icon-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5vh;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
}

.main__top-hud-mic-sphere-1,
.main__top-hud-radio-sphere-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5vh;
    height: 2.5vh;
    border-radius: 50%;
    /* border: .1vh solid var(--clr-blue); */
    /* border: .1vh solid rgba(255, 255, 255, .05); */
    /* box-shadow: 0vh 0vh 1.7vh var(--clr-blue); */
}

.main__top-hud-mic-sphere-2,
.main__top-hud-radio-sphere-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.5vh;
    height: 3.5vh;
    border-radius: 50%;
    /* border: .1vh solid rgba(255, 255, 255, .05); */
    /* border: .1vh solid var(--clr-blue); */
}

.main__top-hud-mic-sphere-3,
.main__top-hud-radio-sphere-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5vh;
    height: 4.5vh;
    border-radius: 50%;
    /* border: .1vh solid rgba(255, 255, 255, .05); */
    /* border: .1vh solid var(--clr-blue); */
}

.fa-solid.fa-microphone-slash {
    color: #e03939;
    text-shadow: 0vh 0vh 1.7vh #e03939;
}

.main__top-hud-mic-sphere-1.muted {
    border: .1vh solid #e03939;
    box-shadow: 0vh 0vh 1.7vh #e03939;
}

.main__hud-money-container {
    position: absolute;
    top: 8.5vh;
    right: 2.25vh;
    display: flex;
    align-items: center;
    gap: 1vh;
    padding-left: 1vh;
    background: #07141867;
    border-radius: .75vh;
}

.main__hud-money-icon-container,
.main__hud-money-bank-icon-container {
    width: 3.5vh;
    height: 3.5vh;
    background: #07141867;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .75vh;
    font-size: 1.75vh;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
    font-weight: 700;
}

.main__hud-money-text-container,
.main__hud-money-bank-text-container {
    font-size: 1.5vh;
    color: var(--clr-grey);
    font-weight: 500;
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__hud-money-text-container p span,
.main__hud-money-bank-text-container p span {
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue) !important;
}

.main__hud-money-bank-container {
    position: absolute;
    top: 13vh;
    right: 2.25vh;
    display: flex;
    align-items: center;
    gap: 1vh;
    padding-left: 1vh;
    background: #07141867;
    border-radius: .75vh;
}

.main__top-announce-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3vh;
    width: 40.2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
}

.main__top-announce-item {
    width: 100%;
    animation: 1s announcefadein;
    /* background: red; */
}

@keyframes announcefadein {
    0% {
        margin-top: -10vh;
        opacity: 0;
    }

    100% {
        margin-top: 0vh;
        opacity: 1;
    }
}

.main__top-announce-flex-container {
    display: flex;
    justify-content: space-between;
    gap: 1vh
}

.main__top-announce-icon-container {
    width: 5vh;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vh;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
    background: #07141867;
    border-radius: .75vh;
}

.main__top-announce-header {
    font-size: 1.75vh;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
}

.main__top-announce-text {
    font-size: 1.25vh;
    text-transform: uppercase;
    color: var(--clr-grey);
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
    margin-top: -.25vh;
}

.main__top-announce-text-container {
   width: 35vh;
   /* background: #07141867; */
   /* padding: 1vh; */
   border-radius: .75vh;
}

.main__top-announce-sub-text {
    font-size: 1vh;
    text-transform: uppercase;
    color: var(--clr-grey);
    opacity: .75;
}

.main__top-announce-progress-bar {
    width: 5vh;
    margin-top: .5vh;
    height: .35vh;
    background: #07141867;
    overflow: hidden;
    border-radius: 3vh;
}

.main__top-announce-progress-bar-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--clr-blue));
    border-radius: 3vh;
}

@keyframes announce {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

.main__hud-speedo-container {
    position: absolute;
    bottom: 2vh;
    right: 2vh;
}

.main__hud-speedo-stripe-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .75vh;
}

.main__hud-speedo-stripe-item {
    height: 5vh;
    width: 1.25vh;
    background: #07141867;
}

.main__hud-speedo-stripe-item-small {
    height: 1.35vh;
    width: 1.25vh;
    background: #07141867;
}

.main__hud-speedo-stripe-item-small.active {
    /* background: linear-gradient(to top, var(--clr-blue), rgba(255, 255, 255, 0)); */
    background: var(--clr-blue);
    box-shadow: 0vh 0vh 1.7vh var(--clr-blue);
}

.main__hud-speedo-stripe-item.active {
    /* background: linear-gradient(to top, var(--clr-blue), rgba(255, 255, 255, 0)); */
    background: var(--clr-blue);
    box-shadow: 0vh 0vh 1.7vh var(--clr-blue);
}

.main__hud-speedo-fuel-progress {
    width: 100%;
    height: .35vh;
    background: #050f054d;
    margin-bottom: .75vh;
}

.main__hud-speedo-fuel-progress-fill {
    width: 80%;
    height: 100%;
    background: #39e039;
    box-shadow: 0vh 0vh 1.7vh #39e039;
}

.main__hud-speedo-speed-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 2.5vh;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0vh 0vh 1.7vh var(--clr-white);
}

.main__hud-speedo-speed-container p span {
    color: var(--clr-grey);
    font-size: 1.25vh;
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__hud-speedo-information-container {
    position: absolute;
    bottom: 0vh;
    right: 0vh;
    display: flex;
    align-items: center;
    gap: 1vh;
}

.main__hud-speedo-information-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.075vh;
    height: 3.075vh;
    background: #07141867;
    box-shadow: 0vh 0vh 1.7vh #07141867;
    border-radius: .5vh;
    /* border: .1vh solid #07141867; */
}

.main__hud-speedo-information-icon {
    font-size: 1.5vh;
    color: var(--clr-grey);
    color: var(--clr-grey);
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__hud-speedo-information-icon.active {
    color: #39e039;
    text-shadow: 0vh 0vh 1.7vh #39e039;
}

.main__hud-speedo-information-stripe.active {
    background:#39e039;
    box-shadow: 0vh 0vh 1.7vh #39e039;
}

.main__hud-speedo-information-stripe {
    width: 1vh;
    height: .2vh;
    background: var(--clr-grey);
    box-shadow: 0vh 0vh 1.7vh var(--clr-grey);
}

.main__hud-notify-container {
    position: absolute;
    left: 2vh;
    top: 15vh;
    width: 27vh;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-content: flex-end;
    gap: 1vh;
    overflow-y: hidden;
    flex-wrap: wrap;
}

.main__hud-notify-item {
    animation: 1s notifyfadein;
    width: 100%;
    padding: .5vh;
    background: #07141867;
    border-radius: 1vh;
}

@keyframes notifyfadein {
    0% {
        margin-left: -50vh;
        opacity: 0;
    }

    100% {
        margin-left: 0vh;
        opacity: 1;
    }
}

.main__hud-notify-grid {
    width: 100%;
    display: grid;
    grid-template-columns: .175fr 1fr;
    gap: 1vh;
    align-items: center;
}

.main__hud-notify-icon {
    width: 4vh;
    height: 4vh;
    border-radius: .75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vh;
    color: rgba(0, 0, 0, .5);
}

.main__hud-notify-icon.yellow {
    background: #fffb1c;
    box-shadow: 0vh 0vh 1.7vh #fffb1c;
}

.main__hud-notify-icon.green {
    background: #39e039;
    box-shadow: 0vh 0vh 1.7vh #39e039;
}

.main__hud-notify-icon.red {
    background: #e03939;
    box-shadow: 0vh 0vh 1.7vh #e03939;
}

.main__hud-notify-header {
    font-size: 1.5vh;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .2vh;
}

.main__hud-notify-header.yellow {
    color: #fffb1c;
    text-shadow: 0vh 0vh 1.7vh #fffb1c;
}

.main__hud-notify-header.green {
    color: #39e039;
    text-shadow: 0vh 0vh 1.7vh #39e039;
}

.main__hud-notify-header.red {
    color: #e03939;
    text-shadow: 0vh 0vh 1.7vh #e03939;
}

.main__hud-notify-text {
    font-size: 1.25vh;
    color: var(--clr-grey);
    font-weight: 500;
    margin-top: -.25vh;
}

.main__hud-notify-progressbar-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main__hud-notify-progressbar {
    width: 90%;
    background: #07141867;
    height: .3vh;
    border-radius: 5vh;
    margin-top: .5vh;
}

.main__hud-notify-progressbar-fill {
    width: 0%;
    height: 100%;
    border-radius: 5vh;
    animation: 5s notifyprogress linear;
}

@keyframes notifyprogress {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

.main__hud-notify-progressbar-fill.yellow {
    background: #fffb1c;
    box-shadow: 0vh 0vh 1.7vh #fffb1c;
}

.main__hud-notify-progressbar-fill.green {
    background: #39e039;
    box-shadow: 0vh 0vh 1.7vh #39e039;
}

.main__hud-notify-progressbar-fill.red {
    background: #e03939;
    box-shadow: 0vh 0vh 1.7vh #e03939;
}

.main__hud-interaction-container {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main__hud-interaction-header {
    width: 6vh;
    height: 6vh;
    border: .1vh solid rgba(255, 255, 255, .05);
    border-radius: 100%;
    box-shadow: 0vh 0vh 1.7vh rgba(255, 255, 255, .05);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 1.5s interactioncircle;
}

@keyframes interactioncircle {
    0% {
        margin-top: -5vh;
        opacity: 0;
    }

    100% {
        margin-top: 0vh;
        opacity: 1;
    }
}

.main__hud-inner-interaction-header {
    width: 4vh;
    height: 4vh;
    border: .1vh solid var(--clr-blue);
    border-radius: 100%;
    box-shadow: 0vh 0vh 1.7vh var(--clr-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vh;
    text-transform: uppercase;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
    font-weight: 500;
    font-style: italic;
}

.main__hud-interaction-information-text {
    font-size: 1.5vh;
    text-transform: uppercase;
    color: var(--clr-grey);
    font-weight: 400;
    margin-top: 1vh;
    animation: 2s interactiontext;
}

@keyframes interactiontext {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.main__hud-interaction-sphere {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 15vh;
    height: 15vh;
    bottom: -15vh;
    border-radius: 100%;
    background: var(--clr-blue);
    z-index: -1;
    filter: blur(10vh);
    animation: 1s interactionsphere;
}

@keyframes interactionsphere {
    0% {
        margin-top: 30vh;
        opacity: 0;
    }

    100% {
        margin-top: 0vh;
        opacity: 1;
    }
}

.main__hud-saltynui-container {
    position: absolute;
    width: 100vw;
    bottom: 0vh;
    animation: 1s saltynui;
}

@keyframes saltynui {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.main__hud-saltynui-sphere {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15vh;
    width: 120vw;
    height: 20vh;
    border-radius: 100%;
    background: var(--clr-blue);
    filter: blur(15vh);
    z-index: -1;
}

.main__hud-saltynui-information-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10vh;
    text-align: center;
}

.main__hud-saltynui-information-header {
    font-size: 4vh;
    text-transform: uppercase;
    color: var(--clr-blue);
    text-shadow: 0vh 0vh 1.7vh var(--clr-blue);
    line-height: 3.5vh;
    font-style: italic;
    font-weight: 700;
}

.main__hud-saltynui-information-header-2 {
    font-size: 2vh;
    text-transform: uppercase;
    color: var(--clr-grey);
    text-shadow: 0vh 0vh 1.7vh var(--clr-grey);
    margin-top: 1vh;
}