/* root */
:root {
  --color-primary: 255 98 0;
  --color-secondary: 255 98 0;
  --color-success: 8 231 133;
  --color-warning: 254 179 31;
  --color-danger: 255 58 58;
  --bg-primary: 19 21 29;
  --bg-secondary: 24 27 36;
  --text-primary: 235 235 235;
  --text-secondary: 130 139 151;
  --border-primary: 41 45 57;
  --font-primary: "yekan-bakh", "poppins", sans-serif;
  --font-secondary: "poppins", "yekan-bakh", sans-serif;
  --transition: 0.3s all;
  --nextui-focus: 70 100% 50%;
  --nextui-content3: 225 16% 19%;
  --nextui-content4: 225 20% 12%;
}


/* Media Quieries */
@media only screen and (max-width: 1350px) {


  .Header-Links{
    font-size: 18px !important;
  }

  header{
    width: 100% !important;
    border-radius: 0px !important;
    margin: 0 !important;
    padding: 20px 30px 20px 30px !important;
    border: none !important;
    position: relative;
    height: 90px !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    background: none !important;
    backdrop-filter: blur(0px) !important;
    z-index: 999 !important;
  }

  .topmenu {
    border-bottom: 1px solid rgb(var(--border-primary)) !important;
    margin-bottom: 25px;
    /* border-bottom: none; */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 0px 0px 0px 0px;
    z-index: 99;
    height: 90px;
    background-color: rgb(var(--bg-secondary) / .8) !important;
    backdrop-filter: blur(10px);
  }

  #Home{
    padding-right: 0rem !important;
  }

  #Staffs{
    padding-left: 0rem !important;
  }


  .floating-House{
    text-align: center !important;
    z-index: 99;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .Gamemodes{
    display: block !important;
  }

  #Main-Gamemodes-heading{
    text-align: center !important;
    display: block;
    margin-right: 0px !important;
    font-size: 40px !important;
    margin-top: 250px !important;
  }


  #Main-SkyHouse{
    position: static !important;
    width: 89% !important;
  }

  #Main-IP{
    z-index: 9 !important;
    padding: 27px 33px 27px 33px !important;
    font-size: 2.3rem !important;
    border-radius: 30px !important;
    left: auto !important;
    top: auto !important;
    margin-top: 200px !important;
  }

  #Main-MoreDetails{
    display: block !important;
    text-align: center !important;
    margin-right: 0px !important;
    padding-right: 0px !important;
    font-size: 20px !important;
  }

  .Main-details{
    display: block !important;
    text-align: center !important;
    margin-right: 0px !important;
    padding-right: 0px !important;
    font-size: 400% !important;
    margin-top: 150px !important;
    position: relative;
  }





  .Gamemode1-Bedwars{
    display: block !important;
    max-width: 400px !important;
    width: auto !important;
    height: 300px !important;
    margin-right: auto !important;
    margin-left: auto !important;

  }

  #Gamemode1-heading{
    font-size: 25px !important;

  }

  .Gamemode2-Smp{
    display: block !important;
    margin-bottom: 3.5rem !important;
    margin-top: 3.5rem !important;
    max-width: 400px !important;
    height: 300px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: auto !important;
  }

  #Gamemode2-heading{
    font-size: 25px !important;

  }

  .Gamemode3-BetterSmp{
    display: block !important;
    max-width: 400px !important;
    height: 300px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: auto !important;
  }

  #Gamemode3-heading{
    font-size: 25px !important;

  }

  #Gamemode1-img{
    width: 16% !important;

  }

  #Gamemode3-img{
    width: 16% !important;

  }

  #Gamemode1-Version{
    font-size: 26px !important;

  }

  #Gamemode2-Version{
    font-size: 26px !important;

  }

  #Gamemode3-Version{
    font-size: 26px !important;

  }

  #Gamemode1-MoreDetails{
    font-size: 20px !important;
    padding-bottom: 5px;

  }

  #Gamemode2-MoreDetails{
    font-size: 20px !important;

  }

  #Gamemode3-MoreDetails{
    font-size: 20px !important;

  }

  #Gamemode1-status{
    font-size: 22px !important;

  }

  #Gamemode2-status{
    font-size: 22px !important;

  }


  #Gamemode3-status{
    font-size: 22px !important;

  }


  .Footer{
    flex-direction: column !important;
    height: 550px !important;
    justify-content: center !important;
  }

  #Trustdiv{
    margin-right: 0px !important;
    margin-top: 50px !important;
  }

  .footer-Info{
    position: relative !important;
    text-align: center !important;
    margin-left: 0px !important;
  }

  .footer-links{
    margin-left: 0px !important;
    text-align: center !important;
    width: 450px;
  }
  
  .a-links{
    display: flex;
    justify-content: space-between;
  }

}

