.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: black;
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  justify-content: space-evenly;
  position: absolute;
  justify-content: center;
  --main: #97763a;
  --accent: #dab380;
}

.socket {
  scale: 2.3;
  width: 12.5rem;
  height: 12.5rem;
  position: absolute;
  left: 50%;
  margin-left: -6.25rem;
  top: 50%;
  margin-top: -6.25rem;
}

@media (max-width: 48rem) {
  .socket {
    scale: 1.5;
  }
}

.hex-brick {
  box-shadow: 0rem 0rem 1.5625rem 0rem var(--accent);
  scale: .5;
  background: rgb(47, 47, 47);
  width: 1.875rem;
  height: 1.0625rem;
  position: absolute;
  top: 0.3125rem;
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;

}

.h2 {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}

.h3 {
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}

.gel {
  height: 1.875rem;
  width: 1.875rem;
  transition: all .3s;
  -webkit-transition: all .3s;
  position: absolute;
  top: 50%;
  left: 50%;

}

.center-gel {
  margin-left: -0.9375rem;
  margin-top: -0.9375rem;
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.c1 {
  margin-left: -2.9375rem;
  margin-top: -0.9375rem;
}

.c2 {
  margin-left: -1.9375rem;
  margin-top: -2.6875rem;
}

.c3 {
  margin-left: 0.0625rem;
  margin-top: -2.6875rem;
}

.c4 {
  margin-left: 1.0625rem;
  margin-top: -0.9375rem;
}

.c5 {
  margin-left: -1.9375rem;
  margin-top: 0.8125rem;
}

.c6 {
  margin-left: 0.0625rem;
  margin-top: 0.8125rem;
}

.c7 {
  margin-left: -3.9375rem;
  margin-top: -2.6875rem;
}

.c8 {
  margin-left: 2.0625rem;
  margin-top: -2.6875rem;
}

.c9 {
  margin-left: -0.9375rem;
  margin-top: 2.5625rem;
}

.c10 {
  margin-left: -3.9375rem;
  margin-top: 0.8125rem;
}

.c11 {
  margin-left: 2.0625rem;
  margin-top: 0.8125rem;
}

.c12 {
  margin-left: -0.9375rem;
  margin-top: -4.4375rem;
}

.c13 {
  margin-left: -2.9375rem;
  margin-top: -4.4375rem;
}

.c14 {
  margin-left: 1.0625rem;
  margin-top: -4.4375rem;
}

.c15 {
  margin-left: -2.9375rem;
  margin-top: 2.5625rem;
}

.c16 {
  margin-left: 1.0625rem;
  margin-top: 2.5625rem;
}

.c17 {
  margin-left: -4.9375rem;
  margin-top: -0.9375rem;
}

.c18 {
  margin-left: 3.0625rem;
  margin-top: -0.9375rem;
}

.c19 {
  margin-left: -3.9375rem;
  margin-top: -6.1875rem;
}

.c20 {
  margin-left: 2.0625rem;
  margin-top: -6.1875rem;
}

.c21 {
  margin-left: 0.0625rem;
  margin-top: -6.1875rem;
}

.c22 {
  margin-left: -1.9375rem;
  margin-top: -6.1875rem;
}

.c23 {
  margin-left: -3.9375rem;
  margin-top: 4.3125rem;
}

.c24 {
  margin-left: 2.0625rem;
  margin-top: 4.3125rem;
}

.c25 {
  margin-left: 0.0625rem;
  margin-top: 4.3125rem;
}

.c26 {
  margin-left: -1.9375rem;
  margin-top: 4.3125rem;
}

.c27 {
  margin-left: -4.9375rem;
  margin-top: -0.9375rem;
}

.c28 {
  margin-left: -5.9375rem;
  margin-top: -2.6875rem;
}

.c29 {
  margin-left: -5.9375rem;
  margin-top: 0.8125rem;
}

.c30 {
  margin-left: 3.0625rem;
  margin-top: 2.5625rem;
}

.c31 {
  margin-left: -4.9375rem;
  margin-top: -4.4375rem;
}

.c32 {
  margin-left: -6.9375rem;
  margin-top: -0.9375rem;
}

.c33 {
  margin-left: 4.0625rem;
  margin-top: -2.6875rem;
}

.c34 {
  margin-left: 4.0625rem;
  margin-top: 0.8125rem;
}

.c35 {
  margin-left: -4.9375rem;
  margin-top: 2.5625rem;
}

.c36 {
  margin-left: 3.0625rem;
  margin-top: -4.4375rem;
}

.c37 {
  margin-left: 5.0625rem;
  margin-top: -0.9375rem;
}

.r1 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

.r1>.hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2>.hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3>.hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

@keyframes pulse00 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.01);
    transform: scale(0.01);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fade00 {
  0% {
    background: var(--accent);
  }

  50% {
    background: var(--accent);

  }

  100% {
    background: var(--accent);

  }
}


















































