/* set base colours */
:root { --color_main: #201000; --color_contrast: orange; --color_contrast2: #ffbf00; --color_highlight: #ffd200; --color_highlight2: darkorange;}

/* fonts */
@font-face  { font-family: Cordata_PPC-21; src: url(AcPlus_Cordata_PPC-21.ttf); font-weight: normal; font-style: normal; 	font-smooth: antialiased;	-webkit-font-smoothing: antialiased; }

/* pages share these styles */
/* note: overflow-y: hidden; prevents a second outer scrollbar from appearing */
body { font-size: 32px; background-color: var(--color_main); color: var(--color_highlight2); font-family: Cordata_PPC-21 !important; overflow-y: hidden; font-smooth: antialiased; -webkit-font-smoothing: antialiased; }
div#container:before
{
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(32, 16, 0, 0) 35%,
        #000000e6 90%
    );
    background-size: 100% 2px;
    z-index: 2;
    pointer-events: none;
}
div#window { height: fit-content;}
div#navbar {  position: sticky; top: 2px; display: block; height: 0.5em; }
div#title { width: 100%; display: block; text-align: center;  overflow-x:auto; font-size: 1em; color: var(--color_main); background-color: var(--color_contrast);}
div#navmenu { width: 100%; display: flex; text-align: center; overflow-x:auto; height: 1em;}
div.navmenu-item { line-height: 1em; }
div.navmenu-item a, input.button
{
  text-transform: uppercase;
  color: var( --color_main);  
  background-color: var(--color_contrast);
  text-align:center;
	cursor: pointer;
  padding-left: 0.2em;  
  padding-right: 0.2em; 
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  margin-right: 0.05em;
}
div.navmenu-item a:hover { background-color: var(--color_highlight); }
div.navmenu-item a:visited { color: var( --color_main); }

/* setting display to grid, max-height to 80-100vh, and overflow-y to auto is the magic
  recipe for getting a scrollbar to appear in the page_content area */
div#content { color: var(--color_highlight2); display:grid; max-height: 100vh; overflow-y:auto; line-height:1em; }

/* pages */
div.page_content
{
	display: block;
	padding: 0.5em;
	padding-top: 1em; /* prevent content overlap with top menu */
	padding-bottom: 1em; /* prevent content overlap with bottom menu */
	overflow-x: hidden;
	overflow-y: auto;
}

div.subtitle { font-size:4em; font-family: Cordata_PPC-21; }
div.subtitle2 { font-size: 2em; font-family: Cordata_PPC-21; }

div.page {
	display: block;
	padding: 0.5em;
	border: 0.3em solid var(--color_highlight);
	margin-top: 1em;
}
div#page_menu { text-align:right; }
div.page_title { font-weight: bold;}
div.page_body { padding: 0.5em; }

/* page headers */
div.page_header { padding: 0.5em; }
div.page_date { color: var(--color_highlight); }
div.page_time { color: var(--color_highlight);}
div.page_author { color: var(--color_highlight);}

/* links */
a:link { color: var( --color_main); background-color: var(--color_contrast); text-decoration: none; }
div.page, div#content a { color: var( --color_main); background-color: var(--color_contrast); text-decoration: none; } 
div.page, div#content a:visited { background-color: var(--color_contrast);} 
div.page, div#content a:hover{ background-color: var(--color_highlight); }
h1, h2, h3, h4, h5, h6 { color: var( --color_main); background-color: var(--color_contrast); font-weight: normal; font-size: 1em;}
div#content div.title span a, div#content div.title span a:visited { background-color: var( --color_contrast); }
div#content div.title span a:hover, div#content div.title span a:hover {background-color: var(--color_highlight2);}
a:hover { background-color: var(--color_highlight2); }
div.page a:hover, div.page_content a:hover { background-color: var(--color_highlight2);}

/* notices & errors */
div.error { text-align: center; background-color:var(--color_highlight); color: var( --color_main);}
div.notice { text-align: center; background-color:var(--color_highlight); color: var( --color_main);}


/* footer */
div.footer { font-size: small; text-align: right; color: var(--color_contrast);}
div.footer a { color: var(--color_contrast);}

/* code */
code { color:var(--color_highlight); font-family: Cordata_PPC-21, monospace;} 

/* pre */
pre { white-space:pre-wrap; font-family: Cordata_PPC-21, monospace; }

/* input */
textarea { width: 100%; min-height: 15em; font-family: Cordata_PPC-21 !important; font-size:1em !important;}
input[type="text"], input[type="password"] { font-family: Cordata_PPC-21 !important; font-size:1em !important; background-color: var(--color_highlight2) !important; color: var(--color_main) !important; border: none !important;}

/* buttons */
span.edit_button { text-align: right; color: var( --color_main); background-color: var(--color_contrast); }
span.edit_button a:visited { color: var( --color_main);}
span.edit_button a:hover { background-color: var(--color_highlight);}
button, span.button, input.button
{
  /* restyle form buttons to look like text */
  align-items: normal;
  border: none;
  box-sizing: content-box;
  color: var( --color_main) !important; 
  background-color: var(--color_contrast) !important;
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  perspective-origin: 0 0;
  text-align: start;
  transform-origin: 0 0;
  width: auto;
  appearance: none;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
span.button, input.button a:visited { color: var( --color_main) !important; }
span.button a:hover { color: var(--color_highlight) !important; }
button:hover, input.button:hover { background-color: var(--color_highlight) !important;}
/* bold */
b, strong {	font-weight: normal; color: var(--color_contrast2); }
/* custom scrollbar */
::-webkit-scrollbar-thumb:hover { cursor: pointer; }
::-webkit-scrollbar { width: 0.5em; }
::-webkit-scrollbar-track {	width: 0.5em;	background-color: var(--color_contrast) }
::-webkit-scrollbar-thumb {	width: 0.5em;		background-color: var(--color_highlight) }