:root {
  --md-admonition-icon--history-bit: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; stroke: %23231f20; stroke-miterlimit: 10; stroke-width: 3px; %7D .st1 %7B stroke-linecap: round; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M17.49,29.39l-7.76-2.74c-1.39-.49-2.51-2.08-2.51-3.55V6.21c0-1.47,1.12-2.26,2.51-1.77l7.76,2.74c1.39.49,2.51,2.08,2.51,3.55v16.88c0,1.47-1.12,2.26-2.51,1.77Z'/%3E%3Cpath class='st0' d='M22.51,29.39l7.76-2.74c1.39-.49,2.51-2.08,2.51-3.55V6.21c0-1.47-1.12-2.26-2.51-1.77l-7.76,2.74c-1.39.49-2.51,2.08-2.51,3.55v16.88c0,1.47,1.12,2.26,2.51,1.77Z'/%3E%3Cpath class='st1' d='M36.58,7.77v23.32c0,1.37-1.18,2.48-2.63,2.48H6.05c-1.45,0-2.63-1.11-2.63-2.48V7.77'/%3E%3C/svg%3E");
  --md-admonition-icon-summary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %23231f20; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cline class='st0' x1='4.72' y1='10.42' x2='35.28' y2='10.42'/%3E%3Cline class='st0' x1='4.72' y1='16.92' x2='30.21' y2='16.92'/%3E%3Cline class='st0' x1='4.72' y1='29.93' x2='24.4' y2='29.93'/%3E%3Cline class='st0' x1='4.72' y1='23.43' x2='35.28' y2='23.43'/%3E%3C/svg%3E");
  --main: rgb(127, 176, 105);
  --main-red: rgb(239, 71, 111);
}

/* Font files */
@font-face {
  font-family: 'PP Right Grotesk Text';
  src: url("../fonts/PPRightGroteskText-Regular.woff2") format('woff2'),
       url("../fonts/PPRightGroteskText-Regular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk Mono';
  src: url("../fonts/PPRightGroteskMono-Bold.woff2") format('woff2'),
       url("../fonts/PPRightGroteskMono-Bold.woff") format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url("../fonts/EBGaramond-Bold.ttf") format('ttf');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Header Colors */
.md-header {
  background-color: var(--main-red) !important;
  color: #ffffff !important;
}

/* Sidebar Color */
[data-md-color-scheme="dem"] {
  --md-primary-fg-color: var(--main-red);
  --md-primary-fg-color--light: rgb(255, 241, 231);
  --md-primary-fg-color--dark:  #a54500;
}

.md-typeset {
  font-family: 'PP Right Grotesk Text', sans-serif;
  /* Optional: add fallback fonts */
}

.md-content .md-typeset h1 {
  font-family: 'EB Garamond';
  font-size: 36px;
  font-weight: bold;
  font-style: normal;
  color: var(--main);
}

.md-content .md-typeset h2 {
  font-family: 'EB Garamond';
  font-size: 30px;
  font-weight: bold;
  font-style: normal;
  color: var(--main);
}

.md-content .md-typeset h3 {
  font-family: 'EB Garamond';
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  color: var(--main);
}

md-content .md-typeset small {
   font-family: 'PP Right Grotesk Text', sans-serif;
   font-weight: 500;
   font-size: 8px;
}

.md-typeset strong {
  color: var(--main-red);
}

.md-typeset a {
  color: var(--main);
}

.md-nav__item .md-nav__link--active {
  color: var(--main-red) !important;
  font-weight: 600;
}

.md-nav a:hover {
  color: var(--main-red);
}

.md-nav__link:hover {
  color: var(--main-red) !important;
}

/* Active item hover */
.md-nav__link--active:hover {
  color: var(--main-red) !important;
  font-weight: 600;
}

/* Remove icon for Exercises */
.md-typeset .admonition.exercises > .admonition-title::before,
.md-typeset .admonition.exercises > summary::before {
  display: none
}

/* Style for Exercises */
.md-typeset .admonition.exercises {
  border: none;
  background-color: #fff1e7;
  padding: 1em;
  border-radius: 6px;
  font-family: 'PP Right Grotesk Text', sans-serif;
  font-size: 0.95em;
}

/* Title for Exercises */
.md-typeset .admonition.exercises > .admonition-title {
  background-color: transparent !important;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--main);
  font-family: 'PP Right Grotesk Mono', monospace;
}

/* Icon Histoy Bit */
.md-typeset .history-bit > .admonition-title,
.md-typeset .history-bit > summary {
  background-color: rgba(43, 155, 70, 0.1);
  border-color: var(--main-red); 
}
.md-typeset .history-bit > .admonition-title::before,
.md-typeset .history-bit > summary::before {
  background-color: var(--main-red);
  -webkit-mask-image: var(--md-admonition-icon--history-bit);
          mask-image: var(--md-admonition-icon--history-bit);
}

/* Style for History Bit */
.md-typeset .admonition.history-bit {
  border: none;
  border-left: 4px solid var(--main-red);
  background-color: #ffe9f3;
  padding: 1em;
  border-radius: 6px;
  font-family: 'PP Right Grotesk Text', sans-serif;
  font-size: 0.95em;
}

/* Title for History Bit */
.md-typeset .admonition.history-bit > .admonition-title {
  background-color: transparent !important;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--main-red);
  font-family: 'PP Right Grotesk Mono', monospace;
}

/* Icon Summary */
.md-typeset .summary > .admonition-title,
.md-typeset .summary > summary {
  background-color: rgba(43, 155, 70, 0.1);
  border-color: rgb(226, 91, 91); 
}
.md-typeset .summary > .admonition-title::before,
.md-typeset .summary > summary::before {
  background-color: rgb(226, 91, 91);
  -webkit-mask-image: var(--md-admonition-icon-summary);
          mask-image: var(--md-admonition-icon-summary);
}

/* Style for Summary */
.md-typeset .admonition.summary {
  border: none;
  border-left: 4px solid rgb(226, 91, 91);
  background-color: #ffe9f3;
  padding: 1em;
  border-radius: 6px;
  font-family: 'PP Right Grotesk Text', sans-serif;
  font-size: 0.95em;
}

/* Title for Summary */
.md-typeset .admonition.summary > .admonition-title {
  background-color: transparent !important;
  font-weight: bold;
  font-size: 1.2em;
  color: rgb(226, 91, 91);
  font-family: 'PP Right Grotesk Mono', monospace;
}

/* Footer settings*/
.md-footer {
  background-color: var(--main-red);
  color: white;
  text-align: left;
  padding: 1em 0;
}

.md-footer,
.md-footer-meta {
  background-color: var(--main-red) !important;
  color: white;
}

/* Truth Table */
.truth-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.truth-table th,
.truth-table td {
  padding: 0.6em 1em;
  text-align: center;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.truth-table th:last-child,
.truth-table td:last-child {
  border-right: none;
}

.truth-table tr:last-child td {
  border-bottom: none;
}

.truth-table thead th {
  background-color: #ffcdcd; 
  font-weight: 600;
}

.truth-table td:nth-child(1),
.truth-table td:nth-child(2) {
  background-color: #fae9e0;
}

.truth-table td:nth-child(3),
.truth-table td:nth-child(4) {
  background-color: #ffe0f2;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}