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;
    opacity: .4;
    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%);
}