/**
 * 98.css
 * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

:root {
  /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}





h1 {
  font-size: 5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}



.vertical-bar {
  width: 4px;
  height: 20px;
  background: #c0c0c0;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}



@media (not(hover)) {
 
}

button:focus {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}



:disabled,
:disabled + label {
  color: var(--button-shadow);
}







.windowhome {

  background: #020d04;
  
     top: 50%;
     left: 50%;
  transform: translate(-50%, -50%);

    	width: 90%;
    	height: 85%;
      border: solid #00ff41;
     position: absolute;
       
 
overflow: hidden;
    
    box-sizing: border-box;
 
 
}

.windowhomealt {


  background: #020d04;
  
     top: 50%;
     left: 50%;
  transform: translate(-50%, -50%);

    	width: 90%;
    	height: 85%;
      
     position: absolute;
         border: solid #00ff41;
 
overflow: hidden;
    
    box-sizing: border-box;
 
}

.title-bar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
width: 50%;

}

.title-bar.inactive {
  background: linear-gradient(
    90deg,
    var(--dialog-gray),
    var(--dialog-gray-light)
  );
}

.title-bar-text {
     position: absolute;
    box-sizing: border-box;

    width: auto;
    height: auto;
   
    color: #00FF41;
    background-color: #020d04;
    cursor: pointer;
    margin: 0;
    
    
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
    

   
    

}

.title-bar-controls {
  display: flex;
}





.title-bar-controls button:focus {
  outline: none;
}











.status-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
 
 
}

.status-bar-field {
  box-shadow:  inset -1px -1px #dfdfdf, inset 1px 1px #808080;
 
 position: absolute;
    box-sizing: border-box;
    width: 32%;
  margin: 0;
    bottom: 5%;
    background-color: #c0c0c0;
    padding-left: 2%;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #020d04;
}

.status-bar-field:hover{
    
    color: #00FF41;
    background: #020d04;
    
    
}

.status-bar-field:active{
    
    color: #020d04;
    background: #00FF41;
    
    
}





fieldset {
  border-image: svg-load("icon/groupbox-border.svg") 2;
  padding: calc(2 * var(--border-width) + var(--element-spacing));
  padding-block-start: var(--element-spacing);
  margin: 0;
}

legend {
  background: var(--surface);
}

.field-row {
  display: flex;
  align-items: center;
}

[class^="field-row"] + [class^="field-row"] {
  margin-top: var(--grouped-element-spacing);
}



.field-row-stacked {
  display: flex;
  flex-direction: column;
}



label {
  display: inline-flex;
  align-items: center;
}



input[type="radio"] + label,
input[type="checkbox"] + label {
  line-height: 13px;
}

input[type="radio"] + label {
  position: relative;
  margin-left: var(--radio-total-width);
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--radio-total-width-precalc)));
  display: inline-block;
  width: var(--radio-width);
  height: var(--radio-width);
  margin-right: var(--radio-label-spacing);
  background: svg-load("icon/radio-border.svg");
}

input[type="radio"]:active + label::before {
  background: svg-load("icon/radio-border-disabled.svg");
}

input[type="radio"]:checked + label::after {
  content: "";
  display: block;
  width: var(--radio-dot-width);
  height: var(--radio-dot-width);
  top: var(--radio-dot-top);
  left: var(--radio-dot-left);
  position: absolute;
  background: svg-load("icon/radio-dot.svg");
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
  outline: 1px dotted #000000;
}

input[type="radio"][disabled] + label::before {
  background: svg-load("icon/radio-border-disabled.svg");
}

input[type="radio"][disabled]:checked + label::after {
  background: svg-load("icon/radio-dot-disabled.svg");
}

input[type="checkbox"] + label {
  position: relative;
  margin-left: var(--checkbox-total-width);
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--checkbox-total-width-precalc)));
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  margin-right: var(--radio-label-spacing);
}

input[type="checkbox"]:active + label::before {
  background: var(--surface);
}

input[type="checkbox"]:checked + label::after {
  content: "";
  display: block;
  width: var(--checkmark-width);
  height: var(--checkmark-width);
  position: absolute;
  top: var(--checkmark-top);
  left: calc(
    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
  );
  background: svg-load("icon/checkmark.svg");
}

input[type="checkbox"][disabled] + label::before {
  background: var(--surface);
}

input[type="checkbox"][disabled]:checked + label::after {
  background: svg-load("icon/checkmark-disabled.svg");
}









select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding-right: 32px;
  background-image: svg-load("icon/button-down.svg");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  border-radius: 0;
}



input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}















.is-vertical {
  display: inline-block;
  width: 4px;
  height: 150px;
  transform: translateY(50%);
}















select:focus {
  color: var(--button-highlight);
  background-color: var(--dialog-blue);
}
select:focus option {
  color: #000;
  background-color: #fff;
}

select:active {
  background-image: svg-load("icon/button-down-active.svg");
}



a:focus {

}



ul.tree-view li {
  list-style-type: none;
}

ul.tree-view a {
  text-decoration: none;
  color: #000;
}

ul.tree-view a:focus {
  background-color: var(--dialog-blue);
  color: var(--button-highlight);
}


ul.tree-view ul {
  
padding: 0;
   
  /* Goes down too far */

    position: absolute;
   
    box-sizing: border-box;
    top: 25%;
    left: 7%;
}

ul.tree-view ul > li {
  position: relative;
}
ul.tree-view ul > li::before {

}

/* Cover the bottom of the left dotted border */
ul.tree-view ul > li:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: -15px;
  top: 0px;
    height: 12px;
border-bottom: 1px dotted #808080;
   border-left: 1px dotted #808080;
  width: 10px;
   
   
 
}

ul.tree-view details {
  margin-top: 0;
}

ul.tree-view details[open] summary {
  margin-bottom: 0;
}

ul.tree-view ul details > summary:before {
  margin-left: 0px;
  position: relative;
  z-index: 1;
}

ul.tree-view details > summary:before {
  text-align: center;
  display: block;
  float: left;
  content: "+";
  border: 1px solid #808080;
  width: 8px;
  height: 9px;
margin-top: 2px;
  line-height: 8px;
margin-right: 7px;

  padding-left: 1px;
  background-color: #fff;
    
}

ul.tree-view details[open] > summary:before {
  content: "-";
}

pre {
  display: block;
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 12px 8px;
  margin: 0;
}



summary:focus {
  outline: 1px dotted #000000;
}

::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: var(--button-face);
}

::-webkit-scrollbar-track {
  background-image: svg-load("icon/scrollbar-background.svg");
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-face);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: svg-load("icon/button-up.svg");
}
::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: svg-load("icon/button-down.svg");
}
::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-image: svg-load("icon/button-left.svg");
}
::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-image: svg-load("icon/button-right.svg");
}




   
.poop1 {
    left: 2.5%;
}

.poop2 {
     left: 50%;
    transform: translate(-50%, 0);
}

.poop3 {
    right: 2.5%;
}

.contact {
   
    position: absolute;
    box-sizing: border-box;
    bottom: 10%;
    margin: 0;
    left: 5%;
       font-weight: 400;
    font-size: 1em;
   font-family: 'roboto', monospace;
}

.anus {
     
width: 46%;
height: 40%;
    position: absolute;
    box-sizing: border-box;
top: 15%; 
    left: 2.5%;
 
    background-color: white;
	 color: black;
    box-shadow: inset -2px -2px  #dfdfdf, 
    inset 2px 2px #808080;
    overflow-y: hidden;
        font-size: .85em;
    line-height: 1.5em;
     font-family: 'Courier Prime', monospace;

    
}