:root {
  --font-family-sans-serif: "Montserrat", sans-serif;
  --font-family-monospace: "Fira Code", monospace;
  --bs-body-font-family: "Open Sans", sans-serif;

  --body-color: #4A4949;
  --link-color: #29344c;
  --footer-bg: #EDECEC;
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("./styles/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./styles/fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  src: url("./styles/fonts/FiraCode-VariableFont_wght.ttf") format("truetype");
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--body-color);
}

a {
  color: var(--link-color);
}

footer {
  background-color: var(--footer-bg);
}

code,
pre {
  font-family: var(--font-family-monospace);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans-serif);
}

/* Remove default background */
.cr-section {
  background-color: transparent !important;
}

.cr-section:not(.overlay-center) .narrative-col .narrative,
.cr-section:not(.overlay-center) .narrative-col .narrative p,
.cr-section:not(.overlay-center) .narrative-col .narrative li,
.cr-section:not(.overlay-center) .narrative-col .narrative span,
.cr-section:not(.overlay-center) .narrative-col .narrative div {
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body-color);
}

.cr-section:not(.overlay-center) .narrative-col .narrative h1,
.cr-section:not(.overlay-center) .narrative-col .narrative h2,
.cr-section:not(.overlay-center) .narrative-col .narrative h3,
.cr-section:not(.overlay-center) .narrative-col .narrative h4,
.cr-section:not(.overlay-center) .narrative-col .narrative h5,
.cr-section:not(.overlay-center) .narrative-col .narrative h6 {
  font-family: var(--font-family-sans-serif);
  color: var(--body-color);
}

.cr-section:not(.overlay-center) .narrative-col .narrative code,
.cr-section:not(.overlay-center) .narrative-col .narrative pre {
  font-family: var(--font-family-monospace);
}

.cr-section.overlay-center .narrative-col .narrative,
.cr-section.overlay-center .narrative-col .narrative p,
.cr-section.overlay-center .narrative-col .narrative li,
.cr-section.overlay-center .narrative-col .narrative span,
.cr-section.overlay-center .narrative-col .narrative div {
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  line-height: 1.6;
}

.cr-section.overlay-center .narrative-col .narrative h1,
.cr-section.overlay-center .narrative-col .narrative h2,
.cr-section.overlay-center .narrative-col .narrative h3,
.cr-section.overlay-center .narrative-col .narrative h4,
.cr-section.overlay-center .narrative-col .narrative h5,
.cr-section.overlay-center .narrative-col .narrative h6 {
  font-family: var(--font-family-sans-serif);
}

.cr-section.overlay-center .narrative-col .narrative code,
.cr-section.overlay-center .narrative-col .narrative pre {
  font-family: var(--font-family-monospace);
}

/* Overlay-center block styling */
.cr-section.overlay-center .narrative-col .narrative {
text-align: center;
background-color: #FEF6F6;
opacity: 0.85;
color: #4A4949;
width: 600px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}

/* Hide empty narrative blocks */
.cr-section.overlay-center .narrative-col .narrative:empty,
.cr-section.overlay-center .narrative-col .narrative:has(:only-child:empty),
.cr-section.overlay-center .narrative-col .narrative:not(:has(*)) {
  display: none;
}

#cr-ward-imd .cell,
#cr-ward-imd .cell-output-display,
#cr-ward-imd .quarto-figure {
  width: 1200px;
}

.btn-primary, .btn-primary:visited {
  background-color: #29344c !important;
  border-color: #29344c !important;
  border-width: 2px;
  border-radius: 0%;
}

.btn-primary:active, .btn-primary:hover {
  background-color: #9A9CB3 !important;
  border-color: #FFDD00 !important;
  border-width: 2px;
  border-radius: 0%;
}

.cr-section.sidebar-left .cell-output-display,
.cr-section.sidebar-left .quarto-figure {
  width: 600px;
}

.cr-section.overlay-center .cell-output-display,
.cr-section.overlay-center .quarto-figure {
  width: 750px;
}