body {
    font-family: 'Inter', sans-serif;
}

body {
    background: linear-gradient(135deg, #381370 20%, #d32f2f 100%);
}

.border-anim-wrapper {
    position: relative;
    border-radius: 0.5rem; /* Matches Tailwind's rounded-lg */
}

.border-anim-wrapper::before {
    content: "";
    position: absolute;
    top: -4px; /* Border thickness */
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: inherit;
    background-image: linear-gradient(90deg, #d32f2f, #9a0007, #d32f2f);
    background-size: 300% 300%;
    animation: borderAnimation 3s ease-in-out infinite alternate;
    z-index: -1;
}

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

/* Webkit-based browsers */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: black;
}
::-webkit-scrollbar-thumb {
    background-color: #d32f2f;
    border-radius: 6px;
    border: 3px solid black;
}

.details-content {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
}

details[open] .details-content {
    opacity: 1;
}

details > summary {
    padding-left: 35px;  /* Add space for the marker */
    position: relative;  /* For marker positioning */
    list-style: none;   /* Remove default marker */
}

details > summary::before {
    content: "▶";      /* Custom marker */
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    top: 50%;
}

details[open] > summary::before {
    content: "▼";      /* Changed marker when open */
}

/* Remove default marker in webkit browsers */
details > summary::-webkit-details-marker {
    display: none;
}

@keyframes riseUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.rise-up {
  animation: riseUp 0.8s ease-out forwards;
}

.dropdown-arrow {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22292.4%22 height=%22292.4%22 viewBox=%220 0 292.4 292.4%22><path fill=%22%23FFFFFF%22 d=%22M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.6 5.4-7.9 5.4-12.9 0-5-1.9-9.2-5.5-12.7z%22/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.8em;
}