:root {
  --ease-duration: 520ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* apply to commonly animated properties only (not layout properties) */
*,
*::before,
*::after {
  transition-property: color, background-color, border-color, box-shadow,
    opacity, transform;
  transition-duration: var(--ease-duration);
  transition-timing-function: var(--ease);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

@font-face {
  font-family: "Gotham Book";
  src: url("../fonts/Gotham-Book.woff2") format("woff2"),
    url("../fonts/Gotham-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
img {
  transition: transform 0.3s ease-in-out;
}

img:hover {
  animation: bounce 0.9s;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Custom styles */
.navbar {
  background-color: #3f324e;
  border-bottom: 2px solid #6b59a1;
}
.navbar-dark {
  padding: 0px;
}
.navbar-brand img {
  margin: 0px 15px;
}

.nav-link {
  color: #eaeaea !important;
  transition: all 0.6s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: gotham;
  /*margin: 0px 15px;*/
  font-weight: 300;
  padding: 10px 0px;
  text-align: left;
}

/*    .nav-link:hover {
      color: #4df7dd !important;
      text-decoration:underline;
    }*/
.nav-link {
  position: relative; /* so the ::after can position itself */
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%; /* start from center */
  bottom: 0; /* stick to bottom */
  transform: translateX(-50%); /* shift back by half its width */
  width: 50%; /* underline = 50% of nav-link */
  border-bottom: 1px solid #4df7dd;
  opacity: 0; /* hidden by default */
  transition: opacity 0.3s;
}

.nav-link:hover {
  color: #4df7dd !important;
}

.nav-link:hover::after {
  opacity: 1; /* show underline on hover */
}

.navbar-nav {
  margin-left: auto;
  margin-right: auto;
}
.dropdown-menu a {
  color: white;
}
.dropdown-menu a:hover {
  color: #4df7dd !important;
  background: none !important;
}
.dropdown-menu {
  background: rgba(0, 0, 0, 1) !important;
}
.navbar-nav .nav-item {
  /*margin-right: 20px;*/
}
.navbar-brand img {
  margin-left: 70%;
}

/* Container with 20% margin on left and right */
.container-custom {
  margin-left: 16%;
  margin-right: 16%;
}
.acp {
  background: url("../img/acp.png") no-repeat;
  background-size: contain;
  height: 289px;
  width: 441px;
}
.acp form input[type="text"],
input[type="password"],
input[type="file"],
textarea {
  border: 0px;
  /* border-radius: 0px; */
  /* background: #eaeaea; */
  height: 35px;
}
.acp form input[type="text"] {
  margin-bottom: 17px !important;
}
.acp form input[type="password"] {
  margin-bottom: 15px !important;
}
.acp a {
  color: #4df7dd;
}
.acp a:hover {
  color: white;
}

table td {
  color: white;
}
body {
  color: white;
  font-family: "Gotham Book";
  letter-spacing: 0.8px;
  background: #29213a;
}
.logo-img {
  transition: transform 0.3s ease-in-out;
}
a {
  color: white;
}
a:hover {
  color: #ffb600;
}
/* Bounce animation */
.logo-img:hover {
  animation: bounce 0.6s;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-8px);
  }
}
button,
input,
select,
textarea {
  border-radius: 20px;
  padding: 1px 10px;
  /* background: white; */
}

h1 {
  letter-spacing: 0.7px;
  font-size: 52px;
}
.sstatus p {
  color: #e9e9e9;
  font-size: 16px;
  text-transform: uppercase;
}
.spacer {
  height: 100px;
}

.status-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.sstatus {
  margin: 9px;
  padding: 5px;
  border-radius: 0px;
  color: #b0b0b0;
  font-weight: 600;
  display: inline-block;
  align-items: center;
}
.sstatus p {
  margin-bottom: 0px;
}
.social {
  display: inline-block;
}
.sstatus span {
  margin-left: 6px;
  font-weight: 700;
  color: #fff;
}
.sstatus span.online {
  background: #19c37d;
  color: #0c1c12;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  text-transform: uppercase;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #747474;
  border-radius: 16px;
  color: black;
  text-decoration: none;
  font-size: 10px;
}
.social a:hover {
  opacity: 0.8;
  background: #d3d3d3;
}

#t1c,
#t1 {
  color: #ffccff !important;
}
.navbar {
  margin-bottom: 0;
}

.navbar-nav > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 15px !important;
  font-weight: 800;
  color: #ab93c2 !important;
}
.navbar-nav > li > a i {
  font-size: 14px;
}
#main-navbar .navbar-nav a {
  padding: 50px 25px !important;
  color: white;
}
.navbar-default {
  background: rgba(0, 0, 0, 0.65);
  border: 0px;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
  color: #555;
  background-color: #1f152f;
}
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
  color: #555;
  background-color: #1f152f;
}
.dropdown-menu {
  background: rgba(0, 0, 0, 1) !important;
  border: 0px;
}
#main-navbar .navbar-nav .dropdown-menu li a {
  padding: 10px 25px !important;
  color: white; /* optional, since white on white may not be visible */
}
/*.headermain{background: url() no-repeat;background-position:bottom right; }*/
.headermain h1,
p {
  color: white;
}
.headermain span {
  color: #fab918;
}
.headermain p {
  font-size: 30px;
  padding: 40px 0px;
  width: 80%;
}

