.authContainer {
    display: grid;

    margin: 32px auto 0px auto;
    padding:10px 70px 30px 15px;

    width: fit-content;

    border: var(--theme-accent-2-light) solid 4px;
    border-radius:10px;

    background:rgb(0, 0, 0);

    & .formBody {
      display:grid;

      grid-template-columns:auto auto;
    }

    & form {
      color: var(--theme-accent-1-base);
      font-size: 24px;
      font-family: "BW";
    }

    & p {
      color: var(--theme-accent-1-base);
      font-family: "BW";
      font-size: 32px;
    }

    & label {
      margin-right: 8px;
    }

    & input[type=password], input[type=text] {
      border: solid var(--theme-gray-base) 1px;
      border-radius: 4px;
      padding-right: 0px;

      background-color: var(--theme-black);

      color: var(--theme-white);
      font-size: 24px;
      font-family: "BW";

      &:focus {
        outline-style: none;
      }

      &:hover {
        cursor: pointer;
      }
    }

    & input[type=submit] {
      margin: 16px 8px 16px 0px;
      padding-left: 8px;
      padding-right: 8px;

      background: black;
      border-style: solid;
      border-color: var(--theme-accent-2-base);

      font-family: "BW";
      font-size: 24px;
      color: var(--theme-white);
      text-shadow: none;

      &:disabled {
        border-color: var(--theme-gray-base);
        color: var(--theme-gray-base);
      }

      &:hover:enabled {
        cursor: pointer;
        background: var(--theme-accent-2-dark);
      }
    }

    & input[type=checkbox] {
      background-color: var(--theme-black);
      outline-color: var(--theme-accent-2-light);

      &:hover {
        cursor: pointer;
      }
    }

    & a {
      color: var(--theme-accent-1-base);
    }
}

.blinker {
  font-style: bold;
  animation: animate steps(1, jump-start) 0.5s infinite; 
}  

@keyframes animate{ 
  0%{ 
      opacity: 1; 
  } 
  50%{ 
      opacity: 0; 
  } 
} 

.glitch, .glitchHeader, .glitchMinor {
  position: relative;

  padding: 8px 0px 8px 0px;

  color: var(--theme-accent-1-base);
  font-size: 24px;
  font-family: "BW";

  &.glitchHeader {
    margin: 0 auto 16px 0;

    font-size: 32px;
    text-decoration: underline; 
  }

  &.glitchMinor {
    position: relative;

    margin: 0 auto 0px 0;
  
    font-size: 16px;
    text-decoration: underline; 

    &:after {
      padding: 8px 0px 0px 0px;
    }

    &:before {
      padding: 8px 0px 0px 0px;
    }
  }

  &:after {
    position: absolute;

    padding: 8px 0px 8px 0px;

    left: 2px;
    top: 0;

    background: black;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 4s infinite linear alternate-reverse;

    content: attr(data-text);
     
    text-shadow: -1px 0 red;  
    color: var(--theme-accent-1-base);

    overflow: hidden;
    white-space: nowrap;
  }

  &:before {
    position: absolute;

    padding: 8px 0px 8px 0px;

    left: -2px;
    top: 0;

    background: black;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 6s infinite linear alternate-reverse;

    content: attr(data-text);

    text-shadow: 1px 0 blue;
    color: var(--theme-accent-1-base);

    overflow: hidden;
    white-space: nowrap; 
  }
}

.glitch-disabled, .glitchHeader-disabled, .glitchMinor-disabled {
  position: relative;

  padding: 8px 0px 8px 0px;

  color: var(--theme-accent-1-base);
  font-size: 24px;
  font-family: "BW";

  &.glitchHeader-disabled {
    margin: 0 auto 16px 0;

    font-size: 32px;
    text-decoration: underline; 
  }

  &.glitchMinor-disabled {
    position: relative;

    margin: 0 auto 0px 0;
  
    font-size: 16px;
    text-decoration: underline; 

    &:after {
      padding: 8px 0px 0px 0px;
    }

    &:before {
      padding: 8px 0px 0px 0px;
    }
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(33px, 9999px, 58px, 0);
  }
  5% {
    clip: rect(55px, 9999px, 1px, 0);
  }
  10% {
    clip: rect(46px, 9999px, 46px, 0);
  }
  15% {
    clip: rect(27px, 9999px, 52px, 0);
  }
  20% {
    clip: rect(97px, 9999px, 39px, 0);
  }
  25% {
    clip: rect(56px, 9999px, 43px, 0);
  }
  30% {
    clip: rect(5px, 9999px, 99px, 0);
  }
  35% {
    clip: rect(29px, 9999px, 44px, 0);
  }
  40% {
    clip: rect(77px, 9999px, 69px, 0);
  }
  45% {
    clip: rect(1px, 9999px, 11px, 0);
  }
  50% {
    clip: rect(44px, 9999px, 7px, 0);
  }
  55% {
    clip: rect(91px, 9999px, 93px, 0);
  }
  60% {
    clip: rect(4px, 9999px, 49px, 0);
  }
  65% {
    clip: rect(48px, 9999px, 2px, 0);
  }
  70% {
    clip: rect(1px, 9999px, 64px, 0);
  }
  75% {
    clip: rect(25px, 9999px, 26px, 0);
  }
  80% {
    clip: rect(64px, 9999px, 91px, 0);
  }
  85% {
    clip: rect(59px, 9999px, 55px, 0);
  }
  90% {
    clip: rect(10px, 9999px, 84px, 0);
  }
  95% {
    clip: rect(2px, 9999px, 99px, 0);
  }
  100% {
    clip: rect(28px, 9999px, 38px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(71px, 9999px, 100px, 0);
  }
  5% {
    clip: rect(25px, 9999px, 100px, 0);
  }
  10% {
    clip: rect(76px, 9999px, 71px, 0);
  }
  15% {
    clip: rect(87px, 9999px, 55px, 0);
  }
  20% {
    clip: rect(2px, 9999px, 4px, 0);
  }
  25% {
    clip: rect(3px, 9999px, 23px, 0);
  }
  30% {
    clip: rect(70px, 9999px, 46px, 0);
  }
  35% {
    clip: rect(7px, 9999px, 77px, 0);
  }
  40% {
    clip: rect(30px, 9999px, 77px, 0);
  }
  45% {
    clip: rect(50px, 9999px, 1px, 0);
  }
  50% {
    clip: rect(3px, 9999px, 59px, 0);
  }
  55% {
    clip: rect(37px, 9999px, 6px, 0);
  }
  60% {
    clip: rect(29px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(83px, 9999px, 19px, 0);
  }
  70% {
    clip: rect(20px, 9999px, 27px, 0);
  }
  75% {
    clip: rect(62px, 9999px, 50px, 0);
  }
  80% {
    clip: rect(45px, 9999px, 89px, 0);
  }
  85% {
    clip: rect(55px, 9999px, 58px, 0);
  }
  90% {
    clip: rect(98px, 9999px, 14px, 0);
  }
  95% {
    clip: rect(59px, 9999px, 34px, 0);
  }
  100% {
    clip: rect(3px, 9999px, 87px, 0);
  }
}