@font-face {
  font-family: "Jet Brains Mono";
  font-style: normal;
  font-weight: 400;
  src: local("Jet Brains Mono"),
  local("IBMPlexMono"),
  url("./fonts/JetBrainsMono/JetBrainsMono-Light.woff2") format("woff2");
}

* {
  font-family: "Jet Brains Mono", "Courier New", monospace; 
  color: hotpink; background-color: transparent; text-align: left; 
  font-weight: 400; font-style: normal; text-decoration: none;
  font-size: 1.0em; line-height: 1.25em;
  margin: 0; border: 0; padding :0;
}

html { 
  font-size: 16px;
  /* prevent ios orientation re-scaling */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  background-color: #222;
  background-position: "top center";
}


p   { font-size: 1.000em; }
pre { font-size: 1.000em; }

/* h4  { font-size: 1.250em; } */
h1  { font-size: 6.75em; letter-spacing: -0.046875em; }
h2  { font-size: 3.375em; letter-spacing: -0.0234375em; }
h3  { font-size: 2.250em; letter-spacing: -0.015625em; }
h4  { font-size: 1.500em; }
h5  { font-size: 1.000em; }
h6  { font-size: 0.750em; }

.text_sml { font-size: 0.625em; }
.text_reg { font-size: 0.875em; }
.text_big { font-size: 4.500em; letter-spacing: -0.03125em; }

a { color: lime; cursor: pointer; text-decoration: none; outline: 0; }

em { color: red; }

canvas { display: block; margin: auto; padding: 0; }

.none { background-color: transparent; }

.st {
  /* strikethru' */
  text-decoration: line-through;
  text-decoration-color: rgba(255, 0, 0, 0.5);
  text-decoration-thickness: 0.25em;
}

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

#fixed-background-pattern {
  position: fixed; z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(1deg, #0000A0 33%, black);
}

#busy-icon {
  /* loading icon H */
  display: block; position: fixed;
  top: 16px; right: 16px; height: 28px; width: 28px;
  background-image: url("./loading.gif");
  image-rendering: pixelated; 
}

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */
/* main page / item elements */

#top-item-indicator {
  cursor: pointer;
  position: fixed; left: 0; top: 1.875em !important;
  opacity: 0.925; background-color: transparent; color: orangered;
  border-left: 1.25em orangered solid;
}
#top-item-indicator::before { content: "→"; }

/* relative position affects nav click behaviour, not sure why */
#user-generated-content {
  position: relative;
  opacity: 0;
  /*   vertical-align: top; */
  overflow-x: hidden; 
  margin: 0 1.25em; /* main content margins */
  margin-top: 1.875em !important; /* top space before item indicator */
}

#item-stack {}

#signoff {
  display: inline-block;
  cursor: pointer; white-space: nowrap;
  font-size: 36px; letter-spacing: 0.2em;
  margin-top: calc(100vh - 66px) !important; /* SPACE BEFORE SIGN OFF */
  user-select: none; 
}
#signoff div { /* background-color: red; */ }
#signoff p,  #signoff em {
  width: 1em; overflow: hidden;
  color: lightgray; background-color: transparent; 
  padding: 1px 6px; display: inline-block; 
}
#signoff em { width: 3em; }

#msg {
  /* display: none; opacity: 0; */
  color: #bbb; background-color: #111;
  position: fixed; top: 1.875em; left: 0;
  border-left: 1.25em snow solid;

}
#msg::before { content: "\00A0↪ "; }

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ITEM */

.rtk-item { margin-bottom: 1px; /* background-color: lightgray; */ }
.rtk-item div { white-space: nowrap; } /* overflow: hidden;  */

.rtk-bg { /* background-color: lightpink; */ }

.rtk-head { white-space: nowrap; overflow: hidden; }
.rtk-head span  { padding-left: 1px; cursor: pointer; color: #444; background-color: #ddc;
/* user-select: none; */ }
.rtk-head .B_closer::before  { content: "\00A0✕ "; color: orangered; }
.rtk-head .B_opener::before  { content: "\00A0+ "; color: orangered; }

.rtk-body { /* background-color: lightblue; */ }
.rtk-body div { overflow-x: scroll; /* user-select: none; */ }
.rtk-body span { color: black; background-color: grey; }
/* .rtk-body-width { max-width: calc(100vw - 48px - 48px); } */
.rtk-body-inner { padding: 7px; max-width: calc(100vw - 48px - 48px); }
.rtk-body-outer { /* margin: 24px 0;  */}