.headermain {
  position: relative;
  overflow: hidden; /* keep it clipped if needed */
}

.headermain .bg-img {
  position: absolute;
  top: -7px;
  left: 45%; /* locked position */
  z-index: 1;
  pointer-events: none; /* so it doesn't block clicks */
}

.headermain .container {
  position: relative;
  z-index: 2; /* ensure text/buttons appear above image */
}
/* Default for md and larger (≥768px) */
.sinfo {
  background: #29203b;
}
.forge {
  background: url("../img/infbg1.png") no-repeat;
  background-position: top center;
  min-height: 520px;
  background-size: cover;
}
.eventbg {
  background: url("../img/eventbg.png") no-repeat;
  background-position: top center;
  min-height: 520px;
  background-size: cover;
}
.disbg {
  background: url(../img/disbg.png) no-repeat bottom;
  min-height: 494px;
  min-width: 378px;
  background-position: -80px 85px;
}
.rbg {
  background: #1c1632;
  min-height: 400px;
}
.forge table tr td {
  border-bottom: 0px;
}
.features {
  background: #29203b;
  min-height: 660px;
}
.alert-warning {
  color: white;
  background-color: #0000007d;
  border-color: #3e3e3e;
}
.alert {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.sinfodiv {
  padding-right: 0px;
  padding-left: 0px;
  text-align: right;
}
.sinforow {
  margin-top: 120px;
}
.sinforow2 {
  margin-top: 40px;
}
.sinfo h1 {
  font-size: 24px;
  /*padding-top: 30px;*/
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  font-weight: 300;
  font-family: gotham;
  color: #866fb9;
}
.forge h1 {
  font-size: 36px;
  padding-top: 60px;
  text-align: right;
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-family: gotham;
  color: #866fb9;
  margin-bottom: 85px;
}
.features h1 {
  font-size: 36px;
  padding-top: 60px;
  text-align: center;
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-family: gotham;
  color: #866fb9;
  margin-bottom: 75px;
}
.eventbg h1 {
  font-size: 36px;
  padding-top: 60px;
  text-align: left;
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-family: gotham;
  color: #866fb9;
  margin-bottom: 48px;
}
.eventbg h4 {
  font-size: 24px;
  border-bottom: 0px;
  text-align: left;
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  font-weight: 300;
  font-family: gotham;
  color: #866fb9;
}
.forgeh {
  font-size: 18px;
  margin-bottom: 20px;
}
.fbtn img {
  margin-top: 25px;
  margin-bottom: 45px;
}
.forge h4 {
  color: #fbb918;
}

.rbg a {
  display: inline-block;
  margin-top: 32px;
}
.rbg p {
  margin-top: 45px;
  font-size: 18px;
}
.rbg img {
  margin: 0 10px;
}
.ffooter p {
  color: #777777;
  font-size: 12px;
}
.ffooter a {
  color: #777777;
  text-decoration: none;
  padding: 0px 16px;
}
.ffooter a:hover {
  color: #c6c6c6;
}
.ffooter {
  background: black;
}
/* Default (md and up) */
.hdbt a {
  display: inline-block;
  margin: 0px;
  padding: 10px;
  text-align: left;
}

#mobile-nav-wrap {
  min-height: 100px;
}
/* Hidden by default */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

