/*******************/
/*** Base styles ***/
/*******************/

:root {
    color-scheme: dark;
    --background-color: #000000;
    --text-color: #eeeeee;
    --link-color: rgb(150,250,250);
    --link-hover-color: rgb(130,230,230);
    --button-bg-color: rgb(30,130,130);
    --button-bg-hover-color: rgb(10,110,110);
    --button-text-color: #ffffff;
    --button-disabled-bg-color: #444444;
    --button-disabled-text-color: #bbbbbb;
    --code-bg-color: #222222;
    --code-text-color: #dddddd;
    --details-bg-color: #111111;
    --details-border-color: #333333;
    --blockquote-border-color: #444444;
    --blockquote-text-color: #aaaaaa;
    --figure-border-color: #333333;
    --figcaption-text-color: #cccccc;
    --dialog-bg-color: #111111;
    --dialog-text-color: #eeeeee;
    --dialog-box-shadow-color: rgba(0,0,0,0.5);
    --dialog-backdrop-color: rgba(0, 0, 0, 0.7);
    --hr-bg-color: #333333;
    --site-title-color: #eeeeee;
    --fieldset-border-color: #333333;
    --input-bg-color: #11191f;
    --input-text-color: #eeeeee;
    --input-border-color: #374956;
    --input-placeholder-color: #888888;
    --input-helper-text-color: #cccccc;
    --input-disabled-bg-color: #333333;
    --input-disabled-text-color: #666666;
    --input-disabled-border-color: #444444;
    --table-cell-border-color: #444444;
    --table-header-bg-color: #222222;
    --table-footer-bg-color: #222222;
    --alert-red-border-color: #ff5555;
    --alert-red-bg-color: #330000;
    --alert-red-text-color: #ffaaaa;
    --alert-yellow-border-color: #ffdd55;
    --alert-yellow-bg-color: #332a00;
    --alert-yellow-text-color: #ffecaa;
    --alert-green-border-color: #55ff55;
    --alert-green-bg-color: #003300;
    --alert-green-text-color: #aaffaa;
}

[data-theme=light] {
    color-scheme: light;
    --background-color: #ffffff;
    --text-color: #111111;
    --link-color: rgb(0,100,100);
    --link-hover-color: rgb(0,80,80);
    --button-bg-color: rgb(0,120,120);
    --button-bg-hover-color:  rgb(0,100,100);
    --button-text-color: #ffffff;
    --button-disabled-bg-color: #cccccc;
    --button-disabled-text-color: #666666;
    --code-bg-color: #f4f4f4;
    --code-text-color: #222222;
    --details-bg-color: #f9f9f9;
    --details-border-color: #cccccc;
    --blockquote-border-color: #cccccc;
    --blockquote-text-color: #555555;
    --figure-border-color: #cccccc;
    --figcaption-text-color: #555555;
    --dialog-bg-color: #ffffff;
    --dialog-text-color: #111111;
    --dialog-box-shadow-color: rgba(0,0,0,0.2);
    --dialog-backdrop-color: rgba(200, 200, 200, 0.7);
    --hr-bg-color: #cccccc;
    --site-title-color: #222222;
    --fieldset-border-color: #cccccc;
    --input-bg-color: #f8fafb;
    --input-text-color: #111111;
    --input-border-color: #999999;
    --input-placeholder-color: #777777;
    --input-helper-text-color: #555555;
    --input-disabled-bg-color: #eeeeee;
    --input-disabled-text-color: #999999;
    --input-disabled-border-color: #cccccc;
    --table-cell-border-color: #cccccc;
    --table-header-bg-color: #f4f4f4;
    --table-footer-bg-color: #f4f4f4;
    --alert-red-border-color: #ff5555;
    --alert-red-bg-color: #ffdddd;
    --alert-red-text-color: #660000;
    --alert-yellow-border-color: #ffdd55;
    --alert-yellow-bg-color: #fffae6;
    --alert-yellow-text-color: #665500;
    --alert-green-border-color: #55ff55;
    --alert-green-bg-color: #ddffdd;
    --alert-green-text-color: #006600;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background: var(--background-color);
    color: var(--text-color);
    padding: 20px 30px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    line-height: 1.75;
    margin: 0px;
    overflow-wrap: break-word;
}

@media (max-width: 750px) {
    body {
        padding: 20px 18px;
    }
}

body > main, body > header, body > footer {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2px;
    padding-right: 2px;
}

main {
    clear: both;
    margin-top: 50px;
    display: block;
    overflow: auto;
}

p {
    margin-bottom: 25px;
}

main ol li, main ul li {
    margin-bottom: 7px;
}

main ul, main ol {
    padding-left: 30px;
}

