@charset "UTF-8";

/*
Styles for rendered markdown in the .markdown-content container
stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
*/


html .markdown-content,
html .markdown-content * {
    font-family: var(--content-font-family); 
    justify.markdown-content: left;
    color: var(--grey-9);
}

.markdown-content {
}

.markdown-content p {
    margin: 1rem 0 0 0;
    line-height: 1.6; 
}

.markdown-content > :first-child {
    margin: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin: 2rem 0 1rem 0;
    //background-color: red;
    font-family: var(--page-font-family); 
}

.markdown-content h1 { font-size: var(--h1-size); }
.markdown-content h2 { font-size: calc(var(--h1-size) / pow(var(--scale-ratio), 1)); }
.markdown-content h3 { font-size: calc(var(--h1-size) / pow(var(--scale-ratio), 2)); }
.markdown-content h4 { font-size: calc(var(--h1-size) / pow(var(--scale-ratio), 3)); }
.markdown-content h5 { font-size: calc(var(--h1-size) / pow(var(--scale-ratio), 4)); }
.markdown-content h6 { font-size: calc(var(--h1-size) / pow(var(--scale-ratio), 5)); }




//.markdown-content pre {
//    margin: 0;
//}

.markdown-content .code-wrapper {
    overflow-x: scroll;
    margin: 2rem 0 1rem 0;
}

.markdown-content .codehilite {
    //padding: 0.25em 0em 0.25em 0em;
    border: 1px solid grey;
    border-radius: var(--border-radius); 
    border-color: var(--border-color);
    //background-color: var(--grey-0);
    min-width: max-content;
}

.markdown-content .codehilite * {
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    //letter-spacing: normal !important;  /* Fixed typo */
    //word-spacing: normal !important;    /* Fixed typo */
    font-size: 0.9rem;         /* Fixed typo */
    color: #f8f8f2;             /* Monokai light text color */
}


.markdown-content .codehilite pre {
    margin-left: 0;
    text-indent: 0;
    padding: 1.25em 1em 1.25em 1em;
}

//.markdown-content .codehilite pre::-webkit-scrollbar-thumb {
//    //background-color: transparent;
//    background-color: var(--scrollbar-color);
//}
//
//.markdown-content .codehilite pre::-webkit-scrollbar-thumb:hover {
//    background-color: var(--scrollbar-color);
//}



//.codehilite pre {
//    //white-space: pre-line;
//    //white-space: pre;
//}


//.codehilite pre {
//    text-indent: 0;
//    white-space: pre;
//    background-color: pink;
//}
//
//.codehilite pre code {
//    display: block;
//    white-space: pre;
//}



//.codehilite pre {
//  line-height: 1.2;
//  margin: 0;
//  padding: 15px;
//}

//.markdown-content .codehilite pre {
//  margin-bottom: 0;
//  padding-bottom: 0;
//}



.markdown-content table {
  width: 100%;
  min-width: 100%;
  //width: max.markdown-content;
  border-collapse: separate;
  border-spacing: 0;
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--border-radius); 
  overflow: hidden;
  table-layout: auto;
  //overflow-x: scroll;
  //min-width: 0;
}


.markdown-content .table-wrapper {
    width: 100%; 
    //background-color: pink;
    overflow-x: scroll; 
    max-width: 100%;
    min-width: 0;  /* Important for grid/flex parents */
    margin: 3rem 0 3rem 0;
}

.markdown-content .img-wrapper {
    width: 100%; 
    //background-color: pink;
    overflow-x: scroll; 
    max-width: 100%;
    min-width: 0;  /* Important for grid/flex parents */
    margin: 3rem 0 3rem 0;
}

.markdown-content th,
.markdown-content td {
  padding: 0.75rem;
  border-color: var(--border-color);
  border-width: 0 var(--border-width) var(--border-width) 0;
  text-align: left;
  //min-width: 7.5rem;  /* Or whatever makes sense */
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;  /* Allow wrapping */
}


/* Remove right border from last column */
.markdown-content th:last-child,
.markdown-content td:last-child {
  border-right: none;
}

/* Remove bottom border from last row */
.markdown-content tr:last-child td {
  border-bottom: none;
}

.markdown-content th {
    background-color: var(--grey-0);
    font-weight: bold;
}





.markdown-content img {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    //margin: 3rem auto 3rem auto;
    overflow-x: scroll;
    min-width: 0;
  //margin: 0 auto;
  //border: 1px solid grey;
  //border-radius: var(--border-radius); 
  //padding: ;
}

.grid-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    min-width: 100%;
    //width: max.markdown-content;
    border-collapse: separate;
    border-spacing: 0;
    border-width: var(--border-width);
    border-style: solid;
    border-color: var(--border-color);
    border-radius: var(--border-radius); 
    overflow: hidden;
    //overflow-x: scroll;
    //min-width: 0;
}

.grid-table > .grid-header,
.grid-table > .grid-cell {
    display: grid;
    padding: 0.75rem;
    border-color: var(--border-color);
    border-width: 0 var(--border-width) var(--border-width) 0;
    text-align: left;
    //min-width: 7.5rem;  /* Or whatever makes sense */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;  /* Allow wrapping */
}