---
  # Style-Sheet
---

/* FONTS */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700');
@import url('syntax-highlighting.css');

:root {

  --main-color: white;
  --bg-color: black;

  --text-color: #DDD;
  --pop-color: white;
  --alt-color: #2ed573;
  --light-alt-color: rgba(46, 213, 115);

}

/* BASE */
body { background-color: var(--bg-color); color: var(--main-color); font-family: 'Roboto Mono', monospace; margin: 0 auto; width: 90%; max-width: 700px; line-height: 2em; font-size: 0.9em; }
h1, h2, h3, h4, h5, h6 {  margin: 0px;  margin-top: 22px;  font-weight: bold;  color: var(--pop-color); font-size: 1em; }
h1 { font-size: 1.3em; } // slightly customize font size of headers
h2 { font-size: 1.1em; }
p, ul, ol { font-size: 1em;  color: var(--text-color); }
a { text-decoration: underline;  color: var(--alt-color); }
a:hover { color: var(--bg-color); background-color: var(--alt-color); }
.primary-text { color: var(--main-color); }
@media only screen and (max-device-width: 500px) { * { font-size: 12px !important; } }
b, strong { color: var(--main-color); }
.invert { color: var(--bg-color); background-color: var(--main-color); padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 1px; }

/* SMALL FONT OVERRIDE */
body.large { line-height: 2em; font-size: 1em; }

/* LAYOUT */
.container { margin-right: auto;  margin-left: auto; }
p { word-wrap: break-word;  word-break: break-word;  white-space: pre-wrap; }
footer { color: var(--text-color);  border-top: dashed 1px rgba(219, 219, 219, 0.9);  margin: 20px auto 15px;  padding-top: 10px;  text-align: right; }
header { margin-top: 25px;  margin-bottom: 10px; }
header p { text-align: left;  margin: 0; }
footer { margin-bottom: 20px; }
img.home_header { width: 100%; margin-top: 5%; margin-bottom: 5%; }
img.detail_header { width: 100%; }

/* LISTS */
:not(.menu) > ul { list-style: none; padding-left: 1em; }
ul :not(.menu) > ul { list-style: none; padding-left: 3em; margin-top: 0.5em; margin-bottom: 0.7em; }
:not(.menu) > ul { list-style-type: none; }
:not(.menu) > ul > li:before { content: "-";  margin-right: 9px; }
ul :not(.menu) > ul > li:before { content: "*";  margin-right: 9px; }

/* NAVIGATION */
.menu { border-top: dashed 1px rgba(219, 219, 219, 0.9);  border-bottom: dashed 1px rgba(219, 219, 219, 0.9);  margin-bottom: 25px; }
.menu ul { margin-top: 12px;  margin-bottom: 12px;  padding-left: 0px;  list-style-type: none;  text-align: right; }
.menu ul li { display: inline;  margin-left: 10px; }
.menu ul li a { text-decoration: none;  color: var(--text-color); }
.menu ul li a:hover { text-decoration: none; color: var(--bg-color); background-color: var(--main-color); }
.menu ul li.page_title { text-align: left; margin-left: 10px; float: left; font-weight: bold; color: var(--main-color) }


/* ERROR PAGES */

div.error_box { margin: 100px; text-align: center; }
div.error_box h1 { font-size: 2em; }

*::selection { background-color: var(--light-alt-color); color: black; }