html {
  scroll-behavior: smooth;
  background-color: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.body {
  overflow: hidden;

  display: none;
  font-family: body;
}

.rules {
  max-width: 100vw;
}

.rules .rules-content {
  padding: 5% 10%;
  background-color: #121212;
  color: #fff;
}

.rules .rules-content h1 {
  font-family: title;
  font-size: 1.8rem;
  color: #00a693;
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.update_notif {
  width: fit-content;
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  text-transform: capitalize;
  padding: 1.2rem;
  border-radius: 1rem;
  background-color: rgb(255, 0, 0);
}

.rules .rules-content h2 {
  font-size: 1.5rem;
  text-align: start;
  color: #858585;
  text-transform: capitalize;
}

.rules .rules-content h2 span {
  font-size: 1.5rem;
  color: hsl(0, 0%, 62%);
}

.rules .rules-content h3 {
  margin-bottom: 1.875rem;
  font-size: 1.2rem;
  text-align: start;
  color: #fff;
  text-transform: capitalize;
}

.rules .rules-content p {
  font-size: 1rem;
}
.rules-content ol li {
  font-size: 1.5rem;
  font-weight: 800;
  padding: 2.375rem 0 0.1875rem 0;
  text-transform: capitalize;
}

.rules-content ol li p {
  font-size: 1.25rem;
  font-weight: 550;
  padding: 0.5rem 0;
  text-transform: capitalize;
}

blue-bold {
  color: cyan;
  text-decoration: underline;
  font-weight: 800;
}

red-bold {
  color: #ff0000;
  text-decoration: underline;
  font-weight: 800;
}

yellow-bold {
  color: yellow;
  text-decoration: underline;
  font-weight: 800;
}

pink-bold {
  color: hotpink;
  text-decoration: underline;
  font-weight: 800;
}

purple-bold {
  color: purple;
  text-decoration: underline;
  font-weight: 800;
}

green-bold {
  color: green;
  text-decoration: underline;
  font-weight: 800;
}

txt-bold {
  color: white;
  text-decoration: underline;
  font-weight: 800;
}

.rules-content ol li ol li{
  font-size: 1.25rem;
  font-weight: 550;
  padding: 0.5rem 0;
  text-transform: capitalize;
}
.rules-content ol li ol{
  margin-left: 1rem;
}
.rules-content ol li ol ul{
  margin-left: 2rem;
  padding: 0;
}



.rules-content ul {
  list-style: disc;
  padding: 0 0 0 2rem;
}

.rules-content ul li {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 0.7rem 0 0.2rem 0;
}


.rules-content a:is(.twitch, .cncsupport, .yt) {
  transition: color 0.4s ease, filter 0.4s ease;
  text-decoration: none;
}

.rules-content a:not(.twitch, .cncsupport, .yt) {
  color: #ff00ee;
  text-decoration: none;
  transition: color 0.4s ease;
  font-weight: 800;
}


.rules-content a:not(.twitch, .cncsupport, .yt) {
  color: #ff00ee;
  text-decoration: none;
  transition: color 0.4s ease;
  font-weight: 800;
}

.rules-content a:hover {
  color: #ff83f7;
}

.twitch {
  color: #6441a5;
  font-weight: 800;
}
.yt {
  color: rgb(234, 51, 35);
  font-weight: 800;
}

.newUPDATE span {
  transform: translateY(0.3125rem);
  color: #00a693;
  font-size: 1.5rem;
  filter: drop-shadow(0 0 0.125rem #fff) drop-shadow(0 0 0.3125rem #00a693) drop-shadow(0 0 0.5rem #00a693);
  font-variation-settings: 'FILL' 1
}

.support {
  position: relative;
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: capitalize;
}

.cncsupport {
  color: rgb(0, 190, 190);
  transition: filter 0.4s ease;
}





::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: #121212;
}

::-webkit-scrollbar-thumb {
  background: #858585;
  border-radius: 1rem;
}

::-webkit-scrollbar-thumb:hover {
  background: #ababab;
}