:root {
    --themebg: url('https://dillpistachio.neocities.org/img/bgtile.png');
    --themecolor: #02cf02;
}

body {
    font-family: 'PixelOperator';
    font-size: 20px;
    margin: 0 auto;
    background-color: #08031A;
    background-size: 70px;
    color: var(--themecolor);
    background-image: var(--themebg);
    max-width: 1100px;
}

* {
    box-sizing: border-box;
    cursor: url('https://dillpistachio.neocities.org/cursor.png'), auto;
}

a {
    color: var(--themecolor);
}

img, img.icon {
    object-fit: contain;
    margin: 0 auto;
}

img.icon {
  margin: 5px 5px 0 5px;
  border-bottom: 2px dashed var(--themecolor);
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-image: var(--themebg);
  color: var(--themecolor);
  text-align: center;
  padding: 2px 5px 5px 5px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 13px;
  margin-left: -60px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--themecolor);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--themecolor) transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.hidlnk {
    text-decoration: none;
    font-weight: normal;
}

.hidlnk:hover {
    text-decoration: underline;
}

#flex {
    display: flex;
}

.sectionConL {
    width: 75%;
    padding-right: 5px;
}

.sectionConR {
    width: 25%;
    padding-left: 5px;
    height: 100%;
    position: sticky;
    overflow: auto;
    top: 15px;
}

.PsectionConL {
    width: 70%;
    padding-right: 5px;
}

.PsectionConR {
    width: 30%;
    padding-left: 5px;
    height: 100%;
    position: sticky;
    overflow: auto;
    top: 15px;
}

footer {
    width: 100%;
    height: 40px;
    text-align: center;
    padding: 8px;
}

h1,
h2,
h3 {
    color: var(--themecolor);
    margin: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

hr {
    color: var(--themecolor);
    margin: 10px 0 10px 0;
    padding: 0;
}

ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: '» ';
}

li {
    margin: 5px 0 5px 0;
}

fieldset {
    border: 1px solid var(--themecolor);
    padding: 5px 10px 10px 10px;
    margin-bottom: 10px;
}

legend {
    padding: 0 10px 0 10px;
    margin: -5px;
}

p, p.blurb{
    padding: 0;
    margin: 0 5px 5px 5px;
}

p.blurb {
    max-width: 250px;
}

textarea {
    color: var(--themecolor);
    border: 1px solid var(--themecolor);
    background-image: var(--themebg);
}

summary {
    list-style-type: '> ';
}

details[open] > summary {
  list-style-type: '↓ ';
}

table.check, tr.check, td.check {
    border: 1px solid var(--themecolor);
    border-collapse: collapse;
    padding: 5px 8px 5px 8px;
    margin: 10px auto 10px auto;
    text-align: center;
}

div.hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 160px;
  scrollbar-color: var(--themecolor) transparent;
  scrollbar-width: thin;
}

div.hscroll a {
  display: inline;
  text-align: center;
  padding: 14px;
}

div.vscroll {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100px;
  max-width: 219px;
  scrollbar-color: var(--themecolor) transparent;
  scrollbar-width: thin;
}

div.vscroll a {
  display: inline;
  text-align: center;
}

.noarrow {
    list-style: none;
}

.firstchild {
    padding-left: 15px;
    margin: 0;
}

.secondchild {
    padding-left: 30px;
    margin: 0;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? by default, the container width is 900px.
in order to keep things responsive, take your new height, and then subtrack it by 100.
use this new number as the "max-width" value below */
@media only screen and (max-width: 1000px) {
  #flex {
     flex-wrap: wrap;
  }
  
  /* the order of the items is adjusted here for responsiveness! */
  main {
      order: 1;
  }
}