aside {
    margin-top: 15px;
    margin-bottom: 15px;
    float: left;
    width: 300px;
    margin-right: 25px;
    clear: both;
    padding-left: 2px;
    padding-right: 2px;
}

aside:has(> details:not([open])) {
    width: 100%; 
}

aside:has(> details:not([open])) ~ main {
    clear: both;
}

aside summary + * {
    margin-top: 20px;
}

aside ~ main {
    clear: none;
}

aside ul, aside ol {
    font-size: 16px;
    padding-left: 25px;
    font-weight: 500;
}

aside nav li a {
    text-decoration: none;
}

ul ul, ol ol, ul ol, ol ul {
    margin-top: 7px;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

h1 {
    font-size: 40px;
    line-height: 1.4;
}

h2 {
    font-size: 34px;
    line-height: 1.5;
}

h3 {
    font-size: 28px;
    line-height: 1.6;
}

h4 {
    font-size: 23px;
}

h5 {
    font-size: 19px;
}

h6 {
    font-size: 16px;
}

main > h1 {
    margin-top: 15px;
}

button {
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    display: block;
}

button:hover {
    background: var(--button-bg-hover-color);
}

button:disabled {
    background: var(--button-disabled-bg-color);
    cursor: not-allowed;
    color: var(--button-disabled-text-color);
}

button ~ button {
    margin-top: 10px;
}

code {
    background: var(--code-bg-color);
    color: var(--code-text-color);
    font-size: 17px;
    padding: 3px;
    border-radius: 3px;
}

pre {
    background: var(--code-bg-color);
    color: var(--code-text-color);
    padding: 15px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

summary {
    cursor: pointer;
    user-select: none;
}

details:not(header > details) {
    background: var(--details-bg-color);
    padding: 15px;
    border: 1px solid var(--details-border-color);
    margin-top: 15px;
    margin-bottom: 15px;
}

blockquote {
    border-left: 4px solid var(--blockquote-border-color);
    margin-left: 0;
    margin-right: 0;
    padding: 1px;
    padding-left: 15px;
    color: var(--blockquote-text-color);
    font-style: italic;
}

figure {
    border: 1px solid var(--figure-border-color);
    margin: 0px;
}

figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figcaption {
    padding: 2px;
    text-align: center;
    font-size: 16px;
    color: var(--figcaption-text-color);
}

img {
    max-width: 100%;
    height: auto;
    border-style: none;
}

dialog {
    border: none;
    border-radius: 8px;
    padding: 15px;
    background: var(--dialog-bg-color);
    color: var(--dialog-text-color);
    box-shadow: 0 4px 8px var(--dialog-box-shadow-color);
    position: fixed;
    z-index: 1000;
    width: 500px;
}

dialog > h1, dialog > h2, dialog > h3 {
    margin-top: 0px;
}

dialog::backdrop {
    background: var(--dialog-backdrop-color);
}

small {
    font-weight: 500;
}

hr {
    border: none;
    height: 1px;
    background-color: var(--hr-bg-color);
}

del {
    color: #FFCCCB;
}

ins {
    color: #90EE90;
    text-decoration: none;
}

kbd {
    background: #222;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
}

/**************/
/*** Header ***/
/**************/

header a {
    text-decoration: none;
}

header > a {
    color: var(--site-title-color);
    float: left;
    margin-right: 30px;
    font-weight: bold;
}

header > a:hover {
    text-decoration: none;
    color: var(--site-title-color);
}

header > nav {
    float: right;
}

header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

header nav ul li {
    display: inline;
    margin-right: 15px;
}

header nav ul li:last-child {
    margin-right: 0px;
}

header nav ul li a {
    font-size: 15px;
    font-weight: 500;
}

/*******************/
/*** Mobile menu ***/
/*******************/

header > details {
    display: none;
    background: var(--details-bg-color);
    border: 1px solid var(--details-border-color);
    position: absolute;
    right: 20px;
    top: 15px;
    max-width: 70%;
    z-index: 100;
}

header > details > nav ul li {
    display: block;
    margin-right: 0px;
}

header > details > nav > ul li a {
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid var(--details-border-color);
    min-width: 100px;
    clear: both;
}

header > details > nav > ul li:last-child a {
    border-bottom: none;
}

header > details > summary {
    font-size: 16px;
    font-weight: bold;
    float: right;
    padding: 5px 10px;
}

@media (max-width: 750px) {
    header > nav {
        display: none;
    }

    header > details {
        display: block;
    }

    aside, main {
        width: 100%;
    }

    aside {
        height: auto;
    }
}

/*************/
/*** Forms ***/
/*************/

form {
    overflow: hidden;
}

fieldset {
    border: 1px solid var(--fieldset-border-color);
    padding: 15px;
}

label {
    font-size: 16px;
    display: block;
    margin-bottom: 3px;
    margin-top: 10px;
}

input, select, textarea {
    font-size: 16px;
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
    background: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
}

input::placeholder, textarea::placeholder {
    color: var(--input-placeholder-color);
}

aside input, aside select, aside textarea {
    background: var(--background-color);
}

textarea {   
    height: 150px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: block;
}

input[type="search"] {
    border-radius: 25px;
}

input[type="file"]::file-selector-button {
    background: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

input[type="file"]::file-selector-button:hover {
    background: var(--button-bg-hover-color);
}

input[type="checkbox"] {
    width: auto;
    margin-bottom: 25px;
    transform: scale(1.5);
    position: relative;
    bottom: 8px;
    accent-color: var(--button-bg-color);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--input-disabled-bg-color);
    color: var(--input-disabled-text-color);
    cursor: not-allowed;
    border: 1px solid var(--input-disabled-border-color);
}

select:disabled {
    opacity: 1.0;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--button-bg-color);
}

input[type="color"] {
    padding: 3px;
    height: 40px;
}

input[type="radio"] {
    width: auto;
    margin-bottom: 15px;
    transform: scale(1.5);
    position: relative;
    bottom: 4px;
    accent-color: var(--button-bg-color);
}


/**************/
/*** Tables ***/
/**************/

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid var(--table-cell-border-color);
    padding: 10px;
    text-align: left;
}

