* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; list-style-type: none; scrollbar-color: var(--main-bg-color) var(--secondary-bg-color); scrollbar-width: thin; }
*:not( .ck-content * )::selection { background-color: var(--main-text-color); color: var(--main-bg-color); }
*::-webkit-scrollbar { width: 12px; background-color: var(--main-bg-color); }
*::-webkit-scrollbar-thumb { background-color: var(--secondary-bg-color); }

main,
a { color: var(--main-text-color); }

main,
main section,
main article,
main > *::after,
.browse,
button,
*::-webkit-scrollbar-thumb,
.snippet-box > *,
table tr > *,
table { border-radius: 4px; }

main > *::after,
.browse,
.snippet-box > *,
button,
form,
form > *,
*::-webkit-scrollbar-thumb,
table tr > *,
table { border: 1px solid #efebdda6; }

h1 { font-size: 1.45em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.15em; }

table td:hover { background-color: var(--main-text-color); color: var(--main-bg-color); }
table td:hover::selection { background-color: var(--main-bg-color); color: var(--main-text-color); }

hr { border: 1px solid #fff; }

body { position: relative; color: #fff; font-family: arial, sans-serif; background: fixed center / 100% url("../images/starsbg.jpg"); }

main { width: calc(100vw - 22px); max-width: 1080px; margin: 0 auto; padding: 12px; overflow-x: hidden; }
main > * { width: 100%; padding: 8px; position: relative; background-color: var(--main-bg-color); }
main > *::after { content: ""; width: calc(100% + (8px*2)); height: calc(100% + (8px*2)); position: absolute; left: -9px; top: -9px; box-sizing: content-box; background-color: var(--secondary-bg-color); z-index: -1; }
main * { margin: 0.75rem 0; }
main *:first-child { margin-top: 0; }
main *:last-child { margin-bottom: 0; }

main > * { margin: 1.5rem 0; }
main > *:first-child { margin-top: 0; }
main > *:last-child { margin-bottom: 0; }

main ul { margin-left: 1rem; }

button:not(.ck),
form [type="submit"] { background-color: var(--main-bg-color); padding: 4px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
button:hover:not(.ck),
form [type="submit"]:hover { background-color: var(--secondary-bg-color); color: var(--main-text-color); }

table { background-color: var(--secondary-bg-color); border-spacing: 2px; padding: 8px; }
table tr > * { background-color: var(--main-bg-color); padding: 4px; }

.browse { user-select: none; margin-left: 0; max-height: 100%; overflow-y: auto; min-height: 32px; }
.browse li { padding: 8px; cursor: pointer; transition: 125ms linear filter; margin: 0; }
.browse li:nth-child(odd) { background-color: var(--secondary-bg-color); }
.browse li:nth-child(even) { background-color: var(--main-bg-color); }
.browse li:hover { background-color: var(--main-text-color); color: var(--main-bg-color); }

.browse-container { display: flex; flex-direction: column; }

.snippet-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; }
.snippet-box > * { height: 168px; margin: 0; padding: 8px; overflow-y: auto; overflow-x: hidden; word-break: break-word; background-color: var(--main-bg-color); border: 4px dashed var(--secondary-bg-color); }
.snippet-box > *.good { background-color: var(--snippet-good-color); box-shadow: 0px 0px 22px 2px var(--snippet-good-color); }
.snippet-box > *.very-good { background-color: var(--snippet-very-good-color); box-shadow: 0px 0px 16px 8px var(--snippet-very-good-color); }
.snippet-box > *:hover { border-style: solid; }

.snippet-box > * > *:first-child { font-weight: bold; font-size: 1.1em; letter-spacing: -1px; }

.page-flip .page { display: none; margin: 0; }
.page-flip .page.toggle { display: block; }

.reader { font-family: 'Times New Roman', Times, serif; }
/* .reader h1,
.reader h2,
.reader h3,
.reader h4,
.reader h5,
.reader h6 { font-family: Arial, Helvetica, sans-serif; } */

form { padding: 4px; }
form > * { display: block; margin: 8px 0; padding: 2px; }
form > *:first-child { margin-top: 0; }
form > *:last-child { margin-bottom: 0; }

section.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); justify-content: center; align-items: center; }
section.tiles > * { height: 320px; margin: 0; overflow-y: auto; overflow-x: hidden; }

.indent { margin-left: 1em; }

@media screen and (min-width: 560px)
{
    .cms { position: relative; height: 100vh; }
    .cms > * { height: calc(100vh - 32px); top: 16px; margin: 0; }
    .cms > *:first-child { position: absolute; width: calc( 66% - 32px ); right: 16px; display: flex; flex-flow: column nowrap; }
    .cms > *:last-child { position: absolute; width: calc( 33% - 32px ); left: 16px; }
    
    .cms > *:first-child .page { overflow-y: auto; overflow-x: hidden; max-height: 100%; }
}