@font-face {
  font-family: "Determination Mono";
  src: local("Determination Mono"), url("/DTM-Mono.otf") format("opentype");
}
@font-face {
  font-family: "OpenDyslexic";
  src: local("OpenDyslexic"), url("/OpenDyslexic.otf") format("opentype");
}
/*@font-face {
  font-family: "Ubuntu Sans";
  src: local("OpenDyslexic"), url("/OpenDyslexic.otf") format("truetype");
}*/
@font-face {
  font-family: "Ubuntu Sans";
  src: local("Ubuntu Sans"), url("UbuntuSans.ttf"), url("UbuntuSans-Italic.ttf"), format("truetype");
}

/* */

:root {
  font-size: 16px;
  box-sizing: border-box;
  
  --color-bg : #1f1d40;
  --color-accent1 : #0b0b3b;
  --color-accent2 : #150066;
  --color-accent3 : #180078;
  --color-accent4 : #c40000;
  --color-accent5 : #fedc00;
  --color-accent6 : #3a006a;
  --color-txt : #def4fe;
  --color-a-link : #64ffff;
  --color-a-hover : #aaffff;
  --color-dead: #9494a4;
  --txt-def: "Ubuntu Sans", sans-serif;
  --txt-title: "Determination Mono", serif;
  --txt-title2: "OpenDyslexic", serif;
  
  --size-txt : 
  
  /*--txt-condense: font-variation-settings: "wdth" 75;*/
  --txt-condense: font-stretch: extra-condensed;
}


body {
  color:var(--color-txt);
  background-color:var(--color-bg);
  background-repeat:repeat;
  display:flex;
  font: var(--text-def);
}

div {box-sizing: border-box;}

/*a {color: var(--color-txt);}*/
a {color: var(--color-a-link);}
a:hover {color: var(--color-a-hover)}
a:empty {color: var(--color-dead)}
a:invalid {color: var(--color-dead)}


h1 {
	color:var(--color-txt);font: 3.6rem/4rem var(--txt-title);text-align:center; margin: .6rem .6rem 1.6rem .8rem}

h2 {
	background-color:var(--color-accent2);color:var(--color-txt);font: 1.5rem/1.8rem var(--txt-title); padding:.7rem .7rem .7rem 1.2rem; width:75%;}

h3 {
	background: linear-gradient(90deg, var(--color-accent1) 30%, var(--color-bg) 80%); color:var(--color-accent5);font: 1.5rem/1.8rem var(--txt-title); padding: .6rem .6rem .6rem 1rem; width: auto; margin-left: 1rem; clear: right;}

h4 {
	color:var(--color-txt); font: 1.1rem/1.2rem var(--txt-title); text-indent: 2rem; font-style:italic; margin: .1rem;}


p   { 
	color:var(--color-txt);font: 1.2rem/1.6rem var(--txt-def); text-indent: .9rem;  margin: 0 .8rem .8rem .8rem;}
  .list {
    text-indent: each-line -2ch ; margin-left: 2.6rem; padding-left: 2ch
  }
	p mark {background-color:var(--color-accent3);color:var(--color-accent3);
	}

hr {
	border:none; background-color:var(--color-accent4); height: .2rem; margin: .5rem auto .5rem auto;
}
  .hrh1 {
    border: outset; border-color:var(--color-accent4); width:75%; height: 0; margin: .5rem auto 1.5rem auto;
  }
  .minor {background-color:var(--color-accent3);}
  .invis {
    background-color: #00000000; height: 1.2rem; 
  }
  .spacer {
    background-color: #00000000; margin: 0; height: .2rem; 
  } /*Easy and intuitive to change "height" style to change height*/

    /*Details*/
details {
  padding-bottom:.3rem; width:100%;
}
details > summary {
  background-color:var(--color-accent1);color:var(--color-accent5);font: 20px/25px var(--txt-title); padding-left:40px; padding:10px; width:100%;
}
summary a {color:var(--color-accent5);}
  .lrg {
    background-color:var(--color-accent6);color:var(--color-a-link);font: 24px/28px "Determination Mono", monospace; padding-left:40px; padding:8px; margin-bottom:4px; width:100%;
  }
  .dead {
    padding-bottom:5px; width:100%; color:var(--color-dead);
  }
  
details >p {
  color:var(--color-txt);font: 16px/22px var(--txt-def);padding-left:24px;
}

@media only screen and (max-width:1000px) {
  details >p {padding-left:2px;}
}


    /*More specific classes only beyond here*/
    /*Starting with #main and #sidebar*/
