:root {
  --background-color: #fefce8; /* yellow-400 */
  --bg-secondary: #facc15;
  --text-color: #1e293b;

 }

 [data-theme="dark"] {
  --background-color: #2d2b2b; /* dark yellow-brown tone */
  --bg-secondary: #31312f;
  --text-color: #fefce8;
 }
 .shan-bg {
  height: max-content;

            background:
                linear-gradient(136deg,
                    rgb(239, 217, 11) 0%,
                    rgb(248, 215, 2) 30%,
                    #05b805 30%,
                    #05b805 70%,
                    red 70%,
                    red 100%);


            
            color: white;
            font-weight: bold;
            font-size: 1em;
 }
 .gradient-border-sec {
  border: 3px solid transparent; /* reserve space for the border */
  border-radius: 10px;
  color: var(--text-color);
  background: 
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, /* inner background */
    linear-gradient(130deg, 
    #FFD700 33%,  /* Yellow */
    #32CD32 33%,  /* Green */
    #32CD32 67%,  
    #FF0000 67%
) border-box; /* border gradient */
 }
 .gradient-border {
  border: 3px solid transparent; /* reserve space for the border */
  border-radius: 10px;
  color: var(--text-color);
  background: 
    linear-gradient(var(--background-color), var(--background-color)) padding-box, /* inner background */
    linear-gradient(130deg, 
    #FFD700 33%,  /* Yellow */
    #32CD32 33%,  /* Green */
    #32CD32 67%,  
    #FF0000 67%
) border-box; /* border gradient */
}
.gradient-border:hover {
  cursor: pointer;
  transition: all 0.3s ease;
  transform: scale(1.05);
}
.texthover.regular {
  text-decoration: none;
}
.text {
  background: linear-gradient(135deg,
                    rgb(239, 217, 11) 0%,
                    rgb(248, 215, 2) 35%,
                    #05b805 35%,
                    #05b805 65%,
                    red 65%,
                    red 100%);
                   
        -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* Optional for Firefox */
      background-clip: text;
      color: transparent;
}
.texthover {
  color:var(--text-color);
            text-decoration: underline;
        }
        .texthover:hover {
            cursor: pointer;
            
            background: linear-gradient(135deg,
                    rgb(239, 217, 11) 0%,
                    rgb(248, 215, 2) 35%,
                    #05b805 35%,
                    #05b805 65%,
                    red 65%,
                    red 100%);
                   
        -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* Optional for Firefox */
      background-clip: text;
      color: transparent;

        }
        .secondly {
          background: 
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, /* inner background */
    linear-gradient(130deg, 
    #FFD700 33%,  /* Yellow */
    #32CD32 33%,  /* Green */
    #32CD32 67%,  
    #FF0000 67%
) border-box; 
        }

      .skeleton {
  background: var(--card-bg);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  
  left: -150px;
  height: 100%;
  width: 200%;
  background: linear-gradient(to right,
  transparent 0%,
                    rgb(239, 217, 11,0.2) 20%,
                    rgb(248, 215, 2,0.2) 40%,
                    #05b80529 40%,
                    #05b80529 60%,
                    #ff000027 60%,
                    #ff00002a 80%,transparent 100%);
                    animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(200%);
  }
  0% {
    transform: translateX(-50%);
  }
}