@media only screen and (max-width: 1200px) {
  
  .mobile-menu-toggle {
    display: flex !important; 
    margin-right: 20px !important;

  } 

  .menu-toggle{
    display: flex;
    align-items: center;
  }

  #Home{
    display: none !important;
  }

  #Staffs{
    display: none !important;
  }
  
  #Discord{
    display: none !important;
  }

  #Gamemodes{
    display: none !important;
  }

  #Shop{
    display: none !important;
  }

  .MainInfo{
    margin-top: 150px !important;
  }

  .login{
    height: 650px !important;
    z-index: 1000 !important;
  }

  .register{
    height: 650px !important;
    z-index: 1000 !important;
  }

  .Auth{
    z-index: 1000 !important;
  }

  .form-inputs{
    width: 295px !important;
  }



}


@media only screen and (max-width: 600px) {

  .menu-toggle{
    margin-left: 10px !important;
  }
  .mobile-menu-toggle{
    margin-left: 0px !important;
  }

  header{
    padding: 0px 0px 0px 0px !important;
    height: 80px !important;
  }

  .topmenu{
    height: 80px !important;
  }

  .LegendCraft-Lego{
    margin-right: 10px !important;
  }

  #Trustdiv{
    padding: 30px 60px 30px 60px !important;
  }

  .a-links{
    flex-direction: column !important;
  }

  #Main-IP{
    font-size: 1.5rem !important;
    padding: 17px 23px 17px 23px !important;
    border-radius: 10px !important;
  }

  .Main-details{
    font-size: 40px !important;
  }

  .footer-links{
    width: 200px !important;
  }
  

  .LegendCraft-Lego{
    font-size: 26px !important;
  }

  #log-in{
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  #copyright{
    
  }


}


/* Font-Faces */

@font-face {
  font-family: B_Yekan;
  src: url(Fonts/Yekan.ttf);
}

@font-face {
  font-family: MC_Font;
  src: url(Fonts/mc-font.ttf);
}

@font-face {
  font-family: Nunito;
  src: url(Fonts/Nunito-Bold.ttf);
}

@font-face {
  font-family: R_Yekan;
  src: url(Fonts/YekanBakh-Regular.woff2);
}

@font-face {
  font-family: Vazir;
  src: url(Fonts/YekanBakh-Regular.woff2);
}

@font-face {
  font-family: R_Poppins;
  src: url(Fonts/Poppins-Regular.ttf);
}


.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
  margin-left: 30px;
} 



.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgb(var(--text-primary));
  transition: var(--transition);
}




/* star-selector */

*{
  direction: rtl;
  box-sizing: inherit;
  color: #FFFFFF;
  box-sizing: border-box;
  z-index: 1;
  transition: 0.3s;
}

html, body {
  margin: 0, 0, 0, 0;
  padding: 0, 0, 0, 0;
  z-index: 1;
}


/* header-styles */
a:hover{
  color: white;
}

#log-in:hover{
  box-shadow: none;
}

.LegendCraft-Lego:hover{
  color: RGB(255, 97, 0);
}



header{
  height: 80px;
  width: 85%;
  display: flex;
  border-style: solid;
  border-color: rgb(var(--border-primary));
  border-radius: 12px;
  margin-top: 30px;
  background: rgb(var(--bg-secondary) / .8);
  border-width: 1px;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  unicode-bidi: isolate;
  margin-right: 7.5%;
  font-weight: 700;
  padding-right: 20px;
  padding-left: 20px;
}


.LegendCraft-Lego{
  
  font-family: MC_Font;
  font-size: 30px;
  color: RGB(255 97 0);
  text-shadow: 0 0 60px rgb(var(--color-primary) / .5);
  padding-bottom: 6px;
  background-clip: padding-box;
}


