:root {
  --color-00000040 : #00000040;
  --color-superscript-widget : #fff;
  --color-339 : #339;

  --color-007acc : #007acc;
  --color-111 : #111;
  --color-1110 : #1110;
  --color-121212 : #121212;
  --color-155724 : #155724;
  --color-1a6 : #1a6;
  --color-1c1 : #1c1;
  --color-1e1e1e : #1e1e1e;
  --color-1e90ff : #1e90ff;
  --color-212121 : #212121;
  --color-222 : #222;
  --color-228822 : #228822;
  --color-231 : #231;
  --color-282828 : #282828;
  --color-2c2f2f : #2c2f2f;
  --color-2fa32f : #2fa32f;
  --color-333 : #333;
  --color-358039 : #358039;
  --color-3a3a3a : #3a3a3a;
  --color-444 : #444;
  --color-11d120 : #11d120;
  --color-45a049 : #45a049;
  --color-45f049 : #45f049;
  --color-555 : #555;
  --color-764 : #764;
  --color-909090 : #909090;
  --color-a82 : #a82;
  --color-b0b0b0 : #b0b0b0;
  --color-c4ddca : #c4ddca;
  --color-c9f : #c9f;
  --color-ccc : #ccc;
  --color-d4edda : #d4edda;
  --color-ddc : #ddc;
  --color-e88 : #e88;
  --color-f0f0f0 : #f0f0f0;
  --color-f88 : #f88;
  --color-fd2 : #fd2;
  --color-fdd : #fdd;
  --color-ffd : #0fd;
  --color-ffa500: #ffa500;
}

[data-theme="light"] { /* */
/* :root { /**/
  --color-00000040 : #ffffff40;
  --color-superscript-widget : #000;
  --color-339 : #9696d3;

/* main background colors */
  --color-111 : #ccc;
  --color-222 : #ddd;
  --color-333 : #ccc;
  --color-444 : #bbb;
/* main text */
  --color-ddc : #340;
/* emphasised text */  
  --color-f88 : #f33;
/* button fill and box border*/
  --color-555 : #aaa;

/* high-contrast line around boxes */  
  --color-ccc : #111;

/* turnbuckle h3s */
  --color-45a049 : #45a049;
  --color-45f049 : #258029;
/* h1 background */
  --color-231 : #7f5930;

/* chevron background and text and highlight */
  --color-155724 : #3dc35c;
  --color-d4edda : #387346;
  --color-c4ddca : #1f3f0f;
/* 'example' text (code) */
  --color-ffa500: #ae5b13;


  --color-007acc : #007acc; 
  --color-1110 : #1110;
  --color-121212 : #121212;
  --color-1a6 : #1a6;
  --color-1c1 : #1c1;
  --color-1e1e1e : #1e1e1e;
  --color-1e90ff : #1e90ff;
  --color-212121 : #212121;
  --color-228822 : #228822;
  --color-2c2f2f : #2c2f2f;
  --color-2fa32f : #2fa32f;
  --color-358039 : #358039;
  --color-3a3a3a : #3a3a3a;
  --color-764 : #764;
  --color-909090 : #909090;
  --color-a82 : #a82;
  --color-b0b0b0 : #b0b0b0;
  --color-c9f : #c9f;
  --color-e88 : #e88;
  --color-f0f0f0 : #f0f0f0;
  --color-fd2 : #fd2;
  --color-fdd : #fdd;
  --color-ffd : #ffd;
}



/* Outer container (frame) */
[id^='frame'] {
  overflow: hidden;
  position: relative;
  font-family: monospace; /* Fixed-width font */
  font-size: 14px;
  border: 1px solid var(--color-555);
  line-height: 1em; /* Ensures each row of characters is the same height */
}

/* Draggable content */
[id^='content'] {
  font-family: monospace; /* Fixed width font */
  position: absolute;
  text-wrap: nowrap;
  white-space: pre;
  top: 0;
  left: 0;
  cursor: grab;
  user-select: none; /* Prevent text selection */
}

/* highlight in KWIC */
.yell {
  background-color: var(--color-764);
  color: var(--color-fd2);
}


.boxed {
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  border: 1px solid var(--color-555);
  font-family: monospace; /* Fixed-width font */
  font-size: 14px;
  line-height: 1em; /* Ensures each row of characters is the same height */
}

.boxed.copying{
  background-color: var(--color-555);
}

