:root {
  --text: #ffffff;
  --background-color: #0f0b09;
  --bg: #060301fa;
  --bgtrans: #0f0b09f2;
  --primary: #9f3a30;
  --secondary: #1a1a1f;
  --accent: #D7A257;
  --textcontrast: #f5f5f5;
  --bgcontrast: #121212;
  --primarycontrast: #ff6b6b;
  --secondarycontrast: #2a2a2a;
  --accentcontrast: #e5b76b;
  --text5: hsl(0, 0%, 100%, 5%);
  --text10: hsl(0, 0%, 100%, 10%);
  --text15: hsl(0, 0%, 100%, 15%);
  --text20: hsl(0, 0%, 100%, 20%);
  --text25: hsl(0, 0%, 100%, 25%);
  --text30: hsl(0, 0%, 100%, 30%);
  --text35: hsl(0, 0%, 100%, 35%);
  --text40: hsl(0, 0%, 100%, 40%);
  --text45: hsl(0, 0%, 100%, 45%);
  --text50: hsl(0, 0%, 100%, 50%);
  --text55: hsl(0, 0%, 100%, 55%);
  --text60: hsl(0, 0%, 100%, 60%);
  --text65: hsl(0, 0%, 100%, 65%);
  --text70: hsl(0, 0%, 100%, 70%);
  --text75: hsl(0, 0%, 100%, 75%);
  --text80: hsl(0, 0%, 100%, 80%);
  --text85: hsl(0, 0%, 100%, 85%);
  --text90: hsl(0, 0%, 100%, 90%);
  --text95: hsl(0, 0%, 100%, 95%);
  --primary5: hsl(0, 67%, 51%, 5%);
  --primary10: hsl(0, 67%, 51%, 10%);
  --primary15: hsl(0, 67%, 51%, 15%);
  --primary20: hsl(0, 67%, 51%, 20%);
  --primary25: hsl(0, 67%, 51%, 25%);
  --primary30: hsl(0, 67%, 51%, 30%);
  --primary35: hsl(0, 67%, 51%, 35%);
  --primary40: hsl(0, 67%, 51%, 40%);
  --primary45: hsl(0, 67%, 51%, 45%);
  --primary50: hsl(0, 67%, 51%, 50%);
  --primary55: hsl(0, 67%, 51%, 55%);
  --primary60: hsl(0, 67%, 51%, 60%);
  --primary65: hsl(0, 67%, 51%, 65%);
  --primary70: hsl(0, 67%, 51%, 70%);
  --primary75: hsl(0, 67%, 51%, 75%);
  --primary80: hsl(0, 67%, 51%, 80%);
  --primary85: hsl(0, 67%, 51%, 85%);
  --primary90: hsl(0, 67%, 51%, 90%);
  --primary95: hsl(0, 67%, 51%, 95%);
  --secondary5: hsl(220, 10%, 12%, 5%);
  --secondary10: hsl(220, 10%, 12%, 10%);
  --secondary15: hsl(220, 10%, 12%, 15%);
  --secondary20: hsl(220, 10%, 12%, 20%);
  --secondary25: hsl(220, 10%, 12%, 25%);
  --secondary30: hsl(220, 10%, 12%, 30%);
  --secondary35: hsl(220, 10%, 12%, 35%);
  --secondary40: hsl(220, 10%, 12%, 40%);
  --secondary45: hsl(220, 10%, 12%, 45%);
  --secondary50: hsl(220, 10%, 12%, 50%);
  --secondary55: hsl(220, 10%, 12%, 55%);
  --secondary60: hsl(220, 10%, 12%, 60%);
  --secondary65: hsl(220, 10%, 12%, 65%);
  --secondary70: hsl(220, 10%, 12%, 70%);
  --secondary75: hsl(220, 10%, 12%, 75%);
  --secondary80: hsl(220, 10%, 12%, 80%);
  --secondary85: hsl(220, 10%, 12%, 85%);
  --secondary90: hsl(220, 10%, 12%, 90%);
  --secondary95: hsl(220, 10%, 12%, 95%);
  --accent5: hsl(36, 61%, 59%, 5%);
  --accent10: hsl(36, 61%, 59%, 10%);
  --accent15: hsl(36, 61%, 59%, 15%);
  --accent20: hsl(36, 61%, 59%, 20%);
  --accent25: hsl(36, 61%, 59%, 25%);
  --accent30: hsl(36, 61%, 59%, 30%);
  --accent35: hsl(36, 61%, 59%, 35%);
  --accent40: hsl(36, 61%, 59%, 40%);
  --accent45: hsl(36, 61%, 59%, 45%);
  --accent50: hsl(36, 61%, 59%, 50%);
  --accent55: hsl(36, 61%, 59%, 55%);
  --accent60: hsl(36, 61%, 59%, 60%);
  --accent65: hsl(36, 61%, 59%, 65%);
  --accent70: hsl(36, 61%, 59%, 70%);
  --accent75: hsl(36, 61%, 59%, 75%);
  --accent80: hsl(36, 61%, 59%, 80%);
  --accent85: hsl(36, 61%, 59%, 85%);
  --accent90: hsl(36, 61%, 59%, 90%);
  --accent95: hsl(36, 61%, 59%, 95%);
  --red: #fc5b5b;
  --font-scale: 1.333;
  --p: 1rem;
  --h5: calc(var(--p) * var(--font-scale));
  --h4: calc(var(--h5) * var(--font-scale));
  --h3: calc(var(--h4) * var(--font-scale));
  --h2: calc(var(--h3) * var(--font-scale));
  --h1: calc(var(--h2) * var(--font-scale));
  --small: calc(var(--p) / var(--font-scale));
  --margin-lg: 0 12%;
  --margin-md: 0 6%;
  --border1: 1rem;
  --border05: 0.5rem;
  --linearPrimarySecondary: linear-gradient(#d63030, #1a1a1f);
  --linearPrimaryAccent: linear-gradient(#d63030, #D7A257);
  --linearSecondaryAccent: linear-gradient(#1a1a1f, #D7A257);
  --radialPrimarySecondary: radial-gradient(#d63030, #1a1a1f);
  --radialPrimaryAccent: radial-gradient(#d63030, #D7A257);
  --radialSecondaryAccent: radial-gradient(#1a1a1f, #D7A257);
}

body {
  padding: 0;
  margin: 0;
  padding-top: 90px; /* Space for fixed navigation */
  padding-bottom: 2rem; /* Ensure enough scroll space at bottom */
  background-color: var(--bg);
  color: white;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

body.coming-soon-page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.header {
  width: 100vw;
  background-color: var(--secondary50);
  border-bottom: 2px solid var(--accent);
  padding-top: 10px;
  padding-bottom: 10px;
}

.primary-button {
  padding: 0.5em 2em;
  background-color: var(--primary);
  color: var(--bg);
  border-radius: var(--border05);
  transition: transform ease 0.2s, box-shadow ease 0.2s;
  display: inline-block;
  font-size: var(--p);
  z-index: 2;
  white-space: nowrap;
  text-decoration: none;
  border: none;
}

.primary-button:hover {
  transform: translate(0, -1px);
  box-shadow: 0 20px 80px -10px var(--primary);
}

.red-button {
  padding: 0.5em 2em;
  background-color: var(--red);
  color: var(--bg);
  border-radius: var(--border05);
  transition: transform ease 0.2s, box-shadow ease 0.2s;
  display: inline-block;
  font-size: var(--p);
  z-index: 2;
  white-space: nowrap;
  text-decoration: none;
  border: none;
}

.red-button:hover {
  transform: translate(0, -1px);
  box-shadow: 0 20px 80px -10px var(--red);
}

.secondary-button {
  padding: 0.5em 2em;
  background-color: var(--secondary30);
  color: var(--text);
  border-radius: var(--border05);
  display: inline-block;
  font-size: var(--p);
  z-index: 1;
  cursor: pointer;
  transition: transform ease 0.2s;
  white-space: nowrap;
  text-decoration: none;
  border: none;
}

.secondary-button:hover {
  transform: translate(0, -1px);
  transition: transform ease 0.2s;
}

.trackers {
  display: flex;
}

.card {
  padding: 0.5rem 1rem;
  width: fit-content;
  border: 1px solid var(--secondary30);
  border-radius: var(--border05);
  background: var(--secondary20);
  transition: opacity ease 0.3s;
  opacity: 100%;
  margin: 7.5px;
}

.staff-card {
  width: 15vw;
  border: 1px solid var(--secondary30);
  border-radius: var(--border05);
  background: var(--secondary20);
  transition: opacity ease 0.3s;
  opacity: 100%;
  margin: 7.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.staff-banner {
  width: 100%;
  border-radius: var(--border05) var(--border05) 0 0;
  height: 155px;
}

.staff-avatar {
  border-radius: 50%;
  padding: 2px;
  border: 2px solid var(--accent);
  width: 4%;
  position: absolute;
  margin-top: 1%;
}

.staff-container {
  position: absolute;
  top: 13vh;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 95vw;
}

.navbar-discord-user {
  width: 41px;
  border-radius: var(--border05);
  border: .5px solid var(--accent);
  height: 41px;
}

.header-mid {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.nav-discord {
  display: flex;
}

.column {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  /* Half the height */
  margin-left: -50px;
  /* Half the width */
  opacity: 0%;
  animation: fadeout 1s;
  z-index: 100000;
}

.server-name {
  background: linear-gradient(120deg, var(--primary), var(--accent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--h1);
  font-weight: bold;
  z-index: 5000;
  margin: 0;
}

.logot {
  color: white;
  border-left: 2px solid white;
  padding-left: 15px;
  text-shadow: var(--shadow1);
  position: fixed;
  top: 1vh;
  left: 1vh;
}

.loading-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  /* Make sure it's on top of everything */
  transition: opacity 1s ease-out;
  /* Smooth fade-out effect */
}

.loading-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-logo {
  width: 12vw;
  border-radius: 50%;
  padding: 3px;
  margin: 20px;
}

.parallelogram {
  width: 85vw;
  height: auto;
  background-color: var(--secondary20);
  transform: skew(-20deg);
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: var(--border1);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--secondary30);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress {
  display: flex;
  align-items: center;
}

.step-empty-circle {
  width: 60px;
  height: 60px;
  background-color: var(--secondary40);
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  flex-direction: column;
}

.step-empty-line {
  width: 40px;
  height: 2px;
  background-color: var(--secondary40);
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  display: block;
}

.done {
  background-color: var(--primary);
  color: var(--bg);
}

/* Enhanced navigation support */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Account for fixed navigation height */
}

/* Styles the scrollbar track */
::-webkit-scrollbar {
  display: none;
}

/* Styles the scrollbar thumb */
::-webkit-scrollbar-thumb {
  display: none;
}

/* Styles the scrollbar track */
::-webkit-scrollbar-track {
  display: none;
}

.wlrequestform {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bg);
  width: 35vw;
  height: 75vh;
  overflow-y: scroll;
  display: none;
}

.wlrequestforminput {
  width: 30vw;
  height: 10vh;
  resize: none;
  color: white;
}

.wlreqdet {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

.rules {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  width: 50vw;
  text-align: center;
}

.rule {
  width: 50vw;
}

.rule-top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--primary);
}

.minimap {
  position: absolute;
  z-index: 999;
  opacity: 85%;
  width: 450px;
  bottom: 0;
  left: 0;
}


.status {
  width: 42px;
  height: 42px;
  transition: opacity ease 0.3s;
  opacity: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  cursor: pointer;
  transition: transform ease 0.2s;
  white-space: nowrap;
  text-decoration: none;
  color: white;
}

.location {
  border-radius: var(--border05);
  transition: opacity ease 0.3s;
  border: .01px solid var(--primary);
  box-shadow: 0 20px 80px -10px var(--primary);
  background: var(--primary30);
  opacity: 100%;
  position: absolute;
  bottom: 285px;
  left: 30px;
  width: 370px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
}

.statuses {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  position: absolute;
  bottom: 2vh;
  left: 425px;
  z-index: 9999;
}

.statusessimple {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.health {
  position: relative;
  border: .01px solid #fc6666;
  box-shadow: 0 20px 80px -10px #fc6666;
  border-radius: var(--border05);
  background: hsla(0, 96%, 69%, 0.3);
  ;
}

.armor {
  position: relative;
  border: .01px solid #7566fc;
  box-shadow: 0 20px 80px -10px #7566fc;
  border-radius: var(--border05);
  background: hsla(241, 96%, 69%, 0.3);
}

.stamina {
  position: relative;
  border: .01px solid #a2fc66;
  box-shadow: 0 20px 80px -10px #a2fc66;
  border-radius: var(--border05);
  background: hsla(101, 96%, 69%, 0.3);
}

.hunger {
  border: .01px solid #fca966;
  box-shadow: 0 20px 80px -10px #fca966;
  border-radius: var(--border05);
  background: hsla(32, 96%, 69%, 0.3);
}

.thirst {
  border: .01px solid var(--primary);
  box-shadow: 0 20px 80px -10px var(--primary);
  border-radius: var(--border05);
  background: var(--primary30);
}


.notification {
  border-radius: var(--border05);
  transition: opacity ease 0.3s;
  border: .01px solid var(--primary);
  box-shadow: 0 20px 80px -10px var(--primary);
  background: var(--primary30);
  opacity: 100%;
  position: absolute;
  width: 440px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 7.5px;
  z-index: 9999;
}

.notification-success {
  border: .01px solid #a2fc66;
  box-shadow: 0 20px 80px -10px hsla(101, 96%, 69%, 0.3);
  background: hsla(101, 96%, 69%, 0.3);
}

.notification-error {
  border: .01px solid #fc6666;
  box-shadow: 0 20px 80px -10px hsla(0, 96%, 69%, 0.5);
  background: hsla(0, 96%, 69%, 0.5);
}

.notification-warning {
  border: .01px solid #fca966;
  box-shadow: 0 20px 80px -10px hsla(32, 96%, 69%, 0.3);
  background: hsla(32, 96%, 69%, 0.3);
}

.notification-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  font-size: 24px;
  padding: 0;
  margin: 0;
  line-height: 0px;
}

.notification-content {
  margin: 0;
}

.adminReportBtn {
  position: absolute;
  left: 2.13vw;
  bottom: .5vh;
}

.adminReportModal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--secondary30);
  border-radius: var(--border05);
  background: var(--bgtrans);
  width: 35vw;
  height: 50vh;
  overflow-y: scroll;
  display: none;
}

.closeadminreport {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 16px;
  cursor: pointer;
}

.titlebar {
  background: linear-gradient(120deg, var(--primary), var(--accent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 23px;
  margin: 5px;
}

.top-bar {
  border-bottom: .1px solid var(--primary);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.itemtitle {
  background: linear-gradient(120deg, var(--primary), var(--accent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3vh;
  margin: 5px;
}

.adminselect {
  height: 3vh;
  width: 10vw;
  background: var(--secondary20);
  color: white;
  box-shadow: 0 0 10px 0 var(--primary);
  border-radius: var(--border05);
  border: none;
  font-size: 1.5vh;
  outline: none;
}

textarea {
  background: var(--secondary20);
  color: white;
  box-shadow: 0 0 10px 0 var(--primary);
  border-radius: var(--border05);
  border: none;
  font-size: 1vh;
  outline: none;
}

.adminreportform {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

option {
  background-color: var(--bg);
  color: white;
}

.success-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkmark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: var(--primary);
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px var(--primary);
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  position: relative;
  top: 5px;
  right: 5px;
  margin: 0 auto;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: var(--primary);
  fill: var(--bg);
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px var(--primary);
  }
}


.userinfo {
  /* position: absolute; */
  /* left: 12vw; */
  /* top: 15vh; */
  font-size: 1.5vh;
  /* height: 80vh; */
  height: 95%;
  width: 13vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin: 0;
}

.sidebutton {
  width: 9.5vw;
  margin-bottom: .5vh;
}

.wlstatecard {
    /* position: absolute; */
    /* top: 20vh; */
    /* left: 28vw; */
    height: 22.5vh;
    width: 99.9%;
    margin: 0;
    margin-top: .25%;
    padding: 0;
}

.wltop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.step {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.circle {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  box-shadow: 0 0 10px 0 var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5vh;
  color: var(--primary);
}

.line {
  width: 1vw;
  height: 1vh;
  box-shadow: 0 0 10px 0 var(--primary);
}

.stepcompleted {
  background: var(--primary);
  color: var(--bg);
  fill: var(--bg);
}

.stepinprogress {
  background: var(--primary30);
}

.stepfailed {
  background: var(--red);
  color: var(--bg);
  fill: var(--bg);
  box-shadow: 0 0 10px 0 var(--red);
}

.insidecircle {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.insidetext {
  font-weight: bold;
  font-size: .9vh;
  line-height: 0px;
}

.wlcz {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.wlen {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.sfhelpcz {
  position: absolute;
  top: 0;
  left: 50%;
  background: var(--bgtrans);
  transform: translate(-50%, 0);
  width: 35vw;
  height: 72vh;
  overflow-y: scroll;
  box-shadow: 0 0 10px 0 var(--primary);
  border-radius: var(--border05);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.characters {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.4%;
  width: 100%;
}

.character {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: 57.7vh;
  width: 50%;
  margin: 0;
  overflow-y: scroll;
}

.charmgsht {
  width: 8vw;
  box-shadow: 0 0 10px 0 var(--primary);
  border-radius: 50%;
}

.stats {
  width: 100%;
  height: 57.7vh;
  /* position: absolute; */
  /* top: 15vh; */
  /* left: 65vw; */
  margin: 0;
}

.centercontent {
  /* background-color: rgb(49, 0, 0); */
  position: absolute;
  top: 15vh;
  left: 12vw;
  width: 75vw;
  height: 85vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: .25%;
}

.centercenter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25%;
  flex-wrap: nowrap;
  width: 100%;
}