:root {
   --bright-blue: #007bff;
   --chocolate: chocolate;
   --slategray: slategray;
   }

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

#code-well {
   background-color: #001f3f !important;
   /* Dark Blue */
   color: #ffffff;
   padding: 20px;
   border-radius: 8px;
   max-height: 300px;
   overflow-y: auto;
   white-space: pre-wrap;
}

#supra-code-well {
   background-color: #001f3f !important;
}  

.loading {
   display: none;
}

.small-caps{
   font-variant: small-caps;
}

.smaller{
font-size: .9rem;
}

.pointer {
   cursor: pointer;
}

.pb-10 {
   padding-bottom: 10rem;
}

/* COLORS -------------------------------- */
.bright-blue {
   color: var(--bright-blue) !important;
}

.chocolate {
   color: var(--chocolate);
}
.slategray {
   color: var(--slategray);
}

/* ACCORDIONS ---------------------------- */

.accordion-item::first-of-type {
padding-bottom: 4rem;

}

/* For No Background */
.accordion-button:not(.collapsed) {
   background-color: none;
}

/* For Custom Colors */
.accordion-button:not(.collapsed) {
   background-color: #f7f9fc !important;
   color: #000000 !important;
}

.accordion-body:first-child {
   background-color: #f7f9fc;
   padding: 2rem 1rem 1rem 1rem;
}

/* Target both the default and the active (opened) state */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
   /* We redefine the SVG with stroke-width='4' instead of '2' */
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   /* Optional: Increase the size to make it even more prominent */
   background-size: 1.5rem;
   width: 1.5rem;
}

/* FLASHCARDS --------------------- */

/* Flashcard Container */
#flashcard-container {
   perspective: 1000px;
}

/* The Wrapper handles the 3D space */
.flashcard-wrapper {
   width: 250px;
   height: 350px;
   cursor: pointer;
}

/* The actual card that rotates */
.flashcard {
   width: 100%;
   height: 100%;
   position: relative;
   transition: transform 0.6s;
   transform-style: preserve-3d;
}

/* Triggered by JS */
.flashcard.is-flipped {
   transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 15px;
   box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1);
   background: white;
   border: 1px solid #dee2e6;
   padding: 20px;
}

/* Back side is already rotated */
.flashcard-back {
   transform: rotateY(180deg);
   background-color: #f8f9fa;
}

.flashcard-front img {
   width: 100%;
   /* height: 100%; */
   object-fit: cover;
   border-radius: 10px;
}

/* Circular Success Button */
.btn-circle-xl {
   width: 80px;
   height: 80px;
   padding: 10px 16px;
   border-radius: 50%;
   font-size: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}