ul {
  margin : 0 0 0 0
}

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: var(--color-222);
  color:var(--color-ddc);
}


html {
  scroll-behavior: smooth;
}
h1{
  font-family: Tahoma, sans-serif;
  font-weight:100;
  background:var(--color-231);
  text-align:right;
  margin-top:0;
  margin-bottom:0;
  color:var(--color-1a6);
}
h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  margin-top:0;
  margin-bottom:0;
  color:var(--color-45a049);
}

strong, b {
  color:var(--color-11d120);
}
em {
  color:var(--color-f88);
}
pre {
  background: var(--color-2c2f2f);
  color:var(--color-1c1);
  white-space: pre-wrap;
  word-wrap: break-word;
}

img.roundel, img.round {
  border-radius: 36px;
  border: 1px dashed var(--color-ccc);
/*  border-style: none none none dashed;*/
  width: calc(100% - 12px);
  transition: border 0.1s, padding 0.1s, margin 0.1s;
  margin: 4px;
}


/* img.roundel, img.round {
  border-radius: 50%;
  width: calc(100% - 4px);
  border: none; 
  transition: border 0.1s;

  box-shadow: 0 0 0 4px var(--color-222), 
              0 0 0 8px transparent;
  background: radial-gradient(circle, var(--color-222) 2px, transparent 4px);
  background-size: 8px 8px; 
  background-position: center; 
}*/

img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

img.banner {
  margin: -10px -10px 0px -10px;
  width:calc(100% + 20px);
}

img.roundel_red {
  border-radius: 36px;
  border: 2px solid var(--color-222);
  width: calc(100% - 4px);
  transition: border 0.1s;
  filter: sepia(0) saturate(1.5) hue-rotate(40deg);
}

img.banner_red {
  margin: -10px -10px 0px -10px;
  width:calc(100% + 20px);
  filter: sepia(0) saturate(1.5) hue-rotate(40deg);
}

img.roundel:hover {
  border-radius: 18px;
  border: 5px dotted var(--color-ccc);
  /*border-style: none none none dashed;*/
  padding: 0px;
  margin:0px;
}

img.roundel_red:hover  {
  border-radius: 18px;
  border: 5px dotted var(--color-ccc);
}

img.selected {
  border: 5px dashed var(--color-ccc);
  padding: 0px;
  margin:0px;
}

img.selected:hover {
  border: 5px dashed var(--color-ccc);
  padding: 0px;
  margin:0px;
}

/* Safari-specific styles */
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--color-333);
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-111);
}

.container {
  display: flex;
  height: calc(100vh - 1em);
  user-select: none;
}
.column {
  flex-basis: 33.33%;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--color-555);
  transition: flex-basis 0.1s;
  scrollbar-color: var(--color-111) var(--color-444);
  scrollbar-width: thin;  
}

.resizer {
  width: 5px;
  cursor: ew-resize;
  border-left: 1px solid var(--color-444);
  border-right: 1px solid var(--color-444);
}
#col1 {
  background: var(--color-333);
  flex-basis: 90px;
}
#col2 {
  background: var(--color-333);
  min-width:100px;
  flex-basis: 175px;
}
#col3 {
  background: var(--color-333);
  flex-grow: 1;
}

#col2 h3, #col1 h3,{
  color: var(--color-fdd);
}

#col2 h2:hover,#col2 h3:hover,#col2 h4:hover,#col2 h5:hover,#col2 h6:hover,
#col1 h2:hover,#col1 h3:hover,#col1 h4:hover,#col1 h5:hover,#col1 h6:hover
{
  color:var(--color-45f049);
  background: var(--color-444);
}

h3:before,h4:before,h5:before{
  content: "▼";
  font-size:16px;
  padding-right: 3px;
  padding-left:0px;
  display: inline-block; /* Necessary for transform to work */
  transition: transform 0.6s ease; 
}

h5[data-expanded="false"]:before{
  transform: rotate(-90deg);
}

/* use a large max-height, not none, to get animation */
span.chunk {
  display: block; /* Or inline-block if necessary */
  overflow: hidden; /* Ensures content is clipped when height is reduced */
  max-height: 4000000px; /* Default to expanded height */
  opacity: 1;
  visibility: visible;
}