.rtk-foot {  overflow: hidden; /* background-color: lightgreen; */ }
.rtk-foot span { color: #eee; background-color: #444; }

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ABOUT */

#about {
  display: none; opacity: 0.90;
  background-color: #111;
/*   color: #bbc; */
  position: fixed; top: 0; left: 0; bottom: 0; right: 0;
  overflow-x: hidden;
  overflow-y: scroll;
 
  margin: 0 1.25em;
  padding: 9px 0;
  min-height: 100vh;
}

#about { padding-left: 1em; padding-right: calc(100vw - 250px); }

#about::before { cursor: pointer; content: "✕"; color: lime; }

#about, #about * { color: #bbc; }
#about a::before { content: "→ "; color: white; }

.about-btn { cursor: pointer; color: lime; }
.about-btn::before { color: white; }

#feeds-head span { cursor: pointer; color: lime; }
#feeds-head span::before { color: white; }
#feeds-body { display: none; white-space: nowrap; padding-left: 20px; }

#settings-head span, #settings-head p { cursor: pointer; color: lime; }
#settings-head span::before { color: white; }
#settings-body { display: none; white-space: nowrap; padding-left: 20px; }

.setting-on, .setting-off { cursor: pointer; }
.setting-on::before, .setting-off::before { content: "→️ "; color: white; }
.setting-on::after { content: " ON️"; color: white; }
.setting-off::after { content: " OFF"; color: white; }

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MENU */

#menu_title { display: block; padding-bottom: 0.0625em; }

#menulist {
  display: flex; flex-direction: column-reverse;
  position: fixed; top: auto; right: -6.5em; bottom: 1.0em; left: auto; 
  opacity: 0.925; background-color: snow;
  border-left: 0.25em black solid;
  white-space: nowrap; user-select: none;
  width: 9em;
}
#menulist li { font-size: 1.5em; }

.menuitem { display: none; cursor: pointer; color: black; }
.menuitem span {  font-size: 0.625em; color: black; }
.menuitem::before, .menuitem::after {
  display: inline-block; text-align: center;
  padding: 0 0.25em 0 0.125em;
  color: orangered;
}
.menuitem::after { padding-left: 0.375em; }

.B_about::before      { content: "?"; }
.B_make::before       { content: "↯"; }
.B_next       { }
.B_next span      { padding-left: 0.333em; }
.B_next::before       { content: "\2197"; }
.B_next::after        { content: "\2199"; position: absolute; right: 0.25em; }
/* .B_download::before   { content: "↧"; } */

.B_closer::before     { content: "✕"; }
.B_opener::before     { content: "+"; }

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

#fullscreen {
  position: fixed; z-index: 1;
  display: none; opacity: 0.8;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: black;
}

.init_bg {
  background-color: fuchsia;
  opacity: 0.925;
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 12px, 
    grey 12px, grey 24px);
}

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

/* CSS default item overrides */
.pvr1 .rtk-head span, .pvr1 .rtk-head em { background-color: lightpink; }
.pvr1 .rtk-head span, .pvr1 .rtk-head a { color: fuchsia; }
.pvr1 .rtk-head a::before, .pvr1 .rtk-head em::before { color: fuchsia; }

.babel .rtk-head span, .babel .rtk-head em { background-color: #433; }
.babel .rtk-head span, .babel .rtk-head a { color: #bbc; }
.babel .rtk-head a::before, .babel .rtk-head em::before { color: snow; }
/* .babel .rtk-body span { color: red; background-color: pink; } */
/* .babel .rtk-foot span { color: #433; background-color: #bbc; } */

.unicode .rtk-head span, .unicode .rtk-head em { background-color: orangered; }
.unicode .rtk-head span, .unicode .rtk-head a { color: snow; }
.unicode .rtk-head a::before, .unicode .rtk-head em::before { color: black; }
.unicode .rtk-body span { color: blue; background-color: lightblue; }
.unicode .rtk-foot span { color: grey; background-color: black; }

.bg_demo_hatch {
  background-color: transparent; opacity: 1.0;
  background-image: repeating-linear-gradient(
    -45deg, transparent,
    transparent 6px, 
    snow 6px, snow 8px
  );
}


/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */
/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */
/* ACTIONS ---- */

.deck-container {
  position: relative;
  width: 100%; height: 100%;
  justify-content: center; align-items: center; transform-origin: center;
}

.deck-bg {
  position: absolute;
  width: 100%; height: 100%;
  overflow: hidden; user-select: none;
  background-color: red;
}

.deck-imgs {  overflow: hidden; }

.deck-imgs div {
  position: absolute; display: flex; opacity: 0;
  justify-content: center; align-items: center; transform-origin: center;
  overflow: hidden;
}

.deck-cover {
  position: absolute; opacity: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  user-select: none;
  background-color: yellow;
}

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */
/* splash / intro / test : index pages */

#main_content {  }

#main_bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#main_bg div {
  position: absolute; display: flex; opacity: 0;
  width: 100vw; height: 100vh;
  justify-content: center; align-items: center; transform-origin: center;
  overflow: hidden;
}

#main_bg img { max-width: 100vmin; max-height: 100vmin; opacity: 1; }

#main_cover {
  cursor: pointer; 
  position: fixed; opacity: 0.0; 
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: hidden; user-select: none;
}

