@font-face {
    font-family: 'oldschool';
    src: url(../fonts/Glass_TTY_VT220.ttf);
}

:root {
    --phosphor-bright: hsl(45, 100%, 60%);
    --phosphor:        hsl(45, 100%, 40%);
    --phosphor-dark:   hsl(45, 100%, 18%);
    --phosphor-black:  hsl(45, 100%, 7%);
}


/* too cewl...
body,h1,h2,h3,a:hover,#fglayer {
  cursor: url(/images/lightpen_cursor.png) 7 7, auto;
}
*/

#fglayer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0em;
  z-index: 1;
}

#qrcode {
  background-color: #009900;
  color: var(--phosphor-black);
/*
  position: absolute;
  top: 8em;
  right: 2em;
  z-index: 2;
*/
}

div.statusbar {
  z-index: 2;
}

body, h1, h2, .searchinput {
  font-weight: normal;
  font-family: 'oldschool', 'Lucida Console', 'Monospace', monospace;
  text-shadow:
    +0.03em 0px 0.03em var(--phosphor),
    -0.02em  0px 0.02em var(--phosphor);
  text-rendering: geometricPrecision;
}

/* BG */ div.statusbar, h2, a:hover, .searchinput {
  background-image: url(../scanlines20.png);
  background-size: contain;
  background-repeat: repeat;
}

@media (max-resolution: 100dpi) {
  body, h1, h2, .searchinput {
    font-size: 18px;
  }
}

@media (min-resolution: 101dpi) {
  body, h1, h2, .searchinput {
    font-size: 24px;
  }
}


h1 {
  background-color: var(--phosphor-black);
}

body,h1,h2 {
  margin-top: 0;
}

h1 {
  padding: 0;
  margin-top: 2ex;
  margin-bottom: 2ex;
}

h2 {
  padding: 0;
  margin-top: 2ex;
  margin-bottom: 0ex;
}

h2:before {
  content: " "; /* 1 x   */
  white-space: pre;
}


/* lists machanics (before also see something) */


li {
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
  margin-left: 0em;
  padding-left: 0em;
  /* white-space: pre; */
  /*border: solid 1px yellow;*/ /* debug */
}

li:before {
  content: " o "; /* latin "o " */
  color: var(--phosphor);
  white-space: pre;
}

li.nobull:before {
  content: "   "; /* 3 x   */
  white-space: pre;
}

li.nobull {
  margin-left: 0em; /* two spaces to compence bullet absence */
  padding-left: 0em; /* two spaces to compence bullet absence */
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  /* position: absolute;*/
  margin-left: 0em;
  padding-left: 0em;
  /* border: solid 1px green; */ /* debug */
}

/* colors etc */

body {
  background-color: var(--phosphor-black);
  color: var(--phosphor);
  height: 100%;
}

h1 {
  text-align: center;
}

h2 {
  background-color: var(--phosphor-dark);
  color: var(--phosphor-bright);
  width: 100%;
}

a {
  color: var(--phosphor-bright);
  text-decoration: none;
}

a:visited {
  color: var(--phosphor-bright);
}

a:hover {
  color: var(--phosphor-bright);
  background-color: var(--phosphor-dark);
  text-shadow:
    +0.04em  0px 0.04em var(--phosphor-bright),
    -0.02em 0px 0.02em var(--phosphor-bright);
}


a:after {
  content: "\005D";
  color: var(--phosphor-bright);
}

a:before {
  content: "\005B";
  color: var(--phosphor-bright);
}

.statusbar {
 position: absolute;
 bottom: 0;
 left: 0;
 background-color: var(--phosphor-dark);
 width: 100%;
}

.cursor {
  color: var(--phosphor-bright);
  text-decoration: blink;
}

.rightinstatus {
  position: absolute;
  right: 0;
}

.searchinput {
  background-color: var(--phosphor-dark);
  color: var(--phosphor);
  border-style: hidden;
  padding: 0px;
  width: 24em;
  display: inline;
}