@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');


.hud {
    position: absolute;
    display: flex;
    right: 3vh;
    bottom: 3vh;
    align-items: end;
    pointer-events: none;
    flex-direction: column;
    font-family: 'Poppins', sans-serif; 
}

.hud-accounts {
    display: flex;
    gap: .5vh;
    margin-top: 0.8vh;
    width: fit-content;
    justify-content: end;
}

.hud-account {
    display: flex;
    gap: .5vh;
    color: white;
    font-size: 1.3vh;
    font-weight: bold;
    padding: .5vh 1vh;
    align-items: center;
    border-radius: .5vh;
    text-shadow: 1px 1px 1px black;
    background-color: rgb(18, 18, 18, 0.65);
}

[data-account="money"] {
    color: rgb(154, 253, 73);
}

.hud-account-value {
    color: white;
}

[data-account="bank"] {
    color: rgb(79, 168, 252);
}

[data-account="black_money"] {
    color: rgb(255, 70, 37);
}

.hud-jobs {
    display: flex;
    gap: .5vh;
    margin-top: 0.8vh;
    justify-content: end;
}

.hud-job {
    color: white;
    font-size: 1.5vh;
    font-weight: bold;
    padding: .5vh 1vh;
    border-radius: .5vh;
    text-shadow: 1px 1px 1px black;
    background-color: rgb(18, 18, 18, 0.65);
}

.hud-needs {
    display: flex;
    gap: 1vh;
    margin-top: 0.8vh;
    align-items: center;
    justify-content: end;
}

.hud-need {
    width: 12.5vh;
    height: 1.1vh;
    overflow: hidden;
    border-radius: 1vh;
    background-color: rgb(18, 18, 18, 0.65);
}

.hud-need-icon {
    font-size: 2vh;
    color: white;
}

.hud-need-inner {
    width: 0%;
    height: 100%;
    transition: .3s ease-in-out;
}

[data-need="hunger"] {
    background-color: rgb(247, 144, 28);
}

[data-need="thirst"] {
    background-color: rgb(28, 88, 255);
}

.hud-data {
    display: flex;
    gap: 1vh;
}

.hud-data-item {
    display: flex;
    gap: .5vh;
    color: white;
    font-size: 1.2vh;
    padding: .3vh 1vh;
    font-weight: bold;
    align-items: center;
    border-radius: .5vh;
    text-shadow: 1px 1px 1px black;
    background-color: rgb(18, 18, 18, 0.65);
}
.hud-talking-data {
    display: flex;
    gap: .5vh;
    color: white;
    font-size: 1.2vh;
    padding: .3vh 1vh;
    font-weight: bold;
    align-items: center;
    border-radius: .5vh;
    background-color: rgb(18, 18, 18, 0.65);
}

.hud-talking-data.talking {
    background-color: green !important; /* Set the background to green when talking */
}

.job-icon {
    width: 24px; 
    height: 24px; 
    margin-right: 2px;
    vertical-align: middle;
    object-fit: contain;
}

[data-job="job"],
[data-job="job2"] {
    display: flex;
    align-items: center;
    gap: 5px;
}

[data-job="job"] span,
[data-job="job2"] span {
    display: inline-block;
    vertical-align: middle;
}