body{
  overflow: hidden;
  user-select: none;
  margin: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1390f7+0,bce1ff+100 */
background: #73A7FC; /* Old browsers */
background: -moz-linear-gradient(top,  #73A7FC 0%, rgba(188,225,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #73A7FC 0%,rgba(188,225,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #73A7FC 0%,rgba(188,225,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1390f7', endColorstr='#bce1ff',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
    background-attachment: fixed;
}
.offhandCanvases{
  position: absolute;
  visibility: hidden;
  z-index: -14019410;
  width: 0px;
  height: 0px;
}
#canvas{
  border-style: solid;
  border-width: 0px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -10;
}

h1{
  text-align: center;
}
.lbthing{
  width: 100%;
  font-family: "Metal Mania";
  height: 1.4em;
  border-style: solid;
  font-weight: 700;
  font-size: 0.9em;
  border-radius: 5px;
  border-color: rgba(0, 0, 0, 0.2);
  border-width: 2px;
  color: white;
  text-indent: 10px;
  display: inline-grid;
  grid-template-columns: 1fr max-content;
  background: rgba(0, 0, 0, 0.2); 
}
.lbthing sub{
  vertical-align: baseline;
}
right{
  float: right;
  width: max-content;
}
left{
  overflow: hidden;
  width: 100%;
  display: inline-grid;
  grid-template-columns: 1fr max-content;
}
left1{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}
left2{
  width: max-content;
}
#count{
  position: absolute;
  top: 0px;
  font-size: 12px;
  right: 40px;
  font-family: "Metal Mania";
  font-weight: 700;
  text-shadow: 0px 0px 3pwhitete;
}
.discord{
  width: 50px;
  height:50px;
  float right:50px;
}

accountheader{
  width: 500px;
  text-align: center;
  font-size: 40px;
  background-color: #660d0d;
  border-radius: 14px;
  font-face: helvetica;
}
hr{
  height: 10px;
  border: none;
  background-color: #660d0d;
}
#id01{
  position: absolute;
  width: 250px;
  top: -16px;
  height: 20px;
  font-face: arial;
  text-align: center;
  background-color: #660d0d;
}
#name{
  background-color: #fafafa;
  border-style: solid;
  border-color: #660d0d;
  border-radius: 10px;
  height: 22px;
}
#text{
  margin: 10px;
}
#xpbar{
  visibility: hidden;
  position: absolute;
  background-color: #rbga(255, 255, 255, 0.5);
  text-align: center;
  width: 300px;
  color: black;
  border-style: solid;
  border-color: #660d0d;
  border-radius: 10px;
}
#lb{
  position: absolute;
  top: 5px;
  left: 5px;
  background-filter: blur(10px);
  width: 24vw;
  border-radius: 5px;
  height: min-content;
}
#lbheader{
  text-align: center;
  font-family: "Metal Mania";
  width: 100%;
  font-weight: 700;
  padding: 0;
  margin: 0;
  background-color: #660d0d;
  color: #f4f1e1;
  font-size: 1em;
}
#lblist{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
#upgradebar{
  text-align: center;
  position: absolute;
  padding: 0;
  z-index: 140244;
  margin: 0;
  width: 100%;
  bottom: 10vh;
}
.upgrade{
  width: 150px;
  height: 28px;
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px rgba(0, 0, 0, 1);
  font-family: "Metal Mania";
  border-radius: 5px;
  font-size: 14px;
  border-style: solid;
  z-index: 50;
  margin: 5px;
}
.upgrade:hover{
  background-color: gray;
}
.upgrade .tooltip{
  visibility: hidden;
  text-align: center;
  position: absolute;
  width: 100vw;
  left: 0;
  font-size: 18px;
  bottom: 40px;
}
.upgrade:hover .tooltip{
  visibility: visible;
}
.small{
}
.u_blue{
  background-color: #80abf4;
  border-color: #5470a0;
}
.u_red{
  background-color: #f48080;
  border-color: #a05454;
}
.u_pink{
  background-color: #f480ca;
  border-color: #a05488;
}
.u_purple{
  background-color: #cf80f4;
  border-color: #9054a0;
}
.u_green{
  background-color: #83cd74;
  border-color: #62725f;
}
.u_yellow{
  background-color: #eae686;
  border-color: #9e9c57;
}
.u_orange{
  background-color: #c1b59a;
  border-color: #77705f;
}
.u_blue:hover{
  background-color: #6f91ce;
}
.u_red:hover{
  background-color: #d17171;
}
.u_pink:hover{
  background-color: #d973b3;
}
.u_purple:hover{
  background-color: #a565c3;
}
.u_green:hover{
  background-color: #65a758;
}
.u_yellow:hover{
  background-color: #b5b25e;
}
.u_orange:hover{
  background-color: #a59b83;
}
.titleimg{

  position: absolute;
  width: 20%;
  top: 0px;
  left:0px;
}