.Header-Links{
  text-decoration: none;
  color: #999999;
  font-family: R_Yekan;
  font-size: 16px;
  display: inline-block;
  align-items: center;
}

#log-in{
  border-radius: 10px;
  border: 1px solid ;
  font-size: 14px;
  height: 36px;
  padding: 0 16px;
  gap: 4px;
  position: relative;
  appearance: button;
  outline: none;
  transition: var(--transition);
  user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  align-items: center;
  backface-visibility: hidden;
  background: rgb(var(--color-primary));
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  border-color: rgb(var(--color-primary));
  color: rgb(var(--bg-primary));
  display: flex;
}


#Home{
  padding-right: 5rem;
}

#Gamemodes{
  
}

#Discord{

}

#Shop{

}

#Staffs{
  padding-left: 5rem;
}

#Heading1-Legend{
  font-family: MC_Font;
  margin-right: 0px;
  color: RGB(255 97 0);
  font-size: 24px;
}

#Heading1-Craft{
  font-family: MC_Font;
  margin-right: 2.5rem;
  color: RGB(255 97 0);
  font-size: 24px;
}

.profile{
  /* width: 145px; */
  height: 55px;
  /* border: 1px solid #fff; */
  border-radius: 10px;
  display: flex;
  margin-left: 20px;
  /* margin-right: 25px; */
  align-items: center;
  justify-content: flex-end;
}

.profile img{
  height: 50px;
  cursor: pointer;
  border-radius: 7px;
}

.profile span{
  font-family: R_Yekan;
  font-weight: 400;
  font-size: 15px;
  color: rgb(var(--color-primary));
  color: #ffffff;
  
}

#profile-icon{
  width: 50px;
}

#coin{
  font-size: 14px;
}

#coin-icon{
  width: 10px;
  height: 10px;
  border-radius: 8px;
  display: inline;
}

.menu{
  width: 90%;
  display: flex;
  align-items: flex-end;
  margin-left: 7px;
  justify-content: flex-end;
  flex-direction: column;
}

.coins-icon{
  width: 13px;
  height: 13px;
  border-radius: 10px;
  display: inline;
}

#tagname{
  font-size: 15px;
  margin-top: 5px;
}


#coins-value{
}

.coins{
  flex-direction: row;

}


/* Profile menu */
.profile-menu{
  position: absolute;
  overflow: auto;
  width: 300px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 300px;
  background-color: #171717;
  z-index: 9999;
  top: 145px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  border-radius: 15px;
  font-family: R_Yekan;
  margin-right: 70%;
  border-radius: 8px;
}

.border{
  color: #fff;
  direction: rtl;
  font-family: vazir, pop;
  width: 90%;
  background-color: #c3c3c3;
  height: 0.5px;
  border-radius: 50%;
  opacity: 0.4;
}

.item{
  color: #fff;
  direction: rtl;
  font-family: vazir, pop;
  width: 90%;
  height: 45px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 8px;
}

.item:hover{
  background-color: #242424;
}

.items:hover{
  background-color: #242424;
}

.items{
  color: #fff;
  direction: rtl;
  font-family: vazir, pop;
  transition: .3s ease;
  cursor: pointer;
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 45px;
  border-radius: 8px;
  
}

#exit-png{
  width: 10px;
}


#exit{
  color: #ad0000;
  font-family: R_Yekan;
  font-weight: 800;
}

/* menu */





/* Body Styles */

Body{
  background-color: rgb(23,23,25);
  background-image: url("Images/Background-Castle2.png");
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: contain;
  
}



/* Auth */

.login{
  height: 670px;
  max-width: 400px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: rgb(var(--bg-primary));
  border-radius: 20px;
  text-align: center;
  font-family: R_Yekan;
}

.register{
  height: 690px;
  max-width: 400px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: rgb(var(--bg-primary));
  border-radius: 20px;
  text-align: center;
  font-family: R_Yekan;
}

.Auth {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #222222af;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
}

#Auth-form-btn2:hover{
  box-shadow: none;
}

#Auth-form-btn2{
  width: 210px;
  height: 45px;
  font-family: R_Yekan;
  background-color: rgb(var(--color-primary));
  transition: var(--transition);
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  gap: 4px;
  touch-action: manipulation;
  backface-visibility: hidden;
  color: rgb(var(--bg-primary));
  font-weight: 700;
  border-radius: 10px;
  outline: none;
  white-space: nowrap;
  border-color: rgb(var(--color-primary));
  border: 1px solid;
  font-size: 14px;
  margin-top: 20px;
}