/* index.html */
#splash { }

/* index_rtk.html */
#intro { background-color: burlywood; }
#intro a { color: orangered; }
#intro pre, #intro a { mix-blend-mode: multiply; }

#main_index { position: absolute; top: 0; left: 0; }
#main_index pre { color: #888; padding: 1em 0 0 1em; }

#test { background-color: burlywood; }
#test div { padding: 0.75em 0.75em 0.25em 0.75em; }
#test div pre span { color: #EEE; background-color: #111; }
#test div span { color: black; background-color: #B0E9DB; } /* eaudnil */


/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

.itemdropfade {
  transition: opacity 1.500s ease-in, max-height 4.000s ease-in-out;
  overflow: hidden;
}

.fade1000 { transition: opacity 1.000s ease-in-out; }
.fade750  { transition: opacity 0.750s ease-in-out; }
.fade666  { transition: opacity 0.666s ease-in-out; }
.fade500  { transition: opacity 0.500s ease-in-out; }
.fade250  { transition: opacity 0.250s ease-in-out; }

.crossfade div {
  /* transition: opacity 0.5s ease 0.25s; */
  transition-property: opacity;
  transition-duration: 1.0s;
  transition-timing-function: ease-in;
}

.slideshow div {
  /* transition: opacity 0.5s ease 0.25s; */
/*   mix-blend-mode:  multiply; */
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
}

/* 
.item_fade .rtk-item {
  transition-property: opacity;
  transition-duration: 1.5s;
  transition-timing-function: ease-out;
}
 */

/* 
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
 */

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

/* prevent user 'click-drag' selecting text */
.noselect { user-select: none; }

/* prevent pixels anti-aliasing */
.hpx { image-rendering: pixelated; }

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

@media print {
  #menulist, #copyright { display: none; }
  #generated-content { flex-direction: column; }
  #generated-content div { font-size: 0.5em; }
}

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */
/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

/*
.save span { color: black; background-color: yellow; }

.alert span { color: snow; background-color: orangered; }

.dref { color: yellow; background-color: black; }
.pnk span { color: orangered; background-color: pink; }
.inv span { color: cornsilk; background-color: saddlebrown; }
.sno span { color: olive; background-color: snow; }
.rah span { color: turquoise; background-color: midnightblue; }
.misc span { color: burlywood; background-color: cornsilk; }
*/

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

/*

FONT SIZE REF.

    ····  1.75em  * 16px (21pt) : 28px : ALERT   ←

→   P     1.00em  * 16px (12pt) : 20px : TEXT    ←
→   PRE   1.00em  * 16px (12pt) : 20px : TEXT    ←

    H1    3.375em * 16px (40pt) : 54px
    H2    2.25em  * 16px (27pt) : 36px
    H3    1.5em   * 16px (18pt) : 24px
    H4    1.25em  * 16px (15pt) : 20px
→   H5    1.0em   * 16px (12pt) : 16px : TEXT    ←
    H6    0.75em  * 16px ( 9pt) : 12px : L/R PAD ←

   .SML   0.625em * 16px ( 7.5pt) : 10px
   .REG   0.875em * 16px (10.5pt) : 14px
   .BIG   4.5em   * 16px (  54pt) : 72px

EM To PIXEL

   1px = 0.0625em  * 16px
   2px = 0.125em   * 16px
   3px = 0.1875em  * 16px
   4px = 0.25em    * 16px
   5px = 0.3125em  * 16px
   6px = 0.375em   * 16px
   7px = 0.4375em  * 16px
   8px = 0.5em     * 16px

*/

/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */
/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

/* vertical-align: top; https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below */
/* https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript see this link for info about adding css to head */
/* https://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other */
/* https://stackoverflow.com/questions/7112471/how-can-i-disable-mobilesafaris-content-scaling-on-orientation-change */
/* ᳄ \1CC4 https://unicode.bayashi.net/0x1CC4/%E1%B3%84 sundanese punctuation bindu leu satanga */