:root {
  --left-spacing: 0.4em;
}

.level {
  font-family: 'Ubuntu Mono';
}

.level-0 {
  color: #2f2f2f;
  text-decoration: none;
}

.level-0:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x0]';
}

.level-1 {
  color: rgb(32, 1, 108);
}

.level-1:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x1]';
}

.level-2 {
  color: #0066ff;
  font-weight: bold;
}

.level-2:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x2]';
}

.level-3 {
  color: #88cc14;
  font-weight: bold;
}

.level-3:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x3]';
}

.level-4 {
  color: #9999ff;
  font-weight: bold;
}

.level-4:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x4]';
}

.level-5 {
  color: #ed1c24;
}

.level-5:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x5]';
}

.level-6 {
  color: #ed681c;
  font-weight: bolder;
}

.level-6:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x6]';
  animation: flicker 6s infinite;
}

@keyframes flicker {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: 0.99;
    text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 -2px 8px, 0 0 2px,
      0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

.level-7 {
  color: #694ba1;
  font-weight: 600;
}

.level-7:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x7]';
  animation: beat 2s infinite;
  display: inline-block;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.level-8 {
  color: #d71478;
  font-weight: 600;
}

.level-8:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x8][HACKER]';
  animation: animate-hacker 4s infinite;
  display: inline-block;
}

@keyframes animate-hacker {
  50% {
    content: '[0x8][H4CK3R]';
  }
}

.level-9 {
  color: #d1b600;
  font-weight: 600;
}

.level-9:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[0x9][OMNI]';
  animation: animate-omni 5s infinite;
  display: inline-block;
}

@keyframes animate-omni {
  50% {
    content: '[0x9][0MN1]';
  }
}

.level-10 {
  color: #007119;
  font-weight: 600;
}

.level-10:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  animation: animate-wizard 6s infinite;
  content: '[0xA][WIZARD]';
  display: inline-block;
}

@keyframes animate-wizard {
  80% {
    content: '[0xA][HARRY]';
  }
}

.level-11 {
  color: #004271;
  font-weight: 600;
}

.level-11:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  animation: flicker 4s infinite;
  content: '[0xB][MASTER]';
  display: inline-block;
}

.level-12 {
  color: #b00b00;
  font-weight: 600;
}

.level-12:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  /* animation: scroll 3s linear infinite; */
  content: '[0xC][GURU]';
  display: inline-block;
}

.level-13 {
  color: #05bd32;
  font-weight: 600;
}

.level-13:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  animation: flicker 7s infinite;
  content: '[0xD][GOD]';
  display: inline-block;
}

.level-0 {
  color: #3809ac;
  font-weight: 600;
}

.level-0:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[ADMIN]';
  animation: animate-owner 4s infinite;
  display: inline-block;
}

@keyframes animate-owner {
  50% {
    content: '[ADM1N]';
  }
}

.level-999 {
  color: #d71478;
  font-weight: 600;
}

.level-999:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[BUG HUNTER]';
  animation: flicker 4s infinite;
  display: inline-block;
}

.level-998 {
  color: #01a89a;
  font-weight: 600;
}

.level-998:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[CONTRIBUTOR]';
  animation: flicker 4s infinite;
  display: inline-block;
}

.level-997 {
  color: #1b6dca;
  font-weight: 600;
}

.level-997:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[STAFF]';
  animation: flicker 4s infinite;
  display: inline-block;
}

.level-simple-design:after {
  padding-left: 0 !important;
  color: #676767 !important;
}

.level-1337 {
  color: #ffbe12;
}

.level-1337:after {
  padding-left: var(--left-spacing);
  color: black;
  font-weight: bold;
  content: '[SECURITY WARRIOR]';
  animation: flicker 4s infinite;
}