.Auth-div-UserID2{
  margin-top: 10px;
}

.div-Phone2{
  margin-top: 10px;
}

.div-Password2{
  margin-top: 10px;
}

.div-Password-repeat2{
  margin-top: 10px;
}

#register-h4{
  margin: 10px;
}

.create-account{
  margin-top: 20px;
  font-family: R_Yekan;
}

.create-account2{
  margin-top: 10px;
  font-family: R_Yekan;
}

#create-account-p{
  font-size: 15px;
  display: inline;
  font-family: R_Yekan;
  text-decoration: none;
}

#create-account-a{
  font-size: 15px;
  display: inline;
  font-family: R_Yekan;
  color: rgb(var(--color-primary));
}


#Auth-UserID-label{
  margin-bottom: 10px;
}

#Auth-Password-label{
  margin-bottom: 10px;
}

#Auth-cross{
  width: 10%;
  margin-top: 10px;
  margin-right: 10px;
  
}

.logtop{
  text-align: right !important;
}

#icon{
  width: 30%;
}

#Auth-form-btn:hover{
  box-shadow: none;
}

.Auth-div-UserID{
  margin-top: 40px;
}

.Auth-div-Password{
  margin-top: 20px;
}


#Auth-form-btn{
  width: 210px;
  height: 45px;
  font-family: R_Yekan;
  transition: var(--transition);
  background-color: rgb(var(--color-primary));
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  border-color: rgb(var(--color-primary));
  gap: 4px;
  touch-action: manipulation;
  backface-visibility: hidden;
  color: rgb(var(--bg-primary));
  white-space: nowrap;
  border: 1px solid;
  outline: none;
  font-weight: 700;
  border-radius: 10px;
  margin-top: 60px;

  font-size: 14px;
}

/* .Auth {
  width: 30%;
  height: 85%;
  background-color: #171717;
  border-radius: 15px;
  display: none;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  z-index: 10;
} */

/* Main-Styles */

#subscription{
  margin-top: 375px;
}

.subscription-purchase{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #222222af;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
}

.subscription-div-UserID{
  margin-top: 60px;
}

.subscription-purchase-div{
  height: 550px;
  width: 28%;
  background-color: rgb(var(--bg-primary));
  border-radius: 20px;
  text-align: center;
  font-family: R_Yekan;
}

#subscription-form-btn{
  width: 210px;
  height: 45px;
  font-family: R_Yekan;
  transition: var(--transition);
  background-color: rgb(var(--color-primary));
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  border-color: rgb(var(--color-primary));
  gap: 4px;
  touch-action: manipulation;
  backface-visibility: hidden;
  color: rgb(var(--bg-primary));
  white-space: nowrap;
  border: 1px solid;
  outline: none;
  font-weight: 700;
  border-radius: 10px;
  margin-top: 70px;

  font-size: 14px;
}


#subscription-icon-text{

}

#subscription-btn:hover{
  box-shadow: none;
}

#subscription-btn{
  transition: var(--transition);
  background-color: rgb(var(--color-primary));
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  border-color: rgb(var(--color-primary));
  gap: 4px;
  touch-action: manipulation;
  backface-visibility: hidden;
  color: rgb(var(--bg-primary));
  white-space: nowrap;
  border: 1px solid;
  outline: none;
  width: 210px;
  height: 45px;
  font-weight: 700;
  border-radius: 10px;
  font-size: 15px;
  font-family: R_Yekan;
}

.subscription-main{
  background-color: rgb(31,31,34);
  
  height: 275px;
  width: 90%;
  border-radius: 25px;
  margin-inline: auto;
}


.subscription-buy{
  float: left;
  margin-left: 150px;
  margin-top: 60px;
  text-align: center;
}

#subscription-h2{
  font-size: 30px;
  margin-right: 5rem;
}

#subscription-p{
  direction: rtl;
  background-color: rgb(53, 53, 53);
  padding: 12px 30px 12px 30px;
  border-radius: 15px;
}