#nosee{
  visibility: hidden;
}
#upgradecount{
  display: block;
  width: 100%;
}
#upgradecounttoggle{
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  height: 25px;
  width: 60px;
}
#upgradecounttoggle:hover{
  background: rgba(0, 0, 0, 0.55);
}
#upgradecountwrapper{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 1vh;
  z-index: 100;
  width: 15vw;
}
.upgrade2{
  font-family: "Metal Mania";
  border-radius: 5px;
  width: 100%;
  height: 4vh;
  border-style: solid;
  z-index: 50;
  margin: 1px;
  display: block;
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px black;
  font-size: 1vw;
}

 #audio { 
   display: none 
 }

.weapon{
  font-family: "Metal Mania";
  user-select: none;
  width: 270px;
  height: 100%;
  border-radius: 10px;
  margin: auto;
  font-size: 15px;
  color: #0e1e38;
  color: #f4f1e1;
  border-style: solid;
  border-color: #660d0d;
  background: #660d0d;
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
  background: rgba(0, 0, 0, 0.1);
  z-index: 20;
  float: left;
}
#title{
  width: 100%;
  font-size: 30px;
  background: #660d0d;
  text-shadow: 2px 2px 1px black;
}
#next{
  border-style: solid;
  font-weight: bold;
  border-color: #660d0d;
  border-radius: 5px;
  width: 60%;
  background: #65925d;
  font-family: "Metal Mania";
  color: #f4f1e1;
  margin: 4px;
}
#next:hover{
  background: #660d0d;
}

.weapon:hover{
  background: #abbcd6;
  background: rgba(0, 0, 0, 0.25);
}
#weaponSelector{
  position: absolute;
  text-align: center;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  justify-content: center;
  gap: 5px;
  align-items: center;
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  top: 5px;
}
#weaponHideButton{
  background: #f4f1e1;
  border-style: solid;
  border-color: #660d0d;
  font-size: 0.9em;
  padding: 4px;
  font-family: "Metal Mania";
}
#weaponHideButton:hover{
  background: #d3d0c0;
}
#inner{
  width: 70%;
  display: flex;
}
#hr1{
  height: 4px;
  border-style: none;
  background-color: #660d0d;
}
.menuButtonSide{
  position: absolute;
  right: 10px;
  width: 60px;
  height: 60px;
  z-index: 1409;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.menuButton:hover{
  background-color: rgba(0, 0, 0, 0.4);
}



 #skins{
  margin: 0;
  position: absolute;
  top: 170px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  font-size: 30px;
  border-radius: 20px;
  border-style: solid;
  border-color: #f4f1e1;
  font-face: helvetica;
  background-color: #660d0d;
  color: #f4f1e1;
  }
#skins:hover{
  background-color: #f4f1e1;
  color: #660d0d;
  border-color: #7f8ca4;
  z-index: 309;
}
    #stats{
  margin: 0;
  position: absolute;
  top: 240px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 150px;
  height: 50px;
  font-size: 30px;
  border-radius: 20px;
  border-style: solid;
  border-color: #f4f1e1;
  font-face: helvetica;
  background-color: #660d0d;
  color: #f4f1e1;
    }
#stats:hover{
  background-color: #f4f1e1;
  color: #660d0d;
  border-color: #7f8ca4;
  z-index: 309;
}
  #logout{
  margin: 0;
  position: absolute;
  top: 310px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 115px;
  height: 50px;
  font-size: 30px;
  border-radius: 20px;
  border-style: solid;
  border-color: #f4f1e1;
  font-face: helvetica;
  background-color: #660d0d;
  color: #f4f1e1;
}
#logout:hover{
  background-color: #f4f1e1;
  color: #660d0d;
  border-color: #7f8ca4;
  z-index: 309;
}

/*

aaa


*/

.AAA{
  font-family: arial;
  color: #f4f1e1;
  font-size: 20px;
  text-shadow: 1px 1px 1px black;
}



#titleContainer{
  display: flex;
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  left: 0;
}
#joinScreen2{
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.titleScreenbox{
  width: 30%;
  border-radius: 10px;
  height: 60vh;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  font-family: times new roman;
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.4);
}
#titleTop{
  width: 100%;
  height: 30%;
  font-family: "Metal Mania";
  font-size: 1em;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
