.dotgothic16-regular {
   font-family: "DotGothic16", sans-serif;
   font-weight: 400;
   font-style: normal;
 }

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

 body {
   background-color: black;
   color: white;
   overflow-x: hidden;

 }

 .bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("../img/kbg.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;
   animation: bgGlitch 3.5s infinite steps(1);
 }

 @keyframes bgGlitch {

   0%,
   100% {
     background: url(../img/kbg.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }

   92.5% {
     background: url(../img/kbg2.jpg);
     background-size: cover;
   }

   95% {
     background: url(../img/kbg3.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }

   97.5% {
     background: url(../img/kbg4.jpg);
     background-size: cover;
   }

   100% {
     background: url(../img/kbg5.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }
 }

 h1 {
   font-size: 3rem;
   text-align: center;
   color: #f563e0;
   text-shadow:
     -1px -1px 0 #000,
     1px -1px 0 #000,
     -1px 1px 0 #000,
     1px 1px 0 #000;
 }

 h2 {
   font-size: 2rem;
   text-align: center;
   color: #5ed9eb;
 }

 h3 {
   font-size: 1.5rem;
   text-align: center;
   color: #5ed9eb;
 }

 .bottomBar {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
 }

 .iconBarThingy {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 20px;
 }

 .icon-wrapper {
   border-radius: 20px;
   overflow: hidden;
   display: inline-block;
 }

 .blur-bg {
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   padding: 0px;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 img {
   width: 80px;
   opacity: 0.8;
 }

 .preloader {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   z-index: 10;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: black;
 }

 .spinner1,
 .spinner2,
 .spinner3 {
   position: absolute;
   width: 20px;
   height: 20px;
   border: 3px solid transparent;
   border-radius: 50%;
 }

 .spinner1 {
   border-left: 3px solid #5ed9eb;
   border-bottom: 3px solid #5ed9eb;
   animation: spinner1r 1s linear infinite;
 }

 .spinner2 {
   border-left: 3px solid #5ed9eb;
   border-bottom: 3px solid #5ed9eb;
   width: 30px;
   height: 30px;
   animation: spinner2r 1.2s linear infinite reverse;
 }

 .spinner3 {
   border-left: 3px solid #5ed9eb;
   border-bottom: 3px solid #5ed9eb;
   width: 40px;
   height: 40px;
   animation: spinner3r 1.5s linear infinite;
 }

 @keyframes spinner1r {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 @keyframes spinner2r {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 @keyframes spinner3r {
   from {
     transform: rotate(360deg);
   }

   to {
     transform: rotate(0deg);
   }
 }

 p {
   margin-top: 90px;
   font-size: medium;
   color: #5ed9eb;
 }

 @keyframes glitchFade {
   0% {
     opacity: 1;
   }

   10% {
     opacity: 0;
   }

   20% {
     opacity: 1;
   }

   30% {
     opacity: 0;
   }

   40% {
     opacity: 1;
   }

   50% {
     opacity: 0;
   }

   60% {
     opacity: 1;
   }

   70% {
     opacity: 0;
   }

   80% {
     opacity: 1;
   }

   90% {
     opacity: 0;
   }

   100% {
     opacity: 0;
   }
 }

 .glitch-out {
   animation: glitchFade 0.5s ease-in-out forwards;
   pointer-events: none;
 }

 main {
   opacity: 0;
   transition: opacity 1s ease-in-out 2.1s;
 }

 body.loaded main {
   opacity: 1;
 }

 .scanBar {
   position: absolute;
   width: 100%;
   height: 20px;
   left: 0;
   top: -20px;
   background: linear-gradient(to bottom,
       rgba(255, 255, 255, 0) 0%,
       rgba(255, 255, 255, 0.25) 50%,
       rgba(255, 255, 255, 0) 100%);
   mix-blend-mode: screen;
   opacity: 0.5;
   pointer-events: none;
   animation: scanLine 5s linear infinite, flicker 0.15s linear infinite;
   ;
   z-index: 30;
 }

 @keyframes flicker {

   0%,
   100% {
     opacity: 0.4;
   }

   50% {
     opacity: 0.6;
   }
 }

 @keyframes scanLine {
   0% {
     transform: translateY(-10%);
   }

   95% {
     transform: translateY(-10%);
   }

   100% {
     transform: translateY(120vh);
   }
 }

 footer {
   margin: 0;
   padding: 0;
   display: flex;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 20px;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.4);
 }

 .footer {
   font-size: 10px;
   padding: 0;
   margin: 0;
   color: white;
 }

 .footerLink {
   font-size: 10px;
   color: white;
   text-decoration: none;
 }

 .overlay {
   display: block;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background-image: url(../img/overlay.jpg);
   background-repeat: repeat;
   background-size: 200px auto;
   z-index: 0;
   background-color: rgba(0, 0, 0, 0.5);
   mix-blend-mode: overlay;
   animation: crt 0.5s linear infinite;
 }

 @keyframes crt {
   0% {
     background-position: 0px 0px;
   }

   100% {
     background-position: 10px 10px;
   }
 }

 .iconBarThingy {
   transition: transform 0.1s ease-out;
   will-change: transform;
   z-index: 10;
 }

 .popupMsg {
   position: fixed;
   top: 5px;
   right: 5px;
   background-color: rgba(0, 0, 0, 0.8);
   color: #5ed9eb;
   padding: 10px 20px;
   border: 1px solid #5ed9eb;
   border-radius: 4px;
   font-size: 12px;
   z-index: 100;
   opacity: 0;
   animation: popupFade 2s ease-out forwards;
 }

 @keyframes popupFade {
   0% {
     opacity: 0;
     transform: translate(0, -20px);
   }

   5% {
     opacity: 0;
     transform: translate(0, -20px);
   }

   10% {
     opacity: 1;
     transform: translate(0, 5px);
   }

   80% {
     opacity: 1;
     transform: translate(0, 5px);
   }

   90% {
     opacity: 0;
     transform: translate(0, -20px);
   }

   100% {
     opacity: 0;
     transform: translate(0, -20px);
   }
 }

 .cyber-terminal {
   position: fixed;
   bottom: 180px;
   left: 5px;
   width: 200px;
   max-height: 100px;
   overflow-y: hidden;
   font-size: 8px;
   line-height: 1.2;
   color: rgba(0, 255, 0, 0.2);
   /* ghost green */
   background-color: rgba(0, 0, 0, 0.4);
   padding: 10px 8px;
   border: 1px solid rgba(0, 255, 0, 0.4);
   border-radius: 4px;
   pointer-events: none;
   /* so it doesn’t block clicks */
   z-index: 9999;
   text-shadow: 0 0 2px rgba(94, 217, 235, 0.4);
 }

 .cyber-terminal div:last-child::after {
   content: "▋";
   animation: blink 1s step-end infinite;
 }

 @keyframes blink {
   50% {
     opacity: 0;
   }
 }

 /* Glitchy effect */
 .glitch {
  color: rgba(245, 99, 224, 0.8);
   animation: glitchText 0.3s infinite;
 }

 @keyframes glitchText {
   0% {
     transform: translate(0px, 0px);
   }

   20% {
     transform: translate(-0.5px, 0.5px);
   }

   40% {
     transform: translate(0.5px, -0.5px);
   }

   60% {
     transform: translate(-0.5px, -0.5px);
   }

   80% {
     transform: translate(0.5px, 0.5px);
   }

   100% {
     transform: translate(0px, 0px);
   }
 }

 /* LED pulse for relevant lines */
 .pulse {
   animation: glow 1s ease-in-out infinite;
 }

 @keyframes glow {
   0% {
    color: #5ed9eb;
    opacity: 0.8;
   }

   50% {
    color: #5ed9eb;
     opacity: 1;
   }

   100% {
    color: #5ed9eb;
     opacity: 0.8;
   }
 }