.subscription-Info{
  position: absolute;
  text-align: center;
  margin-top: 60px;
  margin-right: 150px;
}




Main{
  font-family: R_Yekan;
  color: #ffffff;
  border-color: rgb(23,23,25);

}

.Main{

}

.Main-details{
  margin-top: 12rem;
  margin-right: 4rem;
  font-size: 35px;
}


#Main-MoreDetails{
  font-family: R_Yekan;
  font-size: 17px;
  margin-right: 60px;
  margin-top: 2rem;
  position: relative;
}





#Main-SkyHouse{
  width: 32rem;
  display: inline;
  top: 11rem;
  left: 4.6rem;
  position: absolute;
}

.floating-House{

}

#Main-IP{
  position: absolute;
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
  background-color: #171719B0;
  padding: 9px 11px 9px 11px;
  border-radius: 14px;
  top: 26rem;
  left: 15rem;
  font-family: R_Poppins;
}

#Main-Gamemodes-heading{
  font-size: 30px;
  margin-right: 5rem;
  margin-top: 20rem;
}

.Gamemodes{
  display: flex;
  justify-content: center;
  text-align: center;
}

.Gamemode1-Bedwars{
  background-color: rgb(32,33,34);
  display: inline-block;
  width: 370px;
  height: 274px;
  text-align: center;
  border-radius: 15px;
  border: rgb(var(--border-primary)) 1px solid;

}

#Gamemode1-img{
  margin-top: 20px;
  margin-bottom: 0px;
  width: 64px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#Gamemode1-heading{
  font-size: 24px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-family: R_Poppins;
}

#Gamemode1-Version{
  color: rgb(120,120,120);
  font-size: 20px;
  margin-top: 7px;
  margin-bottom: 0px;
  font-family: R_Poppins;
}

#Gamemode1-status{
  color: red;
  font-size: 16px;
  margin-top: 6px;
  margin-bottom: 0px;
  font-family: R_Poppins;
}

#Gamemode1-MoreDetails{
  margin-top: 14px;
  margin-bottom: 0px;
  color: rgb(120,120,120);
  font-size: 16px;
}

.Gamemode2-Smp{
  background-color: rgb(32,33,34);
  display: inline-block;
  width: 370px;
  height: 274px;
  text-align: center;
  border-radius: 15px;
  margin-right: 2.4rem;
  margin-left: 2.4rem;
  border: rgb(var(--border-primary)) 1px solid;
}

#Gamemode2-img{
  margin-top: 20px;
  margin-bottom: 0px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#Gamemode2-heading{
  font-size: 24px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-family: R_Poppins;
}

#Gamemode2-Version{
  color: rgb(120,120,120);
  font-size: 20px;
  margin-top: 7px;
  margin-bottom: 0px;
  font-family: R_Poppins;
}

#Gamemode2-status{
  color: rgb(48,236,106);
  font-size: 16px;
  margin-top: 6px;
  margin-bottom: 0px;
  font-family: R_Poppins;
}

#Gamemode2-MoreDetails{
  margin-top: 14px;
  margin-bottom: 0px;
  color: rgb(120,120,120);
  font-size: 16px;
}

.Gamemode3-BetterSmp{
  background-color: rgb(32,33,34);
  display: inline-block;
  width: 370px;
  height: 274px;
  text-align: center;
  border-radius: 15px;
  border: rgb(var(--border-primary)) 1px solid;

}

#Gamemode3-img{
  margin-top: 20px;
  margin-bottom: 0px;
  width: 84px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#Gamemode3-heading{
  font-size: 24px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-family: R_Poppins;
}

#Gamemode3-Version{
  color: rgb(120,120,120);
  font-size: 20px;
  margin-top: 7px;
  margin-bottom: 0px;
  font-family: R_Poppins;
}

#Gamemode3-status{
  color: rgb(48,236,106);
  font-size: 16px;
  margin-top: 6px;
  margin-bottom: 0px;
  font-family: R_Poppins;
}

#Gamemode3-MoreDetails{
  margin-top: 14px;
  margin-bottom: 0px;
  color: rgb(120,120,120);
  font-size: 16px;
}






/* footer-styles */

footer{
  font-family: R_Poppins;
  left: 0px;
  right: 0px;
  position: absolute;
}