/* When visible */
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
.forge table tr td {
  padding: 25px 15px;
  text-transform: uppercase;
  font-size: 16px;
  border: 0px;
}
.eventbg table tr td {
  padding: 15px 15px;
  text-transform: uppercase;
  font-size: 16px;
  border: 0px;
}
.righttd {
  color: #777777;
  border: 0px;
}
.righttdg {
  color: #66ff66;
  border: 0px;
}
.righttdh {
  color: #ff6666;
  border: 0px;
}
.innfeatures {
  width: 204px;
  margin: auto;
}
.innfeatures p {
  font-size: 12px;
  color: #777777;
  letter-spacing: normal;
}
.innfeatures h2 {
  font-size: 24px;
  padding: 20px 0px;
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-family: gotham;
  color: #866fb9;

  text-align: center;
}
.rmbt img {
  padding: 40px 0px;
}
.upcomingev {
  background: #2e2844;
  height: 317px;
  width: 555px;
  padding: 25px;
  margin: auto;
}

/* For screens smaller than md (<768px) */

@media (max-width: 1400px) {
  .download-img {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar-nav .nav-item {
    margin: 10px 0;
  }
  .navbar-brand img {
    margin-left: 0;
  }
  .acp {
    width: 100%;
    background-size: cover;
  }
  .sstatus {
    padding: 5px;
  }
  .forge {
    background: url("../img/infbg1.png") no-repeat;
    background-position: top center;
    min-height: 520px;
    background-size: cover;
  }
  .rbg a {
    display: block ruby;
    margin-top: 0px;
    padding: 10px 0px 20px;
  }
  .rbg p {
    margin-top: 20px;
    font-size: 15px;
  }
  .hdbt a {
    display: inline-block;
    margin: 0px;
    padding: 10px;
    text-align: center;
  }
  h1 {
    letter-spacing: 0.6px;
    font-size: 42px;
  }
  .container-custom {
    margin-left: 0px;
    margin-right: 0px;
  }
  .sstatus p {
    font-size: 10px;
  }
  .sstatus {
    margin: 0px;
    padding: 10px 3px;
  }
  .upcomingev {
    width: 95%;
  }
}

@media screen and (min-width: 0px) and (max-width: 1550px) {
  #mobile-nav-wrap {
    background-color: #202020 !important;

    box-shadow: 0 0 2rem rgba(0, 0, 0, 1);
  }

  .navbar-nav > li > a {
    justify-content: center;
  }

  #mobile-nav-wrap > #mobile-nav-logo {
    padding: 1rem 0;
  }

  #mobile-nav-btn {
    position: absolute;

    inset: 1;

    font-size: 1.25rem;
  }

  #mobile-nav-cont-wrap {
    z-index: 0 !important;

    width: 70% !important;
  }

  #status .status-group p {
    font-size: 0.875rem !important;
  }

  #header #header-group {
    margin: 12rem auto 4rem auto !important;

    text-align: center !important;

    text-shadow: 0 0 1rem rgba(0, 0, 0, 1);
  }

  #content-wrap {
    margin: 4rem 0 8rem 0 !important;

    padding-top: 6rem !important;

    padding-bottom: 8rem !important;
  }

  #content-wrap > div#default {
    padding-bottom: 8rem !important;
  }

  #info {
    gap: 1rem !important;
  }

  #info .info-group {
    width: 24rem !important;
  }

  #social-link #socials {
    justify-content: center !important;

    gap: 0 2rem !important;
  }

  div.page-logo {
    max-width: 66.66% !important;
  }

  .download-wrap {
    gap: 1rem !important;
  }

  .download-wrap > .download-group {
    max-width: 100% !important;
  }

  #discord-embed {
    min-height: 30rem !important;
  }

  .vertical-table {
    width: 100% !important;
  }

  #vote-notice {
    width: 100% !important;
  }

  #vote-banner-wrap {
    max-width: 100% !important;

    gap: 0.25rem 0;
  }

  .donate-wrap {
    max-width: 100% !important;
  }
}

@media screen and (min-width: 992px) {
  div.modal#modal-promo > .modal-dialog {
    max-width: 50% !important;

    margin: auto !important;

    font-size: 0.875rem;
  }
}

@media screen and (max-width: 1120px) {
  #info {
    justify-content: space-around !important;
  }
}

@media screen and (min-width: 1920px) {
  #info {
    justify-content: flex-start !important;
  }

  #char-render > div {
    inset: 10.625rem 0 0 28rem !important;
  }

  div.modal[id^="modal-"] > .modal-dialog {
    max-width: 33% !important;

    margin: auto !important;

    font-size: 0.875rem;
  }

  div.modal#modal-promo > .modal-dialog {
    max-width: 50% !important;

    margin: auto !important;

    font-size: 0.875rem;
  }
}

