@import url('https://fonts.cdnfonts.com/css/tt-norms-pro');

body {
    margin: 0;
    padding: 0;
    /* background-color: #222; */
    font-family: 'TT Norms Pro';
    font-weight: 500;
    overflow: hidden; /* Ascunde orice scroll */
  }
  
  .hud-container {
    position: fixed;
    bottom: 25px;
    right: 65.5vw;
    display: flex;
    gap: 15px;
    /* background: rgba(0, 0, 0, 0.5); */
    padding: 10px 15px;
    border-radius: 10px;
    align-items: center;
  }
  
.logos {
    width: 5vw;
    margin-top: 2vw;
    margin-left: 93.7vw;
}

.money{
    position: fixed;
    font-family: 'TT Norms Pro', sans-serif;
    top: 1.8vw;
    margin-left: 86vw;
    font-weight: 500;
    font-style: bolder;
    border: none;
    font-size: 15px;
    width: fit-content;
    padding: 0px 9px 13px;
    text-align: right;
    color: #ffffffd3;
    text-shadow: none;
}

.bank{
    position: fixed;
    font-family: 'TT Norms Pro', sans-serif;
    top: 1.8vw;
    margin-left: 78vw;
    font-weight: 500;
    font-style: bolder;
    border: none;
    font-size: 15px;
    width: fit-content;
    padding: 0px 9px 13px;
    text-align: right;
    color: #ffffffd3;
    text-shadow: none;
}

.job{
    position: fixed;
    font-family: 'TT Norms Pro', sans-serif;
    top: 1.8vw;
    margin-left: 70vw;
    font-weight: 500;
    font-style: bolder;
    border: none;
    font-size: 15px;
    width: fit-content;
    padding: 0px 9px 13px;
    text-align: right;
    color: #ffffffd3;
    text-shadow: none;
}

.userid{
    position: fixed;
    font-family: 'TT Norms Pro', sans-serif;
    top: 5.8vw;
    margin-left: 68.3vw;
    font-weight: 500;
    font-style: bolder;
    border: none;
    font-size: 15px;
    width: fit-content;
    padding: 0px 9px 13px;
    text-align: right;
    color: #ffffffd3;
    text-shadow: none;
}

.plyrs{
    position: fixed;
    font-family: 'TT Norms Pro', sans-serif;
    top: 5.8vw;
    margin-left: 78.6vw;
    font-weight: 500;
    font-style: bolder;
    border: none;
    font-size: 15px;
    width: fit-content;
    padding: 0px 9px 13px;
    text-align: right;
    color: #ffffffd3;
    text-shadow: none;
}

.ping{
    position: fixed;
    font-family: 'TT Norms Pro', sans-serif;
    top: 5.8vw;
    margin-left: 87.9vw;
    font-weight: 500;
    font-style: bolder;
    border: none;
    font-size: 15px;
    width: fit-content;
    padding: 0px 9px 13px;
    text-align: right;
    color: #ffffffd3;
    text-shadow: none;
}
.strada{
  position: fixed;
  font-family: 'TT Norms Pro', sans-serif;
  top: 42.8vw;
  margin-left: 2.9vw;
  font-weight: 500;
  font-style: bolder;
  border: none;
  font-size: 15px;
  width: fit-content;
  padding: 0px 9px 13px;
  text-align: left;
  color: #636363d3;
  text-shadow: none;
}

.strada i {
  border-radius: 50vh;
  font-size: 2.2vh;
  position: fixed;
  margin-top: .65vh;
  margin-left: -3vh;
  color: rgba(255, 255, 255);
  font-style: normal;
}

.clock{
  position: fixed;
  font-family: 'TT Norms Pro', sans-serif;
  top: 42.8vw;
  margin-left: 2.9vw;
  font-weight: 500;
  font-style: bolder;
  border: none;
  font-size: 15px;
  width: fit-content;
  padding: 0px 9px 13px;
  text-align: left;
  color: #636363d3;
  text-shadow: none;
}

.clock i {
  border-radius: 50vh;
  font-size: 2.2vh;
  position: fixed;
  margin-top: .65vh;
  margin-left: -3vh;
  color: rgba(255, 255, 255);
  font-style: normal;
}

.binds {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 18vw;
}

.bind {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.key {
  background-color: #ffffff4f;
  color: white;
  padding: 15px;
  border-radius: 9px;
  font-size: 24px;
  font-weight: 300;
  width: 5px;
  height: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 0px 1px rgb(255, 255, 255);
  margin-left: 15px;
}

.action {
  font-size: 15px;
  color: #ffffff;
}

  .hud-item {
    text-align: center;
    color: #fff;
    font-size: 14px;
  }
  
  .icon-bg {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.181); /* Fundal alb transparent */
    border: 2px solid;
    border-radius: 50%;
  }
  
  .icon-bg i {
    font-size: 20px;
  }
  
  #health .icon-bg {
    border: 1px solid rgb(255, 0, 0);
    color: rgb(207, 11, 11);
  }
  
  #armor .icon-bg {
    border: 1px solid rgb(0, 0, 255);
    color: rgb(0, 0, 255);
  }
  
  #hunger .icon-bg {
    border: 1px solid rgb(255, 166, 0);
    color: rgb(255, 166, 0);
  }
  
  #thirst .icon-bg {
    border: 1px solid cyan;
    color: cyan;
  }
  
  #stamina .icon-bg {
    border: 1px solid purple;
    color: purple;
  }
  
  #oxygen .icon-bg {
    border: 1px solid magenta;
    color: magenta;
  }
  
  .value {
    margin-top: 5px;
  }
  
  @keyframes admin {
    from {top: -21vh;};
    to {top: -1.8vh;};
}

.adminIco {
    position: fixed;
    left: 33.2%;
    top: -1.8vh;
    animation: admin 1.6s;
}

.adminAnn{
    background: rgba(255, 255, 255, 0.125)!important;
    /* display: flex!important; */
    width: 20%;
    margin: 2vh auto;
    margin-bottom: 0;
    height: fit-content;
    flex-direction: column;
    padding: 1vh 2vh;
    border-radius: 1vh;
    text-align: center;
}

.adminTitle {
    /* position: fixed;
    left: 43.2%;
    top: 1.8vh; */
    color: rgba(255, 255, 255, 1.753);
    letter-spacing: 1px;
    font-family: TT Norms Pro;
    animation: admin 1.6s;
    text-align: center;
    /* text-shadow: 0px 0px 10px white; */
}

.adminName {
    /* position: fixed;
    left: 43.2%;
    top: 4.3vh; */
    color: #ffffff;
    letter-spacing: 1px;
    font-family: TT Norms Pro;
    animation: admin 1.6s;
    text-shadow: 0px 0px 10px black;
}

.adminMess {
    /* position: fixed;
    left: 43.2%;
    top: 7.1vh; */
    color: rgba(255, 255, 255, 1.753);
    letter-spacing: 1px;
    font-family: TT Norms Pro;
    animation: admin 1.6s;
    /* background-color: white; */
}