#main {
  width: auto; padding: .6rem 1.2rem 0 .6rem;
}
/*@media screen and (max-width: 720px) {
    #main {width:90%;}*/
}
#main> a:visited { color:#bd6aff; }
  
#sidebar {
   text-align:center; overflow-wrap:break-word; overflow: hidden; position:sticky; top: 10px; align-self: flex-start;}
.sb {
  width:32%; max-width:250px; min-width: 128px;
}
.sb-minned {display: none; width:0;}

.sb-title {
  background-color:var(--color-accent2); padding:10px;}
.sb-all{
  text-align: center; display: contents;
}
.sbd{
  padding: 0; margin: 0;
}
@media only screen and (max-width:1000px) {
      #sidebar {width:20%; min-width: 128px;}
      }


.nav-btn-cont {
  box-sizing: content-box; position: sticky; top: 0; bottom: 0; background-color: var(--color-accent6); height: auto; color: var(--color-a-link); margin: 0; float: left; clear:right; width: 50px; z-index: 1;
}
.nav-btn {
  font: 30px/25px sans-serif; padding: auto; text-align: center; font-weight: bold;  position:sticky; top: 50%; margin: 5px;
}


.nav-ttl {
	background-color:var(--color-accent2); color:var(--color-txt);font: 20px/25px var(--txt-title); padding:12px; text-align:center; font-weight: bold; width: auto;
}

.nav1 {
  background-color: var(--color-accent1) ;color:var(--color-txt);font: 20px/22px var(--txt-def); font-weight: 600; text-align: left; padding: 10px 5px 10px 5px; margin: 0 0 0 0;
}
  .nav1 > a:visited {color:var(--color-txt)}
.nav2 {
  box-sizing: border-box; background-color: var(--color-accent1); color:var(--color-txt); font: 16px/16px var(--txt-def); text-align: left; padding: 10px 5px 10px 5px; margin: 0 0 0 5px; font-weight: bold;
}
  .nav2 > a:visited {color:var(--color-txt)}
  .nav2 > a:link {text-decoration-line: none;}
.nav3 {
  box-sizing: border-box; background-color: var(--color-accent1); color:var(--color-txt); font: 14px/16px var(--txt-def); text-align: left; padding: 10px 5px 10px 5px; margin: 0 0 0 10px; width: auto;
}
  .nav3 > a:link {text-decoration-line: none;}
.nav4 {
  box-sizing: border-box; color:var(--color-a-link); font: 100%/100% var(--txt-def); padding: 5% 5% 5% 5%;
}
.navbrk {
  box-sizing: border-box;font: 14px/14px var(--txt-def); padding: 2px 5px 10px 5px; 
}
  .navbrk a {color: var(--color-dead);}
  .navbrk a:hover {color:palevioletred}

