:root {
    -
    --mono-hue: 201;
    --mono-saturation: 18%;
    --mono-shade3: hsl(var(--mono-hue), var(--mono-saturation), 13%);
    --mono-shade2: hsl(var(--mono-hue), var(--mono-saturation), 15%);
    --mono-shade1: hsl(var(--mono-hue), var(--mono-saturation), 17%);
    --mono-base: hsl(var(--mono-hue), var(--mono-saturation), 19%);
    --mono-tint1: hsl(var(--mono-hue), var(--mono-saturation), 25%);
    --mono-tint2: hsl(var(--mono-hue), var(--mono-saturation), 35%);
    --mono-tint3: hsl(var(--mono-hue), var(--mono-saturation), 43%);
    --spinner-track-color: rgba(255, 255, 255, 0.15);
    --base-background-color: var(--mono-base);
    --base-color: #d3d3d3;
    --hr-border: 1px solid var(--mono-tint2);
    --mark-background: #ffcb6b;
    --mark-color: var(--base-background-color);
    --selection-color: rgba(94, 131, 175, 0.75);
    --blockquote-background: var(--mono-shade2);
    --code-inline-background: var(--mono-tint1);
    --code-theme-background: var(--mono-shade2);
    --heading-color: #fff;
    --heading-h2-border-color: var(--mono-tint2);
    --kbd-background: var(--mono-shade2);
    --kbd-border: none;
    --kbd-color: var(--strong-color);
    --notice-important-background: var(--mono-shade2);
    --notice-tip-background: var(--mono-shade2);
    --table-cell-border-color: var(--mono-tint1);
    --table-row-odd-background: var(--mono-shade2);
    --cover-background-color: var(--base-background-color);
    --cover-background-image: radial-gradient(ellipse at center bottom, var(--mono-tint3), transparent);
    --cover-blockquote-color: var(--mark-background);
    --cover-button-border: 1px solid var(--mono-tint3);
    --cover-button-color: #fff;
    --navbar-menu-background: var(--mono-tint1);
    --navbar-menu-box-shadow: rgba(0,0,0,0.05) 0px 0px 1px, rgba(0,0,0,0.05) 0px 1px 2px, rgba(0,0,0,0.05) 0px 2px 4px, rgba(0,0,0,0.05) 0px 4px 8px, rgba(0,0,0,0.05) 0px 8px 16px, rgba(0,0,0,0.05) 0px 16px 32px;
    --copycode-background: var(--mono-tint1);
    --copycode-color: #fff;
    --docsifytabs-border-color: var(--mono-tint2);
    --docsifytabs-tab-background: var(--mono-shade1);
    --docsifytabs-tab-color: var(--mono-tint2);
    --pagination-border-top: 1px solid var(--mono-tint2);
    --pagination-title-color: #fff;
    --search-input-background-color: var(--mono-shade2);
    /*--search-input-background-image: url(data:image/svg+xml,%3Csvg height='20px' width='20px' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5' vector-effect='non-scaling-stroke'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15.8' y2='15.8' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E);*/
    --search-input-border-color: var(--mono-tint1);
    --search-input-placeholder-color: rgba(255, 255, 255, 0.4);
    --search-clear-icon-color1: rgba(255, 255, 255, 0.3);
    --sidebar-background: var(--mono-shade1);
    --sidebar-border-color: var(--mono-tint1);
    --sidebar-nav-pagelink-background: no-repeat 2px calc(50% - 2.5px) / 6px 5px linear-gradient(45deg, transparent 2.75px, var(--mono-tint2) 2.75px 4.25px, transparent 4px), no-repeat 2px calc(50% + 2.5px) / 6px 5px linear-gradient(135deg, transparent 2.75px, var(--mono-tint2) 2.75px 4.25px, transparent 4px);
    --sidebar-nav-pagelink-background--loaded: no-repeat 0px center / 5px 6px linear-gradient(225deg, transparent 2.75px, var(--mono-tint2) 2.75px 4.25px, transparent 4.25px), no-repeat 5px center / 5px 6px linear-gradient(135deg, transparent 2.75px, var(--mono-tint2) 2.75px 4.25px, transparent 4.25px);
}
root {--content-max-width: 100em;}

