@import "https://fonts.cdnfonts.com/css/akrobat";
@import "https://fonts.googleapis.com/css2?family=Poppins";
@import "https://fonts.cdnfonts.com/css/technology";
@import "https://fonts.cdnfonts.com/css/montserrat";
@import url("https://fonts.cdnfonts.com/css/proxima-nova");
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: "Sugi";
  src: url(fonts/nevis.ttf);
}

@font-face {
  font-family: "Sugi2";
  src: url(fonts/sugi.ttf);
}


*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none
    
}

body {
  height: 100%;
  overflow: hidden;
  color: rgb(255, 255, 255);
}

.top-hud{
  position: absolute;
  top: 1vh;
  right: 1vh;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.top-hud::after{
  position: absolute;
  content: "";
  width: 7.604vw;
  height: 5.469vw;
  right: 14vh;
  top: -9vh;

  background: #8292B3;
  filter: blur(1.984vw);
  z-index: -1;

} 

.top-hud > .hud-wrapper{
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 2vh;
}

.top-hud > .hud-wrapper > .column{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1vh;

}

.top-hud > .hud-wrapper > .column > .logo{

  width: 6.302vw;
  height: 6.302vw;

}

.top-hud > .hud-wrapper > .line{

  width: 0.104vw;
  height: 1.771vw;
  background: #B8C4DD;
  border-radius: 0.521vw;

}


.top-hud > .hud-wrapper > .watermark{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.top-hud > .hud-wrapper > .watermark > span:nth-child(1){

  font-family: "Sugi";
  font-style: normal;
  font-weight: 700;
  font-size: 2.292vw;
  text-align: right;

  background: linear-gradient(180deg, #8292B3 46.5%, rgba(56, 63, 77, 0.07) 76.5%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-transform: uppercase;

}

.top-hud > .hud-wrapper > .watermark > span:nth-child(2){
  font-family: 'Sugi2';
  font-style: italic;
  font-weight: 700;
  font-size: 1.51vw;
  text-align: right;

  background: radial-gradient(50% 99.25% at 50% 50%, #DADCDE 0%, rgba(118, 119, 120, 0.31) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-top: -4vh;

}

.top-hud > .hud-wrapper > .watermark > span:nth-child(3){

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  font-size: 0.625vw;
  line-height: 0.469vw;
  text-align: right;

  color: rgba(255, 255, 255, 0.5);

}

.top-hud > .hud-wrapper > .player-stats{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1vh;
}


.top-hud > .hud-wrapper > .player-stats > .row{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1.5vh;
}

.top-hud > .hud-wrapper > .player-stats > .row > i{
  font-size: 1.25vw;
  color: #B8C4DD;
}

.top-hud > .hud-wrapper > .player-stats > .row > .data{
  width: 5.208vw;
  height: 1.979vw;

  background: radial-gradient(80.26% 80.26% at 50% 50%, #8292B3 0%, rgba(7, 13, 26, 0.86) 100%);
  box-shadow: 0 0 0 0.26vw rgba(184, 196, 221, 0.19);
  border-radius: 2.188vw;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-size: 0.938vw;
  text-align: center;

  color: #DEDEDE;

}

.top-hud > .hud-wrapper > .column > .user_id{

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-size: 0.625vw;
  text-align: center;

  color: rgba(255, 255, 255, 0.56);

}

.top-hud > .money-wrapper{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  margin-top: 3vh;
  gap: 1vh;
}

.top-hud > .money-wrapper > .col{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1vh;
}

.top-hud > .money-wrapper > .col > .icon{
  width: 1.146vw;
  height: 1.146vw;

}

.top-hud > .money-wrapper > .col > .data{

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-size: 0.729vw;
  text-align: right;

  color: #FFFFFF;


}


.notify{
  position: absolute;
  bottom: 25vh;
  left: 2vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1vh;
  animation: slideIn 1s;
}


@keyframes slideIn {
  from{
    position: absolute;
    left: -2vh;
  }
  to{
    position: absolute;
    left: 2vh;
  }
}

.notify > .row{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1vh;
}

.notify > .row > .bar{
  width: 0.208vw;
  height: 3.542vw;

  background: #8292B3;
  border-radius: 0.573vw;
}

.notify > .row > .notify-wrapper{
  position: relative;
  width: 15.833vw;
  min-height: 4.479vw;

  background: radial-gradient(128.13% 247.37% at 50% 50%, #2A2A2A 26%, rgba(6, 6, 6, 0.08) 100%);
  border-radius: 0.313vw;

  display: flex;
  align-items: center;
  padding-left: 1.5vh;

  overflow: hidden;

}

.notify > .row > .notify-wrapper::after{ 
  position: absolute;
  content: "";
  width: 4.844vw;
  height: 2.76vw;
  left: 0.625vw;
  top: -2vh;

  background: #8292B3;
  opacity: 0.28;
  filter: blur(0.693vw);

  border-radius: 50%;

}

.notify > .row > .notify-wrapper > .col{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.notify > .row > .notify-wrapper > .col > .title{
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-size: 0.833vw;

  color: #8292B3;

}



.notify > .row > .notify-wrapper > .col > .msg{
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  font-size: 0.521vw;
  line-height: 0.625vw;

  color: rgba(255, 255, 255, 0.38);
  max-width: 14.583vw;


}

@keyframes adminann {
  from {
      top: -30vh;
  } to {
      top: 1vh;
  }
}


.admin-announce{
  position: relative;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  top: 1vh;
  gap: 1vh;

  animation: 1s adminann;
}

.admin-announce > i{
  font-size: 44px;
  color: #8292B3;
  filter: drop-shadow(0 0 10px #828282);
}

.admin-announce > .title{
  min-width: 239px;
  height: 46px;

  background: rgba(184, 196, 221, 0.19);
  border-radius: 41px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  text-align: center;

  color: #8292B3;

}

.admin-announce > .msg{

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;

  color: rgba(255, 255, 255, 0.5);


  max-width: 389px;

}

.status-hud{
  position: absolute;
  bottom: 3vh;
  left: 32vh;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 10px 10px;
}

.status-hud > .col{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.status-hud > .col > .row{
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  gap: 5px;
}

.status-hud > .col > .row > i{
  font-size: 22px;
  color: #B8C4DD;

}

.status-hud > .col > .row > .precent{

  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;

  color: #B8C4DD;

}

.status-hud > .col > .box{
  transition: .5s ease;

}