body {
    /*background: #ad5389;  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to right, #3c1053, #ad5389); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/


}

/* borders in table */
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

/** ---- turbo animations and effects ---- **/
turbo-frame {
    display: block;
    transition: opacity 0.3s;
}
turbo-frame[loading] {
    opacity: .4;
}
turbo-frame[complete] {
    opacity: 1;
}

.markdown-body p{
    margin-bottom: 1rem;
}
.markdown-body ul {
    margin-bottom: 1rem;
    margin-left: 1.5rem;
}
.markdown-body ol {
    margin-bottom: 1rem;
}
.markdown-body li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
}


/** sections **/
.section:not(:first-child) h2 {
    margin-top:3em;
}

/* -- animated cards -- */
.card-with-full-mode {
    cursor: pointer;
    transition: opacity 0.2s;
}
.card-details-when-full {
    max-height: 0;
    overflow: hidden;
}
.card-details-when-full.displayed {
    max-height: 1000px;
}
.card-with-full-mode.displayed .card-details-when-notfull {
}
.card-with-full-mode.displayed .card-details-when-notfull {
    max-height: 0;
    overflow: hidden;
}

/** animations **/
.animate-delay-100 {
    animation-delay: 100ms;
}
.animate-delay-200 {
    animation-delay: 200ms;
}
.animate-delay-300 {
    animation-delay: 300ms;
}
.animate-delay-400 {
    animation-delay: 400ms;
}
.animate-delay-500 {
    animation-delay: 500ms;
}
.animate-delay-600 {
    animation-delay: 600ms;
}
.animate-delay-700 {
    animation-delay: 700ms;
}
.animate-delay-800 {
    animation-delay: 800ms;
}
.animate-delay-900 {
    animation-delay: 900ms;
}
.animate-delay-1000 {
    animation-delay: 1000ms;
}


/* -- colors -- */
.bg-accentued {
    background-color: #f7f1e9;
}
    .bg-accentued-500, .bg-accentued-600 {
        background-color: #f7f1e9;
    }
    .bg-accentued-200 {
        background-color: #f7f1e9;
    }
    .fill-accentued, .fill-accentued-500 {
        fill: #f7f1e9;
    }
    .fill-accentued-200 {
        fill: #f7f1e9;
    }
    .text-accentued-500,.text-accentued-600 {
        color: #333;
    }
    .text-accentued-200 {
        color: #f7f1e9;
    }
.hover\:bg-accentued:hover {
    background-color: #f7f1e9;
}


.bg-accentued-light {
    background-color: #fbf9f8;
}


/* -- tooltips -- */
.tippy-box {
    background-color: #000 !important;
    border-radius: 4px !important;
    padding: 3px 6px !important;
    color: #fff !important;
    font-size: .9em;
}

/* -- AI generated content -- */
.ai-generated-content a {
    text-decoration: underline;
}
.ai-generated-content a:hover {
    text-decoration: none;
}



/* --- select of cards -picker --- */
.card-picker {
    cursor: pointer;
}

.card-picker input[type="checkbox"] {
    display: none;
}

.card-picker input[type="checkbox"].selected + .card,
.card-picker input[type="checkbox"]:checked + .card {
    background-color: #f3f4f6;
}

/* when selected, add a blue square box in top right corner */
.card-picker input[type="checkbox"].selected + .card::before,
.card-picker input[type="checkbox"]:checked + .card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #3b82f6;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* --- animated gradient text --- */
.text-gradient-animated {
    background: linear-gradient(
        90deg,
        #8b5cf6 0%,
        #ec4899 25%,
        #f97316 50%,
        #8b5cf6 75%,
        #ec4899 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-gradient 3s ease-in-out infinite;
    position: relative;
    display: inline-block;
}

.text-gradient-animated::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-effect 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer-gradient {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

@keyframes shimmer-effect {
    0% {
        background-position: -200% 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: 200% 0;
        opacity: 0;
    }
}