.Footer{
  background-color: rgb(31,31,34);
  height: 250px;
  margin-top: 10rem;
  direction: ltr;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* zarinpal */
#Trustdiv{
  display: inline;
  float: right;
  margin-right: 70px;
  background-color: rgb(53,53,53);
  border-radius: 15px;
  padding: 30px 100px 30px 100px;
  max-width: 600px;
}


#Trustdiv img{
  width: 75px;
}

#copyright{
  direction: ltr;
  color: rgb(142,142,142);
  font-size: 16px;
  margin: 0;
}

.footer-Info{
  display: inline-block;
  direction: ltr;
  margin-left: 20px;
  position: absolute;
}

.footer-links{
  display: inline-block;
  flex-direction: column;
  font-family: R_Yekan;
  margin-top: 20px;
  margin-left: 40%;
}

.footer-links a{
  text-decoration: none;
}

.footer-links a{
  display: block;
  text-align: center;
  color: rgb(var(--color-primary));
}

.footer-links h3{
  
}


#enamad{
  padding-right: 70px;
}

#Heading1-Legend-1{
  font-family: MC_Font;
  color: RGB(255 97 0);
  font-size: 24px;
  
}

#Heading1-Craft-1{
  font-family: MC_Font;
  color: RGB(255 97 0);
  font-size: 24px;
  color: #ffffff;
}

/* Shop styles */



Main{
  font-family: R_Yekan;
  color: #ffffff;
  border-color: rgb(23,23,25);

}



/* Main Details */
.MainInfo{
  margin-top: 50px;
  text-align: center;
}



.MainH2{
  font-family: R_Yekan;
  font-size: 3rem;
  text-align: center;
  margin: 0px 0px 0px 0px;
}

#MainH2-2{
  color: RGB(255 101 0);
}

#MainDetail{
  font-size: 1.15rem;
  color: rgb(130,139,151);

}

/* Main Rank Div */
.Ranks{
  text-align: center;
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
  
}



/* Ranks */


#claim-block-Img{
  width: 230px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}



.claim-block-1{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#claim-block-1-Details{

}

#claim-block-1-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#claim-block-1-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#claim-block-1-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}



.claim-block-2{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#claim-block-2-Details{

}

#claim-block-2-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#claim-block-2-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#claim-block-2-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}



#coin-Img{
  width: 230px;
}



.coins2{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#coin-Details{

}

#coin-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#coin-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#coin-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}


#ironRank-Img{
  width: 230px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}



.Iron{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#ironRank-Details{

}

#IronRank-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#IronRank-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#IronRank-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}

.Gold{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#GoldRank-Img{
  width: 230px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#GoldRank-Details{

}

#GoldRank-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#GoldRank-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#GoldRank-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}

.Diamond{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#DiamondRank-Img{
  width: 230px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#DiamondRank-Details{

}

#DiamondRank-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#DiamondRank-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#DiamondRank-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}

.Emerald{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#EmeraldRank-Img{
  width: 230px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#EmeraldRank-Details{

}

#EmeraldRank-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#EmeraldRank-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#EmeraldRank-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}

.Sponser{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}
#SponserRank-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#SponserRank-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#SponserRank-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}

#SponserRank-Img{
  width: 230px;
}



.LegendCraft{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#LegendCraftRank-Img{
  width: 230px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
}

#LegendCraftRank-Details{

}

#LegendCraftRank-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#LegendCraftRank-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#LegendCraftRank-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}


#amber-Img{
  width: 230px;
}



.amber1{
  background-color: rgb(22,25,33);
  border: 2px solid rgb(24,27,36);
  border-radius: 5%;
  display: inline-block;
  padding: 30px 25px 25px 25px;
  margin-top: 3rem;
  margin-left: 1%;
  border-color: rgb(var(--border-primary));
}

#amber1-Img{
  width: 230px;
}

#amber2-Img{
  width: 230px;
}

#amber3-Img{
  width: 230px;
}


#amber-Details{

}

#amber-Text{
  font-family: R_Yekan;
  font-size: 1.05rem;
  text-align: center;
}

#amber-Cost{
  padding-bottom: 13px;
  color: #ffffff;
  text-align: center;
}



#amber-Buy{
  color: rgb(var(--bg-primary));
  font-weight: 600;
  background-color: RGB(255 101 0);
  border: 1px solid RGB(255 101 0);
  border-radius: 8px;
  padding: 7px 65px 7px 65px;
  text-decoration: none;
}









