:root {
    /* Quarto Default Colors */
  --darkblue: #00008B;    /* Dark blue (footer/links) */
  --purple: #4859ab;   /* Light blue (code) */
  --grey: #959597ff;
  
  /* Extended Color Palette */
  --lightpurple: #ecefffff;
  --verdigris: #0b9181ff;
  --jasmine: #e9c46a;
  --sandybrown: #f4a261;
  --burntpeach: #ff8533ff;
  --orange: #de6519ff;
  --github-green: #17a90cff;
  --github-blue: #1b8bedff; 

}

/* for development: so I can see the slide size */
/* .reveal .slides {
  border: 2px solid rgb(25, 0, 255);
  width: 1600px;
  height: 900px;
} */

/* --- TEXT ---------------------------------------------------------------- */

/* Text wrapping with custom width */
.text-wrap {
  max-width: var(--w, 600px) !important; /* default 600px */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Adjust space after a paragraph */
.reveal .l-space { 
  display: block;
  margin-bottom: 1.5em !important; 
}
.reveal .m-space { 
  display: block;
  margin-bottom: 0.9em !important; 
}
.reveal .s-space { 
  display: block;
  margin-bottom: 0.6em !important; 
}

/* Adjust space before a paragraph */
.reveal .l-up-space { 
  display: block;
  margin-top: 1.5em !important; 
}
.reveal .m-up-space { 
  display: block;
  margin-top: 0.9em !important; 
}
.reveal .s-up-space { 
  display: block;
  margin-top: 0.6em !important; 
}

.center {
  display: block;
  text-align: center;
}

/* Color and highlighting  */
.orange { color: var(--orange); }

.darkblue { color: var(--darkblue); }

.grey { color: var(--grey); }

.bg-highlight {
  background-color: var(--lightpurple);
  padding: 0.2em 0.5em;
  border-radius: 15px;
  /* color: var(--darkblue); */
}

.bg-yellow {
  background-color: #fef3c6d1;
  padding: 0.2em 0.5em;
  border-radius: 15px;
}

.bg-orange {
  background-color: #fedac6d0;
  padding: 0.2em 0.5em;
  border-radius: 15px;
}

.bg-jasmine {
  background-color: var(--jasmine);
  padding: 0.1em 0.4em;
  border-radius: 20px;
}

.green-button {
  background-color: var(--github-green);
  color: white;
  padding: 0.2em 0.4em;
  border-radius: 18px;
}

.blue-button {
  background-color: var(--github-blue);
  color: white;
  padding: 0.2em 0.4em;
  border-radius: 18px;
}

.grey-button {
  background-color: var(--lightpurple);
  color: rgba(57, 57, 57, 1);
  padding: 0.2em 0.4em;
  border-radius: 18px;
}

/* All bullets, all lists */
li::marker {
  color: #6d7cc6f6;
}

/* --- IMAGES -------------------------------------------------------------- */

/* Override RevealJS image constraints */
.reveal img.fixed-bottom-right {
  max-width: none !important;
  max-height: none !important;
}

/* Your custom positioning + wrapping */
.fixed-bottom-right {
  position: absolute;
  right: -20px;
  bottom: 0px;
  z-index: 10;

  /* Use a CSS variable for width */
  width: var(--w, 180px) !important;  /* default 180px if not supplied */
  height: auto !important;  /* maintain aspect ratio */
}

/* --- CODE CHUNKS -------------------------------------------------------- */

code.sourceCode {
  font-size: 1.5em !important; /* Adjust multiplier as needed */
}

/* --- CALLOUTS ---------------------------------------------------------- */

/* Change all callout text size */
.callout {
  font-size: 0.9em !important;
}

/* --- TITLE SLIDES ------------------------------------------------------ */

.reveal .left-align {
  text-align: left !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.reveal .left-align h1,
.reveal .left-align h2,
.reveal .left-align p {
  text-align: left !important;
}