#titleButtons{
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: "Metal Mania";
}
#name{
  width: 60%;
  height: 20%;
}
.input{
  border-style: solid;
  border-color: #f4f1e1;
  border-radius: 5px;
  font-family: roboto;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
}
.SVG{
  height: 70%;
  fill: #CCC;
  width: auto;
  transition: fill 2s;
}
.SVG:hover{
  fill: #AAA;
  transition: fill: 0.5s;
}
.buttonPanel{
  display: flex;
  flex-direction: row;
}
.menuButton{
  background: #f4f1e1;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  transition: background 2s;
}
.menuButton:hover{
  background: #c5d3c5;
  transition: background 0.3s;
}
.titleBox1{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6);
 
}
.blueTheme{
  background: #660d0d;
  color: #f4f1e1;
}
.whiteTheme{
  color: #660d0d;
  background: #f4f1e1;
}
#play{
  width: 62%;
  height: 30%;
  border-style: solid;
  background: #660d0d;
  font-family: "Metal Mania";
  border-color: #f4f1e1;
  color: #f4f1e1;
  border-radius: 10px;
  color: rbga(0, 0, 0, 0.3);
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6);
  font-size: 4vh;
  transition: color 2s, background 2s, border-color 2s;
}
#play:hover{
  border-radius: 10px;
  color: #660d0d;
  background: #f4f1e1;
  border-color: #660d0d;
  transition: color 0.5s, background 0.5s, border-color 0.5s;
}
#serverSelect{
  border-style: solid;
  border-width: 3px;
  font-family: "Metal Mania";
  border-color: #660d0d;
  width: 62%;
  background: #F4F1E1;
  height: 20%;
}
#changeLogBox{
  width: 80%;
  background: #f4f1e1;
  height: 60%;
  z-index: 220;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#changeLog{
  margin: 10px;
  color: #111;
  overflow-x: hidden;
  font-family: "Metal Mania";
  overflow-y: scroll;
  width: 80%;
  font-size: 0.8em;
  height: 95%;
  overflow-wrap: break-word;
}
#changeLogFooter{
  background: #660d0d;
  width: 100%;
  height: 5%;
}
#accountTitle{
  height: 10%;
  width: 90%;
}
#accountTitleText{
  height: 80%;
  width: 60%;
  float: left;
  font-family: "Metal Mania";
  text-align: center;
  font-size: 3vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#accountInputBox{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}
#accountInputBox input{
  width: 86%;
  height: 10%;
}
#accountButtons{
  height: 15%;
  width: 86%;
  display: flex;
  font-family: "Metal Mania";
  justify-content: center;
  gap: 5px;
  
}
#accountButtons button{
  font-family: "Metal Mania";
  border-radius: 5px;
  font-weight: 700;
  border-style: solid;
  border-color: #f4f1e1;
  width: 50%;
  font-size: 2vh;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
  height: 100%;
}
#accountButtons button:hover{
  background: #f4f1e1;
  color: #660d0d;
}
#accountLogginText{
  overflow-wrap: break-word;
}
#cosmeticTitle{
  width: 100%;
  height: 10%;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 5vh;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
  align-items: center;
}
#COSMETICS{
  display: flex;
  gap: 10px;
  justify-content: center;
}
#cosmeticContainer{
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 90%;
}
.cosmeticArea{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#skinSelector{
  width: 90%;
  height: 50%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 41703437098437018904173;
  overflow: auto;
}
#skinBox{
  width: 10vh;
  text-align: center;
  height: 10vh;
  background: red;
}

#mobile{
  position: absolute;
  z-index: 290;
  width: 25vw;
  visibility: hidden;
  left: 10px;
  bottom: 9vh;
  gap: 5px 5px;
  display: flex;
}
.grid-item{
  width: 8vw;
  height: 8vw;
  font-family: "Metal Mania";
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: center;
  text-align: center;
  font-weight: 1000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 7px;
}
.grid-item-up{
  width: 8vw;
  height: 8vw;
  font-family: "Metal Mania";
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: center;
  text-align: center;
  font-weight: 1000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 7px;
  position: absolute;
  bottom: 0vh;
  left: 80vw;
}
#fullscreen{
  position: absolute;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  top: 3px; 
  z-index: 14898104010481;
  right: 3px;
  width: 25px;
  height: 25px;
}
#fullscreen:hover{
  background: rgba(0, 0, 0, 0.7);
}
.submenu{
  position: absolute;
  width: calc(100vw - 40vw);
  left: 20vw;
  visibility: hidden;
  border-radius: 10px;
  height: calc(100vh - 40vh);
  top: 20vh;
  background: #f4f1e1;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
  z-index: 70851329758132;
  font-family: "Metal Mania";
  padding: 10px;
  font-size: 6vh;
  text-align: center;
  text-indent: 10px;
  display: flex;
  flex-direction: column; 
}
.submenu x{
  font-weight: 800;
  position: absolute;
  right: 10px;
  top: 10px;
  gap: 3px;
  color: black;
  font-size: 3vh;
}
#keybindsbox{
  border-style: solid;
  border-color: #d6d3c7;
  font-family: "Metal Mania";
  font-size: 6vh;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#keybindsbox button{
  width: max-content;
  border-color: #555;
  background: #BBB;
}
#keybindsbox button:hover{
  background: #AAA;
}
#keybindsbox div{
  height: 100%;
  font-size: 0.35em;
  width: 100%;
  padding: 0;
  margin: 0;
}
.submenu x:hover{
  color: gray;
}
#thesettings{
  display: flex;
  gap: 3px;
  flex-wrap: wrap; 
  justify-content: start;
  height: 100%;
}
.sbu{
  width: 19%;
  font-family: "Metal Mania";
  background: #f4f1e1;
  border-radius: 9px;
  font-size: 2vh;
  height: 15%;
  border-style: solid;
  border-color: #660d0d;
}
.sbu:hover{
  background: #e0ddd0;
}
.sbu input{

}

#statusscreen{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 982409814980120747081287478125780158718794141;
  font-family: "Metal Mania";
  color: white;
  text-align: center;
  font-size: 10vh;
  background-color: rgba(0, 0, 0, 0.3);
}