/* todo: license + link to designer */
/* standard header text IBM VGA 9x16 */
@font-face {
  font-family: "IBMVGA";
  src: url('../fonts/MxPlus_IBM_VGA_9x16.woff');  
  /* src: url('https://bees-please.github.io/shared_resources/fonts/MxPlus_IBM_VGA_9x16.woff'); */
}

/* todo: license + link to designer */
/* standard body text VCR OSD MONO */
@font-face {
  font-family: "VCRMONO";
  src: url('../fonts/VCR_OSD_Mono.woff');
  /* src: url('https://bees-please.github.io/shared_resources/fonts/VCR_OSD_Mono.woff'); */
}

/* color variables */
:root {
  --light: #FFFFF1;
  --yellow: #FFBB00;
  --orange: #FA6000;
  --blue: #607196;
  --navy: #404E80;
  --dark: #0f0a0a;
  --all-text: 25px;
  --h2: 35px;
  --blur: 5px;
  --strong_blur: 2px;
}

/* standard text and background layer */
* {
  color: var(--light);
  /* shouldn't override other target's blur light value */
  /* shadow here shouldn't override the 'blur' of the exit page */
  text-shadow: 0px 0px var(--blur) var(--light), 0px 0px var(--strong_blur) var(--light);
  background-color: var(--dark);
  font-size: var(--all-text);
}

h2 {
  padding: 15px;
  margin: 0;
  font-family: VCRMONO;
  font-size: var(--h2);
}

/* main div/ containing body */
.main {
  margin: 15px;
}

/* standard body text stuff */
body {
  padding: 15px;
  margin: 0;
  font-family: VCRMONO;
  font-size: var(--all-text);
}

p {
  padding: 15px;
  margin: 0;
  font-family: VCRMONO;
  font-size: var(--all-text);
}

h1 {
  padding: 15px;
  margin: 0;
  font-family: IBMVGA;
  font-size: var(--all-text);
}

/* accoutroments + seperator styling */

fieldset {
  border: 2px solid var(--light);
  /* this should add the blur inside AND outside the box */
  box-shadow: inset 0px 0px var(--blur) var(--light), 0px 0px var(--blur) var(--light);
}

.wall {
  margin: 0.25in;
  border: 2px solid var(--light);
  box-shadow: inset 0px 0px var(--blur) var(--light);
}

/* add HR, VR rules here, make blur */
/* add table separators here + individual styling */
hr {
  box-shadow: 0px 0px var(--blur) var(--light), 0px 0px var(--blur) var(--light);
}


/* TOP NAVBAR */
/* navbars and higher order selectables */
.navbar ul {
  font-size: var(--all-text);
  font-family: IBMVGA;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

/* outbound links (removes underline) */
.navbar a {
  text-decoration: none;
  display: block;
}

/* change color on hover */
.navbar a:hover {
  background-color: var(--yellow);
  color: var(--dark);
}

.navbar li {
  float: left
}

/* OTHER NAVIGATION */
/* navbars and higher order selectables */
.intnav {
  text-decoration: none;
}

.intnav:hover {
  background-color: var(--light);
  box-shadow: 0px 0px var(--blur) var(--light), 0px 0px var(--strong_blur) var(--light);
  color: var(--dark);
  padding-left: 0px;
  padding-right: 0px;
}

.intnav:before {
  content: "[ "
}

.intnav:after {
  content: " ]"
}

.extnav {
  text-decoration: none;
}

.extnav:hover {
  background-color: var(--yellow)
}

/* some utility stuff */
.centered {
  position: fixed;
  left: 0;
  right: 0;
  top: 40%;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

/* blog post formatting */
.post {
  margin-left: 10%;
  margin-right: 10%;
}