:root, [data-bs-theme=light] {
  --bs-body-bg: #f489bc;
  --bs-body-bg-rgb: 244,137,188;
}

:root {
  /*--bs-navbar-color: #f489bc;*/
}

html {
  scroll-padding-top: 80px;
}

body, html {
  overflow-x: hidden;
  width: 100vw;
  margin: 0;
  padding: 0;
}

form, form * {
  color: #fec810 !important;
}

button, .btn {
  /*color: #ff6262;*/
  /*padding: 10px 10px;*/
  font-size: 25px;
  /*border-radius: 5px;*/
  /*cursor: pointer;*/
  /*transition: background-color 0.3s ease, transform 0.1s ease;*/
  /*border: none;*/
  /*border-bottom-width: 17.88889px;*/
  /*font-family: Barrio, serif;*/
  /*background: #fe7e6e;*/
  /*width: 125%;*/
}

button:hover, .btn:hover {
  background-color: #fe7e6e;
}

.custom-pattern-container {
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

.custom-pattern-container:hover {
  transform: scale(1.02);
}

@keyframes buttonClick {
  0% {
    transform: scale(1);
    background-color: #ff86db;
  }
  50% {
    transform: scale(1.1);
    background-color: #e675c5;
  }
  100% {
    transform: scale(1);
    background-color: #ff86db;
  }
}

/* Default navbar link style */

.nav-link {
  font-size: 22px;
  color: var(--bs-navbar-color) !important;
  transition: color 0.15s ease-in-out, text-shadow 0.15s ease-in-out;
}

/* Active link style (applied after click) */

.nav-link.active {
  color: #ff6262 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 1px 2px #000, 0px -1px 2px #000, 1px 0px 2px #000, -1px 0px 2px #000 !important;
}

/* Glitch effect for text */

.glitch-text {
  font-family: 'Barrio', sans-serif;
  color: white;
  text-align: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

/* Hover glitch animation without !important to allow color changes */

.glitch-text:hover {
  animation: glitch-color 0.5s infinite alternate ease-in-out, glitch-move 0.2s infinite alternate ease-in-out;
}

/* Text color animation for glitch (multi-color effect) */

@keyframes glitch-color {
  0% {
    color: #f489bc;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  }
  25% {
    color: #fec810;
    text-shadow: 2px 2px 1px #000, -2px -2px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000;
  }
  50% {
    color: #fe7e6e;
    text-shadow: 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000;
  }
  75% {
    color: #f489bc;
    text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
  }
  100% {
    color: #fec810;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  }
}

/* Glitch movement animation */

@keyframes glitch-move {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(-2px) translateY(1px) rotate(0.5deg);
  }
  100% {
    transform: translateX(2px) translateY(-1px) rotate(-0.5deg);
  }
}

@media (min-width: 768px) {
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
}

.text-primary {
  color: #fec810 !important;
}

/* CSS */

.pride-flag {
  font-size: 50px;
  background: repeating-linear-gradient( to bottom, #ff0000 0%, #ff0000 12.5%, #ff4500 12.5%, #ff4500 25%, #ffd700 25%, #ffd700 37.5%, #32cd32 37.5%, #32cd32 50%, #1e90ff 50%, #1e90ff 62.5%, #8a2be2 62.5%, #8a2be2 75%, #ff1493 75%, #ff1493 87.5%, #ff69b4 87.5%, #ff69b4 100% );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-align: center;
}