.body-shop{
  background-image: url("Images/bg2.png");
}






/* Buy.html Styles */



.form{

}

.div-UserID{
  margin-top: 35px;
}

.div-Password{
  margin-top: 35px;
}

.div-form{
  background: rgb(var(--bg-secondary) / .8);
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7rem;
  height: 500px;
  gap: 14px;
  border-radius: 20px;
  border: 1px solid rgb(var(--border-primary));
  backdrop-filter: blur(10px);
}

#form-btn:hover{
  box-shadow: none;
}

.form-inputs{
  width: 320px;
  height: 50px;
  box-sizing: border-box;
  background: rgb(var(--border-primary) / .5);
  border: 1px solid rgb(var(--border-primary));
  border-radius: 10px;
  outline: none;
  padding: 0 16px;
  transition: var(--transition);
  font-family: inherit;
  font-size: 16px;
  box-sizing: border-box;
}

.div-form{

}


#UserID-label{
  text-align: right;
}

#Password-label{
  text-align: right;
}

#UserID{
  margin-top: 12px;
}

#Password{
  margin-top: 12px;
}

#form-btn{
  width: 320px;
  height: 50px;
  border-radius: 10px;
  color: rgb(var(--bg-primary));
  background: rgb(var(--color-primary));
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  border-color: rgb(var(--color-primary));
  font-family: R_Yekan;
  font-weight: 700;
  transition: var(--transition);
  margin-top: 75px;
}

.h-dvidier{

}




/* Buy */
.Body-buy{
  background-image: url("Images/bg3.jpg");
}

.form-Buy{
  background: rgb(var(--bg-secondary) / .8);
  width: 100%;
  max-width: 700px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 800px;
  gap: 14px;
  border-radius: 20px;
  border: 1px solid rgb(var(--border-primary));
  backdrop-filter: blur(10px);
}

#form-btn-Buy:hover{
  box-shadow: none;
}

.form-inputs-Buy{
  width: 400px;
  height: 50px;
  box-sizing: border-box;
  background: rgb(var(--border-primary) / .5);
  border: 1px solid rgb(var(--border-primary));
  border-radius: 10px;
  outline: none;
  padding: 0 16px;
  transition: var(--transition);
  font-family: inherit;
  font-size: 16px;
  
}

#UserID-label-Buy{
  
}

#Password-label-Buy{
  
}

#UserID-Buy{

}

#Password-Buy{
  
}

#form-btn-Buy{
  width: 320px;
  height: 50px;
  border-radius: 10px;
  color: rgb(var(--bg-primary));
  background: rgb(var(--color-primary));
  box-shadow: 0 4px 40px rgb(var(--color-primary) / .5);
  border-color: rgb(var(--color-primary));
  font-family: R_Yekan;
  font-size: 15px;
  font-weight: 700;
  transition: var(--transition);
  margin-top: 50px;
}

.div-UserID-Buy{
  margin-top: 40px;
}


.div-name-Buy{
  margin-top: 40px;
}


.div-Phone-Buy{
  margin-top: 40px;
}

.div-Discord-Buy{
  margin-top: 40px;
}


.div-Info-Buy{
  margin-top: 40px;
}


#h2-Buy{
  text-align: center;
  margin-top: 75px;
}

#h5-Buy{
  text-align: center;
}

#h3-Buy{
  text-align: center;
  margin-top: 20px;
}

.content{
  background: rgb(var(--bg-primary));
  display: flex;
  flex-direction: column;
  padding: 24px;
  width: 80%;
  height: 100%;
  position: relative;
  z-index: 999;
  font-family: R_Yekan;
  font-size: 16px;
}

.content a{
  display: block;
  margin-bottom: 50px;
  text-decoration: none;
}


.mobile-menu-active{
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  right: 0;
  top: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000;
  display: none;
}

.overlay{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, .5);
}



.legend-logo{
  font-family: MC_Font;
  font-size: 30px;
  color: RGB(255 97 0);
  text-shadow: 0 0 60px rgb(var(--color-primary) / .5);
  padding-bottom: 6px;
  background-clip: padding-box;
  text-decoration: none;
  display: block;
}