:root,
:root.light {
  --color-body-bg: #fff;
  --color-header: #000;
  --color-h1: #000;
  --color-h2: #212529;
  --color-p: #212529;
  --color-input: #000;
  --color-input-bg: #fff;
  --color-box: #000;
  --color-box-bg: #E7E9EB;
  --color-url: #0d6efd;
  --color-icon: #0f9d58;
  --color-button-border: #cdcfd1;
}

:root.dark {
  --color-body-bg: #212529;
  --color-header: #adb5db;
  --color-h1: #fff;
  --color-h2: #adb5db;
  --color-p: #adb5db;
  --color-input: #fff;
  --color-input-bg: #212529;
  --color-box: #fff;
  --color-box-bg: #292e33;
  --color-url: #6ea8fe;
  --color-icon: #14c48f;
  --color-button-border: #464f59;
}

body {
  background-color: var(--color-body-bg);
  font-family: Lato, sans-serif;
}

h1 {
  color: var(--color-h1);
}

h2 {
  color: var(--color-h2);
  font-size: 1.6rem;
}

p {
  color: var(--color-p);
}

hr {
  border-top: 1px solid var(--color-p);
}

input {
  box-sizing: border-box;
  width: 100%;
  border-radius: 5px !important;
  font-size: 16px !important;
  padding: 10px !important;
  color: var(--color-input) !important;
  background-color: var(--color-input-bg) !important;
}

input:focus {
  outline: none;
  border: 1px solid #0d6efd !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input:not(:focus) {
  border: 1px solid rgb(86, 92, 110);
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid rgb(86, 92, 110);
  border-radius: 5px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-input);
  resize: none;
  background-color: var(--color-input-bg)
}

textarea:focus {
  outline: none;
  border-color: #0d6efd;
}

textarea:not(:focus) {
  border-color: rgb(86, 92, 110);
}

textarea::-webkit-scrollbar {
  width: 8px;
  background-color: #f2f2f2;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.header {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px 15px 15px 15px;
  z-index: 1000;
  background-color: transparent;
  color: var(--color-header);
  border-bottom-left-radius: 5px;
}

.icon {
  padding: 1rem;
  color: rgba(255, 255, 255, 1);
  background-color: rgb(252, 145, 45);
  border-radius: 1rem;
}

.box {
  border: none;
  font-size: 16px;
  padding: 10px;
  color: #fff;
  background-color: transparent;
  box-shadow: none;
}

.col-1-3 {
  display: none;
}

.col-2-3 {
  flex: 0 0 auto;
  width: auto;
}

@media (min-width: 1024px) {
  .master-div {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    text-align: center !important;
  }

  #home {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .head {
    justify-content: center;
  }

  .col-1-3 {
    display: block;
  }

  .col-2-3 {
    flex: 1 0 0%;
    width: 100%
  }
}

.card {
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: none !important;
  color: white !important;
}

.list-group-item {
  background-color: transparent !important;
  color: white !important;
  border: none !important;
}

/* Spinning Text */
.spinning-text-container {
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem auto;
  position: relative;
}

.spinning-text {
  width: 100%;
  height: 100%;
  animation: spin 10s linear infinite;
  display: block;
}

.spinning-text-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 140px;
  pointer-events: none;
}

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

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

/* Rainbow Button */
:root {
  --color-1: 0deg 100% 50%;
  --color-2: 144deg 100% 50%;
  --color-3: 216deg 100% 50%;
  --color-4: 288deg 100% 50%;
  --color-5: 72deg 100% 50%;
  --rainbow-speed: 2s;
}

.rainbow-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 4px;

  /* Complex Background Layering from Example */
  background-image:
    linear-gradient(#121213, #121213),
    linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)),
    linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));

  background-size: 200%;
  background-clip: padding-box, border-box, border-box;
  background-origin: border-box;
  border: 2px solid transparent;

  height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  z-index: 0;
  transition: transform 0.2s;
  animation: rainbow var(--rainbow-speed) linear infinite;
  box-shadow: 0 0 0 1px transparent;
}

.rainbow-button:active {
  transform: scale(0.95);
}