html {
  scroll-behavior: smooth;

  position: relative;

  height: 100%;
}

.g-recaptcha {
  margin: 0 auto;
}

#content-wrap {
  min-height: 100%;

  padding-top: 8rem;

  margin: 4rem 0;

  padding-bottom: 12rem;
}

#content-wrap div#default {
  text-shadow: 0 0 0.5rem rgba(255, 255, 255, 1);

  padding-bottom: 4rem;

  font-size: 0.875rem;
}

#content-wrap div#default p {
  text-shadow: 0 0 0.25rem rgba(255, 255, 255, 1),
    0 0 0.25rem rgba(255, 255, 255, 1), 0 0 0.125rem rgba(255, 255, 255, 1),
    0 0 0.125rem rgba(255, 255, 255, 1);
}

#status-wrap {
  width: 100%;

  background: #000;

  color: #bbbbbb;

  z-index: 999;

  position: relative;

  padding: 0.5rem 0;
}

#status {
  display: flex;

  justify-content: flex-start;

  gap: 0 0.5rem;
}

#status .status-group {
  min-width: 10rem;

  background-color: #202020;

  padding: 0.25rem 0.5rem;

  border-radius: 0.25rem;

  display: flex;

  justify-content: space-between;
}

#status .status-group p {
  margin: 0;

  font-size: 0.675rem;
}

#status .status-group:not(#time) p.value {
  text-transform: uppercase;

  font-weight: 700;
}

#status .status-group:not(#time) p.value.icon-green {
  color: #33cc33;
}

#status .status-group:not(#time) p.value.icon-yellow {
  color: #cccc33;
}

#status .status-group:not(#time) p.value.icon-red {
  color: #cc3333;
}

#status-wrap #btn-wrap {
  margin-left: 2rem;

  gap: 0 0.75rem;
}

#status-wrap #btn-wrap a {
  text-decoration: none;

  color: #bbbbbb;

  transition: color 0.25s ease-in-out;
}

#status-wrap #btn-wrap a:hover,
#status-wrap #btn-wrap a:focus,
#status-wrap #btn-wrap a:focus-within {
  color: #ffc606;
}

#status-wrap #btn-wrap i {
  font-size: 1.25rem;
}

#nav-wrap {
  width: 100%;

  background: rgba(0, 0, 0, 0.65);

  color: #fff;

  position: absolute;

  z-index: 1020;
}

#nav-wrap ul {
  min-height: 8rem;

  list-style-type: none;

  padding-left: 0 !important;

  margin: 0;
}

#navbar a#home > img {
  max-height: 4rem;
}

#navbar a {
  color: #fff;

  text-decoration: none;

  transition: filter 0.25s ease-in-out, color 0.25s ease-in-out;
}

#navbar a:hover,
#navbar a:focus,
#navbar a:focus-within {
  color: #ffc606;

  filter: drop-shadow(0 0 0.75rem rgba(255, 255, 255, 0.5));
}

#navbar #account-group i {
  font-size: 1.5rem;
}

#navbar #account-group {
  display: flex;

  gap: 0 1rem;
}

#mobile-nav-cont-wrap {
  z-index: -1 !important;

  position: fixed !important;

  left: -100%;

  width: 75%;

  height: 100%;

  overflow-x: hidden !important;

  transition: all 0.25s ease-in-out;

  padding: 1.5rem 1.5rem 8rem 1.5rem;

  background-color: rgba(0, 0, 0, 0.85);
}

#mobile-nav-cont-wrap.active {
  z-index: 1030 !important;

  overflow-y: auto !important;

  left: 0;
}

#mobile-nav-cont-wrap .btn {
  color: #fff;

  font-size: 0.75rem;
}

#mobile-nav-cont-wrap #mobile-login {
  margin: 2rem auto;
}

#mobile-nav-cont-wrap hr {
  background-color: #fff;
}

#mobile-nav-cont-wrap > #mobile-nav-menu,
#mobile-nav-cont-wrap > #mobile-login {
  min-height: 1rem;

  width: 100%;
}

#mobile-nav-menu > a {
  position: relative;

  padding: 1rem 0;

  display: flex;

  justify-content: flex-start;

  color: #fff;

  text-decoration: none !important;
}

#mobile-nav-menu > a:hover,
#mobile-nav-menu > a:focus,
#mobile-nav-menu > a:focus-within {
  color: #ffc606 !important;
}

#mobile-nav-menu > a:after {
  content: "";

  position: absolute;

  height: 0.125rem;

  width: 0%;

  left: 50%;

  bottom: 0rem;

  background-color: #ffc606;

  transition: all 0.25s ease-in-out;
}