th {
    background: var(--table-header-bg-color);
}

table caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 10px;
}

tfoot td {
    font-weight: bold;
    background: var(--table-footer-bg-color);
}

td button {
    margin-bottom: 5px;
    margin-top: 5px;
    display: inline-block;
}

/**************/
/*** Footer ***/
/**************/

footer {
    margin-top: 70px;
    padding-bottom: 20px;
}

footer > nav > ul {
    width: 100%;
    text-align: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer > nav > ul li {
    display: inline;
    margin-right: 15px;
}

footer> nav > ul li a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

/***********************/
/*** Helper classess ***/
/***********************/

#skip-to-main {
    display: block;
    position: absolute;
    left: -999px;
    top: -999px;
    background: var(--background-color);
    color: var(--text-color);
    padding: 10px 15px;
    z-index: 100;
    text-decoration: none;
}

#skip-to-main:focus {
    top: 0;
    left: 0;
}

.container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

aside.right-sidebar {
    float: right;
    margin-left: 25px;
    margin-right: 0px;
}

form .helper-text {
    font-size: 14px;
    color: var(--input-helper-text-color);
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: right !important;
}

button.cancel-btn {
    background: #555555;
}

button.cancel-btn:hover {
    background: #444444;
}

button.delete-btn {
    background: darkred;
}

button.delete-btn:hover {
    background: #aa0000;
}

[role="alert"] {
    border-radius: 5px;
    margin-top: 12px;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

[role="alert"] a {
    font-weight: bold;
    color: inherit;
}

[role="alert"].red-alert {
    border: 1px solid var(--alert-red-border-color);
    background: var(--alert-red-bg-color);
    color: var(--alert-red-text-color);
}

[role="alert"].yellow-alert {
    border: 1px solid var(--alert-yellow-border-color);
    background: var(--alert-yellow-bg-color);
    color: var(--alert-yellow-text-color);
}

[role="alert"].green-alert {
    border: 1px solid var(--alert-green-border-color);
    background: var(--alert-green-bg-color);
    color: var(--alert-green-text-color);
}

.figure-right, .img-right {
    display: block;
    float: right;
    max-width: 40%;
    padding: 5px;
    margin-left: 20px;
    margin-bottom: 15px;
}

.figure-left, .img-left {
    display: block;
    float: left;
    max-width: 40%;
    padding: 5px;
    margin-right: 20px;
    margin-bottom: 15px;
}

@media (max-width: 700px) {
    .figure-right, .img-right, .figure-left, .img-left {
        float: none;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

main.centered-page {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

main.centered-page h1,
main.centered-page p {
    text-align: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
    gap: 20px;
    margin-top: 20px;
}

.grid > div {
    margin-bottom: 15px;
}

.grid a img {
    border-radius: 10px;
    display: block;
}

.responsive-table {
    overflow-x: auto;
}

#example-site-icon {
    vertical-align: top;
    margin-right: 9px;
    width: 15px;
}

.light-toggle {
    padding: 0px;
    display: inline-block;
    background: none !important;
}

header details .light-toggle {
    padding: 10px 15px;
    width: 100%;
}