.sidebar-nav, .sidebar nav {
    margin: 0;
}

.sidebar {
    margin-top: 0;
}

.app-name-link {
    color: var(--sidebar-nav-link-color--active);
    font-size: var(--sidebar-name-font-size);
    font-weight: var(--sidebar-name-font-weight);
    text-align: var(--sidebar-name-text-align);
}


/*.sidebar> h1 > * > img {*/
/*    max-width: 50%;*/
/*    color: var(--base-color);*/
/*    filter: drop-shadow(2px 4px 6px black);*/
/*}*/

.column {
  float: left;
  width: 33%;
  padding: 3px;
  column-fill: balance
}

/*.column > a {*/
/*  width: 50%;*/
/*}*/

/*.row:after {*/
/*  content: "";*/
/*  display: table;*/
/*  clear: both;*/
/*}*/


.linked-in-container > *  {width: 258px;
    justify-content: center;
    padding: 1px;
    right: 0;
    position: absolute;
    bottom: 0px;
}

.linked-in-container > * > iframe {border: none}


.markdown-section a.button-secondary-rounded {
    cursor: pointer;
    color: var(--mono-shade3);
    text-decoration: none !important;
    font-weight: bold;
}

.markdown-section .button-secondary-rounded {
    cursor: pointer;
    color: var(--mono-shade3);
    height: auto;
    display: inline-block;
    padding: 10px min(20px, 5%) 10px min(20px, 5%);
    font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
    line-height: 1.2rem;
    background-color: var(--mono-tint3);
    text-decoration: none;
    border: 1px solid var(--selection-color) !important;
    font-weight: bold;
    border-radius: 1.4rem;

  vertical-align: middle;
}


.material-symbols-outlined {
  vertical-align: middle;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/*<IMG src="assets/profilepic.webp" style="float: right; vertical-align: middle; text-align: right; width:30%;*/
/*max-width: 256px; margin-left: 1em; margin-bottom: 1em" alt="Profile pic" title="Sylvia Van Belle"></IMG>*/


/*STYLES FOR ACCORDIONS*/
ul.accordion-wrapper {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  /* counter-reset: question; */
}

ul.accordion-wrapper > li {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* counter-increment: question; */
  cursor: pointer;
}

ul.accordion-wrapper > li:hover {
  background: var(--mono-tint3);

}

ul.accordion-wrapper > li > p:first-of-type {
  position: relative;
  margin: 0;
  padding: 10px 20px;
  font-weight: bold;
}

ul.accordion-wrapper > li.active > p:first-of-type {
  padding: 10px 20px 20px 20px;
}

ul.accordion-wrapper > li.active > p:first-of-type::after {
  content: "";
  position: absolute;
  top: calc(100% - 10px);
  left: 40px;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border: 10px solid var(--mono-shade3);
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

ul.accordion-wrapper > li > .accordion-content-container {
  display: block;
  margin: 0 20px 20px 20px;
  padding: 0 15px 20px;
  background: var(--mono-shade3);
  cursor: default;
  overflow: hidden;
}

ul.accordion-wrapper > li:not(:first-of-type) {
  border-top: 1px solid whitesmoke;
}

.accordion {
  background: var(--mono-shade3);
}

.accordion.active {
  background: var(--mono-tint2);
  border-left: 3px solid var(--mono-base);
}

.accordion .accordion-content-container {
  display: none !important;
}

.accordion.active .accordion-content-container {
  display: block !important;
}


.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
  float:right;
  margin-top: 1.25%;
}

.right {
  border-color: var(--base-color)
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}