#mobile-nav-menu > a:hover:after,
#mobile-nav-menu > a:focus:after,
#mobile-nav-menu > a:focus-within:after {
  width: 100%;

  left: 0;
}

#mobile-nav-menu > a > i {
  font-size: 1.5rem;

  width: 3rem;

  text-align: center !important;
}

#mobile-nav-menu > a > p {
  font-family: "Gotham Book", Arial, Helvetica, sans-serif;

  font-size: 1rem;

  margin-left: 1rem;
}

#mobile-nav-btn {
  position: fixed !important;

  z-index: 1031 !important;

  border: none;

  background-color: transparent;

  color: #fff;

  inset: 1;

  transition: all 0.25s ease-in-out;
}

#mobile-nav-btn i {
  font-size: 1.25rem !important;
}

#header-wrap {
  background-image: url("../img/bg_header.webp");

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;
}

#header {
  margin-top: -12rem;

  position: relative;

  min-height: 36rem;

  z-index: 1;
}

#header #header-group {
  margin-top: 12rem;

  font-size: 0.875rem;

  color: #fff;
}

#header-wrap > #char-render {
  position: absolute;

  inset: 0;

  z-index: 0;

  height: 28rem;

  width: inherit;
}

#char-render > div {
  height: inherit;

  width: 44rem;

  position: absolute;

  background-image: url("../img/char_render.webp");

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: contain;

  inset: 10.625rem 0 0 calc(50% - 16rem);

  filter: drop-shadow(0 0 1rem #b1ecff);
}

#header #header-group h1 {
  font-size: 3.25rem;

  font-family: "Gotham", Arial, Helvetica, sans-serif;

  color: #fff;
}

#header-group h1 > span,
.feature-group h6 {
  color: #ffc606;
}

#header-group a {
  font-size: 0.875rem;

  font-weight: 700;

  color: #fff;

  padding: 1rem 2.5rem;

  border-radius: 2.5rem;

  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25),
    0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.25);
}

#info-wrap {
  background-color: #f1f1f1;

  min-height: 60rem;

  padding: 3rem 0 6rem 0;

  color: #929292;

  position: relative;

  z-index: 999;
}

#info {
  gap: 2rem 1.75rem;
}

#info .info-group {
  max-width: 16.5rem;
}

.info-group > .thumbnail {
  height: 12.5rem;

  position: relative;

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;
}

.info-group > .thumbnail#thumb_1 {
  background-image: url("../img/info/thumb_1.webp");
}

.info-group > .thumbnail#thumb_2 {
  background-image: url("../img/info/thumb_2.webp");
}

.info-group > .thumbnail#thumb_3 {
  background-image: url("../img/info/thumb_3.webp");
}

.info-group > .thumbnail#thumb_4 {
  background-image: url("../img/info/thumb_4.webp");
}

.info-group > .thumbnail#thumb_5 {
  background-image: url("../img/info/thumb_5.webp");
}

.info-group > .thumbnail#thumb_6 {
  background-image: url("../img/info/thumb_6.webp");
}

.info-group > .thumbnail#thumb_7 {
  background-image: url("../img/info/thumb_7.webp");
}

.info-group > .thumbnail#thumb_8 {
  background-image: url("../img/info/thumb_8.webp");
}

.info-group > .thumbnail:after {
  content: "";

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: 0;

  background-image: linear-gradient(
    180deg,
    transparent 55%,
    rgba(1, 101, 235, 0.75) 100%
  );
}

.info-group > .thumbnail > p.title {
  font-family: "Gotham Condensed", Arial, Helvetica, sans-serif;

  color: #fff;

  font-weight: normal;

  text-transform: uppercase;

  letter-spacing: 0.25rem;

  font-size: 2rem;

  position: absolute;

  bottom: 0;

  margin-bottom: 0.5rem;

  width: 100%;

  text-align: center;

  z-index: 999;

  line-height: 2rem;

  padding: 0 0.5rem;

  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.info-group > .caption {
  padding: 1rem;

  box-shadow: 0 1rem 4rem rgba(64, 64, 64, 0.25);
}

.info-group > .caption > p.title {
  color: #038edd;

  font-size: 0.875rem;
}

.info-group > .caption > p:not(.title) {
  color: #929292 !important;

  font-size: 0.75rem !important;

  margin-bottom: 0;
}

#feature-wrap {
  min-height: 44rem;

  background-image: url("../img/bg_feature.webp");

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  color: #fff;
}

