@font-face {
  font-family: 'Pixeloid Sans';
  src: url("fonts/PixeloidSans.ttf") format("truetype");
}

@font-face {
  font-family: 'Pixeloid Sans Bold';
  src: url("fonts/PixeloidSans-Bold.ttf") format("truetype");
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* 
  Sets margins and other spacing elements
  to be *contained within* the assigned width 
  of an element instead of adding to it. 

  This is said to make it easier to reason about
  and control the widths and layout of things.

  See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/

body {
	font-size: 16px;
  font-family: 'Pixeloid Sans', monospace;

  background-color: black;
	color: white;

  margin-top: 2em;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
	max-width: 800px;
  
	line-height: 1.5;
  
  hyphens: none;
  text-align: left;
  
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  background-image: url('images/WraithGlade_forest_seamless.png');
  background-repeat: repeat;
  background-size: 100% auto;
}

header {
  margin-bottom: 3em;
}
footer {
  margin-top: 3em;
}

h1 {
  font-size: 2em;
  text-align: left;
}
h2, h3 {
  margin-top: 2.5em;
  
  text-align: left;
}
h4, h5, h6 {
  text-align: left;
}
.big_title {
  text-align: center;
  font-size: 80px;
  line-height: 1em;
  margin-top: 0em;
  margin-bottom: 24px;
}
.subtitle {
  text-align: center;
  font-size: 24px;
  margin-top: 0em;
  margin-bottom: 3em;
}

li {
  margin-top: 2em;
  margin-bottom: 2em;
}
ul {
  list-style: square;
}

li > ul > li {
  margin-top: 1em;
  margin-bottom: 1em;
}
li > ol > li {
  margin-top: 1em;
  margin-bottom: 1em;
}

a {
  color: hsl(210, 100%, 80%);
}
a:visited {
  color: hsl(250, 100%, 90%);
}

em {
  color: hsl(0, 100%, 85%);
}

strong {
  font-family: 'Pixeloid Sans Bold', monospace;
}

code {
  font-family: 'Pixeloid Sans', monospace;
  color: hsl(120, 100%, 90%);
}

blockquote {
  padding: 1em 2em;
  background-color: hsl(0, 0%, 10%);
}

.notice {
  padding: 1em 2em;
  background-color: hsla(50, 100%, 10%, 80%);
  border-radius: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.notice > ul > li {
  margin-top: 1em;
  margin-bottom: 1em;
}
.notice > ol > li {
  margin-top: 1em;
  margin-bottom: 1em;
}

.warning {
  padding: 1em 2em;
  background-color: hsla(0, 100%, 10%, 80%);
  border-radius: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.warning > h2 {
  margin-top: 0;
}
.warning em {
  color: hsl(70, 7%, 32%);
}

.nav_box {
  padding: 1em 2em;
  background-color: hsla(100, 100%, 10%, 80%);
  border-radius: 1em;
}
.nav_box > h2 {
  margin-top: 0;
}
.nav_box > ul {
  list-style: none;
}
.nav_box > ul > li {
  margin-top: 1em;
  margin-bottom: 1em;
}

.mini_nav_box {
  padding: 0.5em 1em;
  background-color: hsla(270, 100%, 10%, 80%);
  max-width: 50%;
  margin-left: 2em;
  margin-top: 2em;
  border-radius: 1em;
}
.mini_nav_box > h3 {
  margin-top: 0;
}
.mini_nav_box > ul {
  list-style: none;
}
.mini_nav_box > ul > li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.local_nav_box {
  padding: 0.5em 1em;
  background-color: hsla(270, 100%, 10%, 80%);
  max-width: 80%;
  margin-top: 3em;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1em;
}
.local_nav_box > h2 {
  margin-top: 0;
}
.local_nav_box > ul {
  list-style: none;
}
.local_nav_box > ul > li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.local_nav_box > ul > li > ul {
  list-style: none;
}
.local_nav_box > ul > li > ul > li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

ul.webring_list {
  background-color: hsla(270, 100%, 10%, 80%);
  border-radius: 0.5em; 
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  
  font-size: 2em;
  list-style: none;
  text-align: center;
  padding: 0.5em;
}

ul.webring_list > li {
  margin: 0.5em
}

.no_underline {
  text-decoration: none;
}

.tooltip {
  text-decoration: dotted underline;
}
/* 
  `tooltip` mimics `abbr`s default formatting.
  
  This is intended to be used in the form  so that I can add hidden commentary to things without falsely marking those things as "abbreviations".
  
  Example:
  
  <span class="tooltip" title="my tooltip-like commentary here">the text I want to add commentary to</span>
*/

.em_green {
  color: hsl(120, 100%, 90%);
}

.em_yellow {
  color: hsl(40, 100%, 90%);
}

kbd {
  border-style: outset;
  border-color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 80%);
  border-width: 2px;
  border-radius: 20%;
  padding-left: 0.2em;
  padding-right: 0.2em;
  margin-left: 0.1em;
  margin-right: 0.1em;
  
  font-size: 80%;
  font-family: "Pixeloid Sans Bold";
  color: hsl(0, 0%, 20%);
}

.pixel_sculpture_section {
  background-image: url('images/dark_rocky_caustics.png'); background-size: 100%;
  border-radius: 4em;
  border-width: 0.25em;
  border-style: outset;
  margin: 4em;
  padding: 2em;
  border-color: white;
}

.pixel_sculpture_header {
  padding: 0;
  margin: 0;
  padding-bottom: 1.5em;
  text-align: center;
}

.pixel_sculpture_img {
  background-image: url('images/gritty_specks_in_darkness.png'); 
  background-size: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  width:49%;
  height:auto;
  border-style: inset;
  border-radius: 1em;
  border-color: white;
}

.non-breaking {
  white-space: nowrap;
}

.banner, .banner_bottom, .banner_top {
  position: sticky;
  background-color: hsla(100, 100%, 10%, 100%);
  padding: 1em;
  max-width: 100%;
  border-radius: 0em; 
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}
.banner_bottom {
  bottom: 0;
}
.banner_top {
  top: 0;
}
.banner_list {
  margin: 0;
  padding: 0;
}
.banner_list > li {
  list-style-type: none; 
  display: inline;
  padding: 0em 0.8em;
}

.not_sticky {
  position: relative;
}

.center_text {
  text-align: center;
}

.center_img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}