/* Bottom Glow Effect (Tailwind: before:absolute before:bottom-[-20%] ...) */
.rainbow-button::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 50%;
  z-index: 0;
  height: 20%;
  width: 60%;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: linear-gradient(90deg,
      hsl(var(--color-1)),
      hsl(var(--color-5)),
      hsl(var(--color-3)),
      hsl(var(--color-4)),
      hsl(var(--color-2)));
  filter: blur(0.75rem);
  animation: rainbow var(--rainbow-speed) linear infinite;
  pointer-events: none;
}

/* Clear the old ::after style and the comment */
.rainbow-button::after {
  content: none;
}

/* Animated Shiny Text */
.shiny-text-container {
  z-index: 10;
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: center;
}

/* Container matching the rounded border look */
.shiny-text-match-border {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ensures text is centered */
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #f5f5f5;
  /* neutral-100 */
  transition: all 0.3s ease-in;
  cursor: pointer;
  padding: 0 4px;
  /* Slight padding for the inner text wrapper */
}

/* Dark mode overrides (assuming .dark class on root/body) */
:root.dark .shiny-text-match-border {
  border-color: rgba(255, 255, 255, 0.05);
  background-color: #171717;
  /* neutral-900 */
}

.shiny-text-match-border:hover {
  background-color: #e5e5e5;
  /* neutral-200 */
}

:root.dark .shiny-text-match-border:hover {
  background-color: #262626;
  /* neutral-800 */
}

.shiny-text-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem;
  /* px-4 py-1 */
  transition: all 0.3s ease-out;
  color: #525252;
  /* neutral-600 (hover state base) */
}

:root.dark .shiny-text-content {
  color: #a3a3a3;
  /* neutral-400 (hover state base) */
}

/* The actual "Shiny" animation logic */
.shiny-text-content span {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0%,
      /* Start solid */
      rgba(0, 0, 0, 0.4) 40%,
      /* Dim */
      rgba(255, 255, 255, 1) 50%,
      /* Shine white */
      rgba(0, 0, 0, 0.4) 60%,
      /* Dim */
      rgba(0, 0, 0, 1) 100%
      /* End solid */
    );
  /* Adjust gradient colors for dark mode */
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  /* color: transparent;  <-- Important: Text must be transparent to show bg */
  /* However, the example might be using a mask. Let's try the color shim approach.*/
  color: #141414;
  /* Fallback */
  animation: shimmer 8s infinite linear;
}

:root.dark .shiny-text-content span {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.4) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.4) 60%,
      rgba(255, 255, 255, 1) 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(255, 255, 255, 0.6);
  /* Semi-transparent base to let shine through */
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: -200% 50%;
  }
}

.shiny-arrow {
  margin-left: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.3s ease-in-out;
}

.shiny-text-match-border:hover .shiny-arrow {
  transform: translateX(2px);
  /* translate-x-0.5 */
}

/* */

@keyframes rainbow {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }
}

/* Interactive Hover Button (MagicUI Inspired) */
.interactive-hover-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background: white;
  color: black;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  height: 36px;
}

.interactive-hover-button .button-text {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
}

.interactive-hover-button .button-text .btn-dot {
  width: 8px;
  height: 8px;
  background: #00ffbf;
  /* Aqua Green */
  border-radius: 50%;
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.interactive-hover-button .button-content-hover {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-weight: 700;
  opacity: 0;
  z-index: 3;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  white-space: nowrap;
}

/* The expanding circle */
.interactive-hover-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  width: 0;
  height: 0;
  background: #007fff;
  /* Blue */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: 1;
}

.interactive-hover-button:hover::before {
  width: 350%;
  height: 350%;
}

.interactive-hover-button:hover .button-text {
  transform: translateY(-40px);
  opacity: 0;
}

.interactive-hover-button:hover .button-content-hover {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.interactive-hover-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.subtitle-text {
  margin: 0;
  font-size: calc(1.2rem + 0.3vw);
  color: white;
  text-align: center;
}

@media (min-width: 1024px) {
  .subtitle-text {
    text-align: left;
    padding-left: 270px;
  }
}