#feature-wrap h1 {
  font-size: 2.75rem;

  font-family: "Gotham Book", Arial, Helvetica, sans-serif;

  color: #fff;
}

#feature-wrap h6 {
  font-family: "Gotham Book", Arial, Helvetica, sans-serif;

  font-size: 0.875rem;
}

#feature-wrap p {
  font-family: "Gotham Book", Arial, Helvetica, sans-serif;

  font-size: 1.05rem;
}

#feature-wrap #char-render2 {
  background-image: url("../img/char_render2.webp");

  background-repeat: no-repeat;

  background-position: bottom left;

  height: 48rem;

  background-size: contain;

  margin-top: 4rem;
}

#feature-wrap .feature-group {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 0 1rem;
}

#feature-wrap .feature-group p {
  font-size: 0.75rem;
}

#content-wrap hr.separator {
  width: 100%;

  color: #b7b7b7;

  margin: 1rem auto 3rem auto;
}

#register-wrap {
  min-height: 20rem;

  background-image: url("../img/bg_register.webp"),
    linear-gradient(0deg, rgba(1, 94, 234, 1) 0%, rgba(0, 192, 250, 1) 100%);

  background-repeat: no-repeat;

  background-position: center, top center;

  background-size: cover;

  background-blend-mode: soft-light;

  box-shadow: 0 -2rem 4rem rgba(0, 0, 0, 0.25);

  color: #fff;
}

#register-wrap a {
  font-size: 1rem;

  color: #fff;

  padding: 1rem 2.5rem;

  border-radius: 2.5rem;

  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);

  text-transform: uppercase;
}

#register {
  min-height: 20rem;

  display: grid;

  align-content: center;

  gap: 1rem 0;
}

#discord {
  min-height: 32rem;

  display: grid;

  align-content: center;

  gap: 1rem 0;
}

#footer-wrap {
  margin-top: -16rem;

  background-color: #1c1c1a;

  border-top: 0.0625rem solid #636363;

  min-height: 16rem;

  padding: 2rem 0;
}

#footer-wrap #footer-link > #qlink {
  padding-left: 0;

  list-style-type: none;

  font-size: 0.75rem;
}

#qlink > li {
  position: relative;

  padding: 0 1rem;
}

#qlink > li:not(:last-child):after {
  content: "";

  position: absolute;

  height: 100%;

  border-right: 0.0625rem solid #575757;

  margin: 0 1rem;
}

#qlink a {
  color: #575757;

  text-decoration: none;

  transition: color 0.25s ease-in-out;
}

#qlink a:hover,
#qlink a:focus,
#qlink a:focus-within {
  color: #fff;
}

#copyright p {
  font-size: 0.875rem;

  color: #575757;
}

#footer-link #logo {
  gap: 0 2rem;
}

#footer-link #logo > #server {
  background-image: url("../img/logo.webp");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  height: 4rem;

  width: 25%;

  margin-right: -1rem;
}

.generic-form-table p,
.generic-form-table label,
.generic-form-table button,
.generic-form-table input[type="submit"],
.generic-form-table input[type="reset"],
.generic-form-table input[type="button"] {
  margin: 1rem 0;
}

.generic-form-table label {
  padding-right: 4rem;
}

#menu-group {
  background-color: rgba(255, 255, 255, 0.25);

  border: 0.0625rem solid #929292;

  padding: 1rem;

  font-size: 0.75rem;

  margin-bottom: 2rem;

  border-radius: 0.25rem;
}

#password-note,
#email-note {
  position: absolute;

  top: 10rem;

  opacity: 0;

  z-index: -1;

  visibility: hidden;

  padding: 1rem;

  font-size: 0.75rem !important;

  transition: all 0.25s ease-in-out;
}

#password-note.active,
#email-note.active {
  opacity: 1;

  visibility: visible;

  z-index: 1;
}

#notif-wrap {
  z-index: 1030;

  position: absolute;

  top: 8rem;

  animation: pop-out-msg 0.5s 1.5s;

  -webkit-animation: pop-out-msg 0.5s 1.5s;

  animation-fill-mode: forwards;

  animation-delay: 3s;

  -webkit-animation-delay: 3s;

  -webkit-animation-fill-mode: forwards;
}

.bg-black {
  background-color: rgba(20, 20, 20, 0.8);

  text-shadow: none !important;

  color: #f1f1f1 !important;
}

