@font-face {
    font-family: Allison;
    src: url(assets/Allison-Regular.ttf);
}
@font-face {
    font-family: Akkordeon;
    src: url(assets/Akkordeon-DEMO.otf);
}
@font-face {
    font-family: Gilroy-Bold;
    src: url(https://fonts.cdnfonts.com/s/16219/Gilroy-Bold.woff);
}
@font-face {
    font-family: Gilroy-Medium;
    src: url(https://fonts.cdnfonts.com/s/16219/Gilroy-Medium.woff);
}
@font-face {
    font-family: Arttelost-Free;
    src: url(assets/Arttelost-Free.ttf);
}

.hud {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    user-select: none;
}

.hud > .row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
}

.hud > .row > .col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hud > .row > .col > .title {
    font-family: 'Akkordeon';
    font-style: normal;
    font-weight: 550;
    font-size: 45px;
    background: linear-gradient(180deg, #119200 14.13%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hud > .row > .col > .subtitle {
    font-family: "Arttelost-Free", serif;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.05em;
    background: linear-gradient(360deg, #C2C2C2 21.05%, #FFFFFF 81.58%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    transform: rotate(-1deg);
    margin-top: -2.5vh;
}

.hud > .row > .data {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

.hud > .row > .data > .col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    left: -40px; 
}

.hud > .row > .data > .col > span:first-child {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #CBCBCB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-transform: uppercase;
}

.hud > .row > .data > .col > span:last-child {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #7B7B7B;
}

.hud > .row > .data > i {
    color: rgba(255, 255, 255, 0.815);
    text-shadow: 0px 0px 20px white;
}

.hud > .row > .col > .logo {
    width: 65px;
    height: 65px;
    margin-right: 20px;
    position: absolute;
    left: 1730px;
    top: 35px;
}

.hud > .money-part {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 5px;
}

.hud > .money-part > i {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    background: radial-gradient(50% 50% at 50% 50%, #3cff00 0%, rgba(65, 204, 0, 0.45) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hud > .money-part > .col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hud > .money-part > .col > span:first-child {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #CBCBCB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hud > .money-part > .col > span:last-child {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #7B7B7B;
}

.hud > .bank-part {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 5px;
}

.hud > .bank-part > A {
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    background: radial-gradient(50% 50% at 50% 50%, #3cff00 0%, rgba(65, 204, 0, 0.45) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    left: 5px; /* Sau mai mult, în funcție de cât vrei să fie deplasat */
    margin-left: -4px;
}

.hud > .bank-part > .col2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    left: 40px;
}

.hud > .bank-part > .col2 > span:first-child {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #CBCBCB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hud > .bank-part > .col2 > span:last-child {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #7B7B7B;
}

.hud > .bank-part > .col2 > .logo1 {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    position: absolute;
    left: -1px;
    top: 40px;
}

.hud > .Diamante {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 5px;
}

.hud > .Diamante > A {
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    background: radial-gradient(50% 50% at 50% 50%, #001aff 0%, rgba(0, 37, 204, 0.45) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    left: 5px; /* Sau mai mult, în funcție de cât vrei să fie deplasat */
    margin-left: -4px;
}

.hud > .Diamante > .col3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    left: 40px;
}

.hud > .Diamante > .col3 > span:first-child {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #CBCBCB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hud > .Diamante > .col3 > span:last-child {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #7B7B7B;
}

.hud > .Diamante > .col3 > .logo1 {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    position: absolute;
    left: -1px;
    top: 40px;
}