/* The transitions are taken from the state we are going to */
/* there are delays in the transitions so that they happen 'in the right order'*/
h5[data-expanded="false"] + span.chunk {
  max-height: 0; /* Collapse the element */
  opacity: 0; /* Fade out */
  visibility: hidden; /* Fully hide */
  transition: max-height 0s 0.3s, opacity 0.5s, visibility 0s 0.3s; 
}

h5[data-expanded="true"] + span.chunk {
  visibility: visible; /* Fully show */
  opacity: 1; /* Fully visible */
  max-height: 4000000px; /* Fully expand */
  transition: max-height 0s, opacity 0.5s, visibility 0s; 
}

#col2 ul {
  list-style: none;
  margin-left: 0;
  padding-left:18px;
}

#col2 li {
  padding-left: 3px;
  text-indent: -1em;
}

ul:hover {
  background: var(--color-444);
}

li.channel:before {
  content: "#";
  font-size: 130%;
  padding-right: 5px;
}
li.diamond_blue:before {
  content: "🔹";
  font-size: 100%;
  padding-right: 5px;
}
li.diamond_orange:before {
  content: "🔸";
  font-size: 100%;
  padding-right: 5px;
}
li.diamond_blue,li.diamond_orange,li.channel{
  list-style: none;
}
li.diamond_blue a,li.diamond_orange a{
  color:inherit;
  text-decoration:inherit;
}

.kwic-launch {
  cursor:pointer;
  -webkit-user-select: none; /* Prevent text selection in Safari */
  user-select: none;   
}

.container2 {
    text-align: left;
    padding-top: 5px;
}

.button2 {
    padding: 2px 10px;
    font-size: 16px;
    min-width: 150px;
    margin: 3px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: var(--color-555);
    color: var(--color-ddc);
    text-align:left;
}

.button2:hover {
    background-color: var(--color-358039);
}

/* Overlay styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    z-index:10;
}



.esc-text {
    position: absolute;
    top: 15px; /* Below the button */
    right: 15px;
    font-size: 12px;
    color: var(--color-superscript-widget);

}

.std-btn {
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: var(--color-555);
    color: white;
    border: none;
    border-radius: 5px;
}

.std-btn:hover {
    background-color: var(--color-339);
}

.close-btn {
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: var(--color-228822);
    color: white;
    border: none;
    border-radius: 5px;
}

.close-btn:hover {
    background-color: var(--color-2fa32f);
}



/* Top-right section for X and ESC */
.top-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Content area */
.content-area {
    flex: 1;
    display: flex;
}

#frame1 {
    display: flex;
    flex: 1;
    margin-right: 5px;
    padding: 10px;
}

#frame2 {
}


/* Bottom-right section for buttons */
.bottom-right {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 10px;
    margin-top: 10px;
}

.bottom-right button {
/*    flex: 1 1 auto; /* Optional: allow buttons to shrink/grow evenly */
/*    min-width: 100px; /* Optional: set a minimum width to avoid overly small buttons */
}