.bg-black p {
  text-shadow: none !important;
}

.empty-row {
  display: none;
}

.search-form {
  display: none;
}

.horizontal-table {
  min-width: 100% !important;
}

.vertical-table {
  width: 50%;
}

.horizontal-table,
.vertical-table {
  font-size: 0.75rem !important;

  border-collapse: separate;

  border-spacing: 0;
}

.horizontal-table th,
.vertical-table th {
  background-color: rgba(0, 0, 0, 0.65);

  text-shadow: none;

  color: #f1f1f1;

  padding: 0.5rem;

  font-weight: normal;

  border: 0.0625rem solid rgba(0, 0, 0, 0.25);
}

.horizontal-table td,
.vertical-table td {
  border: 0.0625rem solid rgba(0, 0, 0, 0.25);

  background-color: rgba(255, 255, 255, 0.25);

  padding: 0.5rem;
}

td.char-head-sprite {
  width: 3rem !important;

  text-align: center;
}

table:not(.generic-form-table) tr:first-child td:first-child,
table:not(.generic-form-table) tr:first-child th:first-child {
  border-top-left-radius: 0.275rem;
}

table:not(.generic-form-table) tr:first-child td:last-child,
table:not(.generic-form-table) tr:first-child th:last-child {
  border-top-right-radius: 0.275rem;
}

table:not(.generic-form-table) tr:last-child td:first-child,
table:not(.generic-form-table) tr:last-child th:first-child {
  border-bottom-left-radius: 0.275rem;
}

table:not(.generic-form-table) tr:last-child td:last-child,
table:not(.generic-form-table) tr:last-child th:last-child {
  border-bottom-right-radius: 0.275rem;
}

table:not(.generic-form-table) tr:first-child td,
table:not(.generic-form-table) tr:first-child th {
  border-top-style: solid;
}

table:not(.generic-form-table) tr td:first-child,
table:not(.generic-form-table) tr th:first-child {
  border-left-style: solid;
}

div.page-logo {
  max-width: 33.33%;

  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 1))
    drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.5));
}

.sub-header {
  display: flex;

  align-items: center;

  margin-bottom: 2rem;

  color: #0165eb;
}

.sub-header > .module-title {
  margin-top: 0 !important;

  margin-bottom: 0;
}

.sub-header > i {
  font-size: 1.5rem !important;

  padding-right: 1rem;
}

#trans-wrap {
  gap: 1rem;
}

.trans-group {
  padding: 1rem;

  border-radius: 0.5rem;

  background-color: rgba(255, 255, 255, 0.35);

  border: 0.0625rem solid rgba(53, 53, 53, 0.25);
}

.admin-menu-item,
.sub-menu-item,
.page-menu-item {
  margin: 0 0.25rem;
}

.request,
.fs-path {
  font-family: Monaco, "Lucida Console", "Bitsteam Vera Sans Mono", monospace;

  text-align: center;

  background-color: rgba(255, 255, 255, 0.75);

  padding: 0.25rem;

  border: 0.0625rem solid rgba(0, 0, 0, 0.25);

  border-radius: 0.125rem;
}

.current-sub-menu {
  text-decoration: underline !important;
}

#content-wrap #default h2 {
  text-align: center;
}

* + h3 {
  margin-top: 1.5rem;
}

.download-wrap {
  gap: 1rem;

  text-shadow: none !important;
}

.download-group {
  max-width: 25% !important;

  border: 0.0625rem solid #0165eb;

  padding: 0.5rem;

  text-align: center;

  border-radius: 0.5rem;

  text-decoration: none !important;

  transition: all 0.25s ease-in-out !important;
}

.download-group > i {
  font-size: 2rem !important;

  text-align: center;

  color: #0165eb;

  transition: all 0.25s ease-in-out !important;
}

.download-group > span {
  font-family: "Gotham Book", Arial, Helvetica, sans-serif;

  font-weight: none !important;

  font-size: 0.9rem;

  transition: all 0.25s ease-in-out !important;
}

.download-group:hover,
.download-group:focus,
.download-group:focus-within {
  border: 0.0625rem solid #0165eb;

  background-color: #0165eb;
}

.download-group:hover > i,
.download-group:focus > i,
.download-group:focus-within > i,
.download-group:hover > span,
.download-group:focus > span,
.download-group:focus-within > span {
  color: #fff;
}

.donate-wrap {
  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 2rem;

  max-width: 75%;
}

a.donate-group {
  height: 8rem;

  width: 8rem;

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

  border-radius: 4rem;

  filter: saturate(0.85);

  transition: all 0.25s ease-in-out;
}

a.donate-group:hover,
a.donate-group:focus,
a.donate-group:focus-within {
  background-color: rgba(255, 255, 255, 1);

  filter: saturate(1.15);
}

a.donate-group#btn-paypal {
  background-image: url("../img/icon/paypal.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 50%;
}

a.donate-group#btn-gcash {
  background-image: url("../img/icon/gcash.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 66%;
}

a.donate-group#btn-gcash2bank {
  background-image: url("../img/icon/gcash2bank.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 66%;
}

a.donate-group#btn-maya {
  background-image: url("../img/icon/maya.webp");

  background-position: center 55%;

  background-repeat: no-repeat;

  background-size: 75%;
}

a.donate-group#btn-bank {
  background-image: url("../img/icon/bank.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 75%;
}

a.donate-group#btn-gotyme {
  background-image: url("../img/icon/gotyme.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 75%;
}

a.donate-group#btn-coins {
  background-image: url("../img/icon/coinsph.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 75%;
}

a.donate-group#btn-bitcoin {
  background-image: url("../img/icon/bitcoin.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 75%;
}

a.donate-group#btn-usdt {
  background-image: url("../img/icon/usdt.webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: 75%;
}

iframe.converter {
  width: 100%;

  height: 7rem !important;

  border: none;
}

.paypal-input {
  width: 16.5rem !important;

  text-align: center;

  letter-spacing: 0;
}

span.donate-info {
  font-family: "Lucida Sans", Arial, Helvetica, sans-serif;

  color: #0165eb;

  font-weight: 700;

  text-decoration: underline;

  cursor: pointer;
}

.form-check.checkbox-lg > .form-check-input {
  height: 1.5rem;

  width: 1.5rem;

  cursor: pointer;
}

.form-check.checkbox-lg > .form-check-label {
  margin-left: 1rem;

  cursor: pointer;
}

.pages,
.jump-to-page {
  display: flex;

  justify-content: center;

  gap: 0 0.5rem;
}

.page-num,
.page-prev,
.page-next {
  text-align: center;

  min-width: 2rem !important;

  padding: 0.5rem 0.5rem;

  border: 0.0625rem solid #929292;

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

  border-radius: 0.25rem;

  text-decoration: none !important;
}

tr.top-ranked > td {
  background-color: rgba(51, 160, 255, 0.25);
}

#vote-notice {
  width: 50%;
}

#vote-banner-wrap {
  max-width: 75%;

  gap: 1rem;
}

.disabled {
  cursor: not-allowed;
}

.disabled > table > tr:first-child > td {
  opacity: 0.25;
}

a[id^="votelink-"] > img {
  transition: filter 0.25s ease-in-out;
}

a[id^="votelink-"]:hover > img,
a[id^="votelink-"]:focus > img,
a[id^="votelink-"]:focus-within > img {
  filter: saturate(1.15) brightness(1.05) contrast(1.05);
}

div[id^="banner-"].disabled {
  filter: saturate(0);

  opacity: 0.66;
}

.qr-wrap {
  max-width: 60% !important;

  padding: 1rem;

  margin: 0 auto;
}

#navbar a {
  position: relative;
}

#navbar a > div.icon-promo {
  height: 3.3rem;

  width: 3.3rem;

  position: absolute;

  right: -2.25rem;

  bottom: calc(50% - 0.75rem);

  background-image: url("../img/icon/promo.webp");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  z-index: -1;

  animation: sway 3s cubic-bezier(0.25, 0.25, 0.25, 0.25) forwards infinite;
}

@keyframes pop-out-msg {
  from {
    opacity: 1;
    visibility: visible;
    z-index: 1030;
  }

  to {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
}

@-webkit-keyframes pop-out-msg {
  from {
    opacity: 1;
    visibility: visible;
    z-index: 1030;
  }

  to {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
}

@keyframes sway {
  0% {
    transform: rotate(0deg);
  }

  4.16% {
    transform: rotate(2.5deg);
  }

  8.32% {
    transform: rotate(-2.5deg);
  }

  12.48% {
    transform: rotate(5deg);
  }

  16.64% {
    transform: rotate(-5deg);
  }

  20.8% {
    transform: rotate(2.5deg);
  }

  24.96% {
    transform: rotate(-2.5deg);
  }

  24.97% {
    transform: rotate(0);
  }
}

.card {
  --bs-card-bg: #252532 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: white !important;
}