.navhd {
    font: 24px/24px "Determination Mono", monospace; padding: 9px 5px 1px 5px;
}
  .navhd > a:visited { color:var(--color-a-link)}
  navhd > a {font-style:normal;text-decoration-line: none;}



  ps  {
  color:#9db0c7;font: 18px/26px var(--txt-def);}
  
  .sbtt {
  background-color:var(--color-accent2); font-style:italic;}
	



/*.wiki-top {
  container: wikitop / inline-size;
  display: flex;
  grid-template-columns: auto max-content;
  grid-column-gap: 15px;
  width: auto;
}
@container wikitop {
  div {width: 80%; margin-top: 10px;}
}*/

.wikibox {
  container: wikibox / inline-size; box-sizing: border-box; width: 50%; max-width: 300px; background-color: var(--color-accent1); padding: 10px; color:var(--color-txt); float: right; margin: 0 0 .5rem 1rem;
}
@container wikibox {
  div {width: auto; margin: unset;}
  h1 {
    font: 18px/20px var(--txt-def); font-weight: bold; text-align: center; margin: 10px 0 16px 0
  }
  hr {background-color: var(--color-accent5); width: 90%; height: 2px;}
  p {
    font: 12px/16px var(--txt-def); text-align: center; text-indent: unset; margin: 10px 0 2px 0;
  }
  .spacer {background-color: #00000000;}
  .vr {height: 5px;}
  .wikibox-bio {
    container: wikibio / inline-size; box-sizing: border-box; color: var(--color-txt); display: grid; grid-template-columns: min-content 1rem 100%; /*grid-template-columns: max-content 10px min-content;*/ font: 14px/16px var(--txt-def); font-weight: bold;
}
  @container wikibio {
    .l  {
      padding: 5px 0 5px 5px; width: 35%; grid-column: 1;
    }
    .r {
      color:var(--color-a-hover); font-weight: normal; padding: 5px 5px 5px 0; grid-column: 3;
    }
    div {
      margin: auto 0 auto 0;  padding: 0 5px 0 5px;
    }
  }
  
  .wikibox-sub {
    display: grid; grid-template-columns: 100%;
  }

  .wikibox-sub > hr {margin: 5px auto 0 auto;}
  .wikibox-sub > .rebal {grid-column: span 3}

  .wikibox h2 {
    font: 14px/16px var(--txt-def); font-weight: bold; text-align: center; margin: 5px 0 5px 0; padding: 6px; width: auto;
  }
  .vr {background-color: var(--color-accent5); width: 90%; height: 2px; margin: 5px auto 0 auto;}
}
@container wikibox (width > 200px) {
  .wikibox-sub {
    display: grid; grid-template-columns: 48% auto 48%;
  }
  .vr {
      background-color: var(--color-accent5); height: 90%; width: 2px; margin: 10px auto 10px auto;
    }
  .wikibox-sub p {
    font: 12px/16px var(--txt-def); text-align: center; text-indent: unset; margin: 2px 0 2px 0;
  }
  .wikibox-sub hr {grid-column: span 3; width: 90%; background-color: var(--color-accent5);}
} /*Creates subbox grid display when enough space*/

@container wikibox (width < 160px) {
  .wikibox p {font-stretch: condensed;}
  .wikibox-bio {display: grid; grid-template-columns: max-content min-content; font-stretch: condensed;}
  .wikibox-bio > .l {max-width: unset; width: max-content;}
  .wikibox-bio > .r {grid-column: span 2; padding: 5px 0 5px 10px;}
  .wikibox h1 {font: 14px/20px var(--txt-def); font-weight: bold; font-stretch: condensed;}
  .wikibox-sub h2 {font: 14px/16px var(--txt-def); font-weight: bold; font-stretch: condensed;}
} /*wikibox condense*/
@media screen and (max-width: 720px) {
  .wikibox {min-width: 100px;}
}

.btn-select {
  display: flex;
}
.btn-select > div {width: 100%;}
.btn-select > div > p {margin: 0 3% 0 3%; padding: .3rem 2% .3rem 2%; background-color: var(--color-accent2);}



.boxy {
  width: auto; margin:10px; padding: 20px 5px 20px 5px; border: outset; border-width: 2px; border-color: var(--color-accent1);
}
  .boxy h1 {font-size: 32px; line-height: 36px; margin: 0 10px 15px 10px}




.bioc {
    display: grid; grid-template-columns: max-content auto; color:var(--color-txt); font: 18px/22px var(--txt-def);
}
  .l  {
      padding: 5px 0 5px 5px;
  }
  .r {
      color:var(--color-a-hover); font-weight: normal; padding: 5px 5px 5px 0;
  }


.bio >p {
  color:var(--color-a-hover); font: 20px/26px var(--txt-def); text-indent: unset; margin: 5px;
}
.bio >h3 {
  color:var(--color-txt); background-color: transparent; margin: 1px; text-indent: 15px;
}
.bio >h2 {
  background-color:var(--color-accent2); color:var(--color-txt); margin: 10px unset 10px unset; text-indent: 15px; font: 20px/25px var(txt-title); padding: 8px; width: 100%;
}

.img-insig {
  height: 128px; width: 128px;
}
.img-char {
  height: 256px; width: 128px;
}

@media screen and (max-width: 720px) {
  .img-insig {height: 72px; width: 72px;}
}


.sub {
  font: 16px/20px var(--txt-title2); padding-left:8px;
}


.cw > summary {
  background-color:transparent;color:#fe1e5f;font: 18px/26px var(--txt-title); padding:5px;
}
.cw {
  padding-bottom:5px;
}
.cw > p {
  color:var(--color-txt);font: 18px/26px var(--txt-title2); padding-left: unset;
}


.scrollpast {
  height: 5em;
}


textarea {
  width:80%;
  font: 20px/26px monospace;
}




.hide > summary {
  list-style-type: '  '
}

.cs >p {
  color: #bca6ff; font: 24px/26px "Glametrix", serif; padding-bottom: 5px; text-indent: 10px; margin: 5px;
}