/* Circular close button */
.circular-close-btn {
    position: absolute;
    top: -20px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: var(--color-00000040);
    color: var(--color-superscript-widget);
    border: 2px solid var(--color-superscript-widget);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circular-close-btn:hover {
    background-color: var(--color-339);
}


.breadcrumb {
    display: inline-flex;
    align-items: center;
    margin:5px 0px 5px 0px;
    gap: 0; /* No gap; overlap is handled by chevrons */
}

.breadcrumb span {
    position: relative;
    display: inline-block;
    padding: 3px 10px 2px 12px; /* Default padding for inner chevrons */
    background-color: var(--color-d4edda);
    color: var(--color-155724);
    font-size: 14px;
    font-weight: bold;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
    margin-left: -6px; /* Overlap chevron ends */
}

/* First breadcrumb: flat left side, chevron on right */
.breadcrumb span:first-child {
    padding: 3px 12px 2px 5px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    margin-left: 0px;
}

.breadcrumb span:hover {
    background-color: var(--color-c4ddca);
}

.search-input {
    width: 200px;
    min-width: 200px;
    text-align: left;
    padding: 3px 10px 3px 10px;
    margin-right:3px;
    border: 1px solid var(--color-555);
    border-radius: 0px;
    transition: width 0.3s ease;
    font-family: monospace; /* Fixed width font */
    outline: none;
    background-color: var(--color-764);
    color: var(--color-fd2);    
}

.search-input::placeholder {
  color: var(--color-a82);
}

.cfg {
    font-family: Arial, sans-serif;
    background-color: var(--color-121212);
    color: var(--color-f0f0f0);
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;    
    width: 350px;
    padding: 20px;
    background-color: var(--color-1e1e1e);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;    
}

.cfg h2 {
    text-align: center;
    color: var(--color-b0b0b0);
    margin-bottom: 15px;
}

.slider-group, .checkbox-group, .mode-group {
    margin-bottom: 15px;
}

.slider-group label, .checkbox-group label, .mode-group label {
    font-size: 14px;
    color: var(--color-b0b0b0);
    display: block;
    margin-bottom: 5px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--color-3a3a3a);
    outline: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background-color: var(--color-007acc);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.slider:hover::-webkit-slider-thumb {
    background-color: var(--color-1e90ff);
}

.checkbox-group input[type="checkbox"] {
    accent-color: var(--color-007acc);
    cursor: pointer;
    margin-right: 5px;
}

.mode-group .mode-button {
    background-color: var(--color-3a3a3a);
    color: var(--color-b0b0b0);
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    margin-right: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mode-group .mode-button:hover {
    background-color: var(--color-007acc);
}

.dropdown {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-3a3a3a);
    border-radius: 5px;
    background-color: var(--color-3a3a3a);
    color: var(--color-b0b0b0);
    cursor: pointer;
}

.extra-controls {
    margin-top: 15px;
    text-align: center;
}

.extra-controls button {
    background-color: var(--color-007acc);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.extra-controls button:hover {
    background-color: var(--color-1e90ff);
}



.cfg2 {
    font-family: Arial, sans-serif;
    background-color: var(--color-121212);
    color: var(--color-f0f0f0);
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;    
    width: 350px;
    padding: 20px;
    background-color: var(--color-1e1e1e);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;    
}

.cfg2 .container2 {
    position: relative;
    margin: 0px 0;
    padding: 5px;
    border-radius: 5px;
    /*color : white*/
}
.button-container {
    position: absolute;
    top: 5px;
    right: 5px;
}
.cfg2 .con-dark {
    background-color : var(--color-212121);
    border: 1px solid var(--color-121212);
}
.cfg2 .con-light {
    background-color : var(--color-121212);
    border: 1px solid var(--color-212121);
}
.cfg2 label {
    min-width:80px;
    display:inline-block;
    text-align:right;
    padding-right:4px;
    color: var(--color-b0b0b0);
    font-size: 14px;
}
.cfg2 input[type=text] {
    border: 1px solid var(--color-555);
    border-radius: 2px;
    background-color: inherit;
    font-size: 12px;
    color: var(--color-909090);
    /*background-color : var(--color-222);*/
    /* color:var(--color-ffd); */
}


.button-container button, .cfg2 .container2 button {
    border: 1px solid var(--color-1110);
    border-radius: 2px;
    background-color:inherit; 
    color: var(--color-b0b0b0);
    /* color:var(--color-ffd); */
}


.button-container button:hover, .cfg2 .container2 button:hover {
    border: 1px solid var(--color-555);
    background-color:var(--color-333); 
    color: var(--color-b0b0b0);
    /* color:var(--color-ffd); */
}

.example {
  color: var(--color-ffa500);
  font-family: monospace; /* Fixed-width font */
}


.desktop-only {
  display: block; /* or other desired display value */
}
/* Popup window styles */
.popup2 {
  display: flex;
  flex-direction: column;
  position: relative; /* To position the close button */
  background-color:var(--color-222);
  width: 80vw; /* Set width to 90% of viewport width */
  height: 80%;
  max-width: 90%; /* Ensure no other restrictions */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}


#excerpt {
  height:10em;
}

@media (max-height: 600px){
  #excerpt {
    height:6em;
  }

  .desktop-only {
    display: none;
  }
  .popup2 {
    display: flex;
    flex-direction: column;
    position: relative; /* To position the close button */
    background-color:var(--color-222);
    width: 95vw; /* Set width to 90% of viewport width */
    height: 95%;
    max-width: 98%; /* Ensure no other restrictions */
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 500px) {
  .desktop-only {
    display: none;
  }
  .popup2 {
    display: flex;
    flex-direction: column;
    position: relative; /* To position the close button */
    background-color:var(--color-222);
    width: 95vw; /* Set width to 90% of viewport width */
    height: 95%;
    max-width: 98%; /* Ensure no other restrictions */
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  }
}

/* Have yet to systenetise the colours on these */

.drop-zone {
    border: 2px dashed #05a;
    padding: 20px;
    margin: 20px auto;
    width: calc(100% - 80px);
    cursor: pointer;
    color:#888;
}
.drop-zone.hover {
    background-color: #223;
}
.drop-zone.hov2 {
    background-color: #223;
}
.drop-zone b{
  color:#aaa;
}


blockquote {
  background: var(--color-444);
  border-left: 9px solid;
  border-right: 0px solid;
  border-color: var(--color-555);
  margin: 0em 0em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding: 0.5em 10px;
}

blockquote.right {
  border-left: 0px solid;
  border-right: 9px solid;
  border-color: #c3b18e;
  text-align: left;
}

blockquote p {
  display: inline-block;
}

blockquote {
  margin-bottom: 0em;
}

blockquote + hr {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.raw {
  white-space: pre-wrap ;
  /*display: block;*/
  /*unicode-bidi: embed;*/
  font-family: monospace;  
  background-color: var(--color-444);
  font-size:  -2;
  padding : 8px;
  border-radius: 3px; 
  border-color: var(--color-ccc);
  border-style: solid;
  border-width: 1px;
}

.raw p {
  margin-top:  -20px;
  margin-bottom:  0px;
}

.thumbnail-container{
  width:100px;
  margin-right:5px;
  float: left;
  display:inline-block;
  overflow: hidden;
  transition: width 1s, margin-right 1s, height 1s;
}

[data-thumbnail-show="hide"] .thumbnail-container{
  width:0px;
  height:0px;
  margin-right:0px;
  float: left;
  padding-right:0;
  display:inline-block;
  overflow: hidden;
  transition: width 1s, margin-right 1s, height 1s;
}

.file-thumbnail{
  max-width:100px;
  max-height:100px;
}

.slider-yn-container {
  position: relative;
  display:inline-block;
  top:5px;
  width: 30px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  box-shadow: inset 0 4px 7px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index:50;
}

.slider-yn-container .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to right, red 50%, green 50%);*/
  background: linear-gradient(to right, var(--color-red-slider) , var(--color-red-slider)  48%, var(--color-green-slider)  52%, var(--color-green-slider) );
  background-size: 200% 100%;
  background-position: left;
  transition: background-position 0.3s;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}

.slider-yn-container .slider-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -4px 6px rgba(0, 0, 0, 0.5);
  cursor: grab;
}

.slider-yn-container .slider-thumb:active {
  cursor: grabbing;
}  

.fullscreen {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:25;
  pointer-events:none;
}  

/* General table styling */
.md_table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* No space between cells */
    font-family: Arial, sans-serif; /* Clean font */
    font-size: 14px; /* Readable text size */
    color: #6b4226;
}

/* Header styling */
.md_table th {
    background-color: #6b4226; /* Earthy brown for header */
    color: #dfccb6;
    padding: 10px;
    text-align: left; /* Align text to the left */
    border-bottom: 2px solid #8b5a2b; /* Slightly darker border */
}

/* Cell styling */
.md_table td {
    padding: 8px; /* Spacing inside cells */
    border-bottom: 1px solid #ddd; /* Light bottom border */
}

/* Alternating row background colors */
.md_table tr:nth-child(odd) {
    background-color: #f4e1d2; /* Light beige */
}

.md_table tr:nth-child(even) {
    background-color: #dfccb6; /* Slightly darker beige */
}

/* Hover effect for rows */
.md_table tr:hover {
    background-color: #d1b497; /* Highlight on hover */
}

/* Optional: Add spacing around the table */
.md_table-container {
    padding: 20px;
    background-color: #f7f3ee; /* Subtle background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
}

a:link {
    color: #77f;; /* Set the color for links that haven't been clicked yet */
}

a:visited {
    color: #c7f; /* Set the color for links that have already been clicked */
}

a:hover {
    color: #f4a; /* Set the color for links that have already been clicked */
}

.chunk {
    line-height: 1.2; /* Adjust this value as needed */
}
.chunk sup,
.chunk sub {
    vertical-align: baseline;
    position: relative;
    font-size: smaller; /* Adjust size as needed */
}
.chunk sup {
    top: -0.4em; /* Adjust positioning as needed */
}
.chunk sub {
    bottom: -0.4em; /* Adjust positioning as needed */
}

.container3 { 
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card3 { 
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 200px;
  text-align: center;
  background-color:#1b1b1b;
  color:#bbb;
}