:root {
    --light: #f8f8f8;
    --grey1: #a1a1a1;
    --grey2: #585858;
    --dark:  #191919;
    --light_highlight: darkgreen;
    --dark_highlight:  darkseagreen;

    --light_red: #FEADAD;
    --dark_red:  #AB1616;
    --light_blue: #A7CEFA;
    --dark_blue:  #004FA8;
}

body {
    font-family: sans-serif;
    font-size: 1.2em;
    max-width: 90%;
    margin: 0 auto;
    padding: 15px 0 80px 0;
    color: var(--dark);
    background-color: var(--light);
}

@media screen and (max-width: 768px) {
    body {
        font-size: 1em;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        color: var(--light);
        background-color: var(--dark);
    }
}

body a {
    color: var(--light_highlight);
    text-decoration: underline;
}

body a:hover {
    color: var(--light);
    background-color: var(--light_highlight);
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    body a {
        color: var(--dark_highlight);
    }

    body a:hover {
        color: var(--dark);
        background-color: var(--dark_highlight);
    }
}

/***** These bits make sure that links inside code (e.g "[`text`](...)") use
 code text formatting, but have the proper colors. *****/

/* This particular chunk seems not needed? */
/* a code { */
/*     color: var(--light_hightlight); */
/*     text-decoration: none; */
/* } */

a code:not(pre code) {
    color: var(--light_highlight);
}

a:hover code {
    color: var(--light);
    background-color: var(--light_highlight);
}

@media (prefers-color-scheme: dark) {
    a code:not(pre code) {
        color: var(--dark_highlight);
    }

    a:hover code {
        color: var(--dark);
        background-color: var(--dark_highlight);
    }
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 125%;
}

h3 {
    font-size: 125%;
    text-decoration: underline;
}

h4 {
    font-size: 110%;
    text-decoration: underline;
}

.centered {
    width: 50%; /* Adjust the width as needed */
    text-align: center;
    margin: 0 auto;
}

/**********************************************************************
Image specifications
**********************************************************************/

.image_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

@media screen and (max-width: 768px) {
    .image_center {
        width: 90% !important;
    }
}

.inline-image {
    vertical-align: middle;
    height: 1.5em;
}

@media (prefers-color-scheme: dark) {
    .image_invert {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .image_invert:hover {
        -webkit-filter: invert(0);
        filter: invert(0);
    }

}

.image_avatar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
}

@media screen and (max-width: 768px) {
    .image_avatar {
        width: 150px !important;
    }
}


/*********************************************************************
Special p's - warnings, notes and license
**********************************************************************/

p#license {
    font-size: .66em;
}

@media screen and (max-width: 768px) {
    p#license {
        font-size: 1em;
    }
}

p.warning
{
    background-color: var(--light_red);
    border-left: solid 10px var(--dark_red);
    line-height: 18px;
    overflow: hidden;
    padding: 10px 60px;
}

p.warning::before {
    content: "Warning: ";
    font-weight: bold;
}

@media (prefers-color-scheme: dark) {
    p.warning {
    background-color: var(--dark_red);
    border-left: solid 10px var(--light_red);
    }
}

p.note
{
    background-color: var(--light_blue);
    border-left: solid 10px var(--dark_blue);
    line-height: 18px;
    overflow: hidden;
    padding: 10px 60px;
}

p.note::before {
    content: "Note: ";
    font-weight: bold;
}

@media (prefers-color-scheme: dark) {
    p.note {
        background-color: var(--dark_blue);
        border-left: solid 10px var(--light_blue);
    }
}

/**********************************************************************
Code chunk stuff
**********************************************************************/

pre {
    /* font-size: 14px; */
    margin-left: 2%;
    margin-right: 2%;
    padding: 10px;
    background-color: var(--grey1);
    overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
    pre {
        background-color: var(--grey2);
        color: var(--light);
    }
}

pre[data-lang]::before {
    content: " " attr(data-lang);
    display: block;
    margin: -10px; /* reset margin to take up whole space */
    margin-bottom: 10px; /* Don't overlap text */
    height: 1.5em;
    line-height: 1.5em;
    background-color: var(--dark);
    color: var(--light);
}

@media (prefers-color-scheme: dark) {
    pre[data-lang]::before {
        background-color: var(--light);
        color: var(--dark);
    }
}

/* Inline code */
code:not(pre code) {
    color: var(--grey2);
}

@media (prefers-color-scheme: dark) {
    code:not(pre code) {
        color: var(--grey1);
    }
}


/**********************************************************************
Header grid
**********************************************************************/

.header-box {
    display: grid;
    grid-template-columns: minmax(400px, 700px) 300px;
}

@media screen and (max-width: 768px) {
    .header-box {
        grid-template-columns: 1fr;
    }
}


/**********************************************************************
Grid for materials
**********************************************************************/

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, auto));
    column-gap: 25px;
    row-gap: 25px;
}

.content-grid > .box {
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
    max-height: 500px;
    overflow-y: auto;
    grid-row: span 2;
    padding: 5px;
}

@media (prefers-color-scheme: dark) {
    .content-grid > .box {
        box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.3);
    }
}

.nested-boxes {
    display: grid;
    grid-template-rows: 1fr 1fr; /* Two equal rows */
    gap: 10px; /* Gap between the two boxes */
    grid-row: span 2; /* Span across 2 rows to match other large boxes */
    background-color: inherit; /* Inherit background color */
    padding: 0; /* Remove padding */
    row-gap: 25px;
}

.content-grid > .nested-boxes > div {
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
    padding: 5px;
    overflow-y: auto;
}


@media (prefers-color-scheme: dark) {
    .content-grid > .nested-boxes > div {
        box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.3);
    }
}

/**********************************************************************
Subgroup for split boxes
**********************************************************************/

.split-content-div {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(350px, auto));
    column-gap: 25px;
    row-gap: 25px;
}


/**********************************************************************
Index search
**********************************************************************/

.highlight {
    background-color: yellow;
}

@media (prefers-color-scheme: dark) {
    .highlight {
        color: var(--dark)
    }
}

#filterInput, #resetButton {
    font-size: 1em;
}

/**********************************************************************
Blockquotes
**********************************************************************/

blockquote {
  font-family:serif;
  font-style:italic;
  padding:1%;
  margin-inline:0px;
  border-left:8px solid var(--light_highlight) ;
  line-height:1;
  position: relative;
}

@media (prefers-color-scheme: dark) {
    blockquote {
        border-left:8px solid var(--dark_highlight) ;
    }
}