/* Light mode overrides */
.light-mode {
  background-color: white !important;
  color: black !important;
}

/* Navbar in light mode */
.light-mode .custom-navbar {
  background-color: white !important;
  border-bottom: 2px solid red;
}

.light-mode .custom-navbar .nav-link {
  color: black !important;
}

.light-mode .custom-navbar .nav-link:hover {
  color: red !important;
}

.light-mode .custom-navbar .navbar-brand {
  color: red !important;
}

/* Cards in light mode */
.light-mode .custom-card {
  background-color: white;
  color: black;
  border-color: red;
}

/* Footer in light mode */
.light-mode .custom-footer {
  background-color: white;
  color: black;
  border-top: 2px solid red;
}

/* Light mode button override */
.light-mode .btn-danger {
  background-color: white !important;
  color: red !important;
  border-color: red !important;
}

.light-mode .btn-danger:hover {
  background-color: #ffe5e5 !important;
  color: #b30000 !important;
  border-color: #b30000 !important;
}

#me-img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  display: block;
  margin: 20px auto;
}

#me-img {
  width: 100%;
  max-width: 350px;
  border-radius: 10px;
  display: block;
  margin: 20px auto;
  box-shadow: 0 0 10px red;
  transition: 0.3s ease;
}

#me-img:hover {
  box-shadow: 0 0 20px #ff0000;
  transform: scale(1.03);
}

body {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
}

p {
  padding-left: 50px;
  padding-right: 50px;
}

.bg-dark {
  background-color: black !important;
}

.navbar {
  border-bottom: 2px solid red;
  margin-bottom: 30px;
  /* optional red accent */
}

/* Pure black navbar */
.custom-navbar {
  background-color: #000 !important;
  border-bottom: 2px solid red;
  /* red accent line */
}

/* Navbar links */
.custom-navbar .nav-link {
  color: white !important;
  position: relative;
  padding-bottom: 5px;
  transition: color 0.2s ease;
}

/* Hover color */
.custom-navbar .nav-link:hover {
  color: red !important;
}

/* Active link (current page) */
.custom-navbar .nav-link.active {
  color: red !important;
  font-weight: bold;
}

/* Underline animation */
.custom-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: red;
  transition: width 0.3s ease;
}

.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after {
  width: 100%;
}

/* Brand styling */
.custom-navbar .navbar-brand {
  color: red !important;
  font-weight: bold;
  font-size: 1.5rem;
  transition: 0.2s ease;
}

.custom-navbar .navbar-brand:hover {
  color: white !important;
}

.custom-navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

.navbar-toggler {
  border-color: red;
}

.navbar-toggler-icon {
  filter: invert(1);
  /* makes it white */
}

/* Hero section spacing + color */
.hero {
  padding-top: 80px;
  padding-bottom: 80px;
}

.custom-navbar .nav-item {
  margin: 0 20px;
  /* increase left/right spacing */
}

/* Footer styling */
.custom-footer {
  background-color: #000;
  border-top: 2px solid red;
  color: white;
}

.footer-link {
  color: red;
  text-decoration: none;
}

.footer-link:hover {
  color: white;
}

.btn-danger {
  background-color: black;
  /* pure black button */
  color: white;
  /* white text */
  border: 2px solid red;
  /* red border */
  padding: 10px 20px;
  transition: 0.2s ease;
  /* smooth hover */
}

.btn-danger:hover {
  border-color: #3d0202;
  /* darker red on hover */
  color: #3d0202;
  /* optional: red text on hover */
  background-color: #0d0d0d;
  /* slightly lighter black hover */
}

.txtRed {
  color: red;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  /* or any width */
}

/*Card styling*/
.custom-card {
  background-color: #000;
  /* black card */
  color: white;
  /* white text */
  border: 2px solid #ff0000;
  /* optional red outline */
}

.custom-title {
  color: #ff0000;
  /* red title */
}

.custom-card:hover {
  border-color: #b30000;
  transform: translateY(-3px);
  transition: 0.2s ease;
}

.list-group-item {
  background-color: black;
  /* match your dark theme */
  color: white;
  /* white text */
  border-color: red;
  /* optional red borders */
}

/*Iframe styling*/
iframe {
  width: 100%;
  height: 500px;
  border: 2px solid red;
  border-radius: 8px;
  background-color: black;
}

/* Navbar hamburger*/

/* Remove Bootstrap's default icon */
.custom-toggler .navbar-toggler-icon {
  display: none;
}

/* Dot menu container */
.dots-menu {
  width: 24px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* The dots */
.dots-menu span {
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  transition: 0.3s ease;
}

/* When menu is OPEN (no .collapsed class) */
.navbar-toggler:not(.collapsed) .dots-menu span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  width: 20px;
  border-radius: 3px;
}

.navbar-toggler:not(.collapsed) .dots-menu span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler:not(.collapsed) .dots-menu span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  width: 20px;
  border-radius: 3px;
}

/* Toggler border styling */
.navbar-toggler {
  border: 2px solid red;
  padding: 6px;
  border-radius: 6px;
}

/*Navbar logo styling*/

.brand-logo {
  height: 40px;
  /* adjust as needed */
  width: auto;
  filter: drop-shadow(0 0 2px red);
  /* optional red glow */
  transition: 0.2s ease;
}

.brand-logo:hover {
  transform: scale(1.05);
}

/*glitch effects*/

/* CENTER GLITCH 1 */
#glitchOverlay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 80px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to bottom,
    rgba(230, 57, 70, 0.9),
    rgba(230, 57, 70, 0.4),
    rgba(230, 57, 70, 0)
  );
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 999999;
  animation: glitchFlash 9s infinite ease-out;
  animation-delay: 0s;
}

@keyframes glitchFlash {
  0%,
  6% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  6.5% {
    opacity: 1;
    transform: translate(-49%, -51%) scale(1.08);
  }
  7.2% {
    opacity: 0.4;
    transform: translate(-51%, -49%) scale(0.96);
  }
  7.6% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
  }
}

/* CENTER GLITCH 2 */
#glitchOverlay2 {
  position: fixed;
  top: 62%;
  left: 42%;
  width: 140px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to bottom,
    rgba(230, 57, 70, 0.9),
    rgba(230, 57, 70, 0.4),
    rgba(230, 57, 70, 0)
  );
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 999999;
  animation: glitchFlash2 13s infinite ease-out;
  animation-delay: 4.3s;
}

@keyframes glitchFlash2 {
  0%,
  4% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  4.4% {
    opacity: 1;
    transform: translate(-49%, -51%) scale(1.06);
  }
  5.1% {
    opacity: 0.35;
    transform: translate(-51%, -49%) scale(0.94);
  }
  5.5% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
  }
}

/* VERTICAL SWEEP – SLOW + OFFSET */
#scanlineSweep {
  position: fixed;
  top: -8px;
  left: 0;
  width: 100vw;
  height: 8px;
  background: rgba(230, 57, 70, 1);
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  animation: sweepVertical 18s infinite ease-out;
  animation-delay: 0s;
}

@keyframes sweepVertical {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  3% {
    opacity: 1;
    transform: translateY(0%);
  }
  7% {
    opacity: 1;
    transform: translateY(100vh);
  }
  9% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* HORIZONTAL SWEEP – DIFFERENT PERIOD + DELAY */
#sideSweep {
  position: fixed;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100vh;
  background: rgba(230, 57, 70, 1);
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  animation: sweepHorizontal 23s infinite ease-out;
  animation-delay: 6.7s;
}

@keyframes sweepHorizontal {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  4% {
    opacity: 1;
    transform: translateX(0%);
  }
  8% {
    opacity: 1;
    transform: translateX(100vw);
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* CHROMATIC FLASH – SLOWER */
#chromaticFlash {
  position: fixed;
  inset: 0;
  background: rgba(255, 0, 0, 0.15);
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  mix-blend-mode: screen;
  animation: chroma 16s infinite ease-out;
  animation-delay: 2.1s;
}

@keyframes chroma {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.7;
    filter: blur(2px) hue-rotate(20deg);
  }
  20% {
    opacity: 0;
    filter: none;
  }
  100% {
    opacity: 0;
  }
}

/* DRIFTING BACKGROUND */
#bgDrift {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(230, 57, 70, 0.25),
    rgba(230, 57, 70, 0)
  );
  filter: blur(60px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: drift 22s infinite linear;
}

@keyframes drift {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    transform: translate(-40%, -60%) scale(1.2);
  }
  50% {
    transform: translate(-60%, -40%) scale(0.9);
  }
  75% {
    transform: translate(-45%, -55%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}