/* FOR GUIDES AND REFERENCES WITH MINIMAL STYLING */
@font-face {
    font-family: 'Philosopher';
    src: url(fonts/Philosopher-Regular.ttf) format('truetype');
}
body, body:has(#dark:checked) {
    --text: rgb(255,235,185);
    --bg2: rgb(45,35,70);
    --bg: rgb(30,25,40);
    --bgimg: url('assets/dotspace.webp');
    --acc: orange;
    --head: orange;
    --acc2: rgb(255,225,100);
    --link: 155, 100, 255;
    --shadow: #5d3e94;}
body:has(#light:checked) {
    --text: rgb(55, 20, 55);
    --bg: thistle;
    --bg2: #c9b2d6;
    --bgimg: linear-gradient(to bottom, #e35198, #f78978, #c4d963, #1ab8c1, #8473f3, #b562c4);
    --acc: #7A1FB7;
    --head: indigo;
    --acc2: white;
    --link: 90, 0, 210;
    --shadow: #a572d5;
    
   
    background-attachment: fixed;

    label:hover input, input:focus, input:checked:focus {
        border: 1px solid var(--acc2);}
    select {
        color-scheme: light;}
}
::selection {
    background: rgb(var(--link),0.7);
    color: beige;}
body {
    border: 3px double var(--acc);
    border-style: none double;
    padding: 1rem 5vw;
    background: url('assets/peristars.webp'), var(--bgimg);
    background-blend-mode: soft-light;
    box-shadow: 0px 0px 0 50vw var(--bg) inset;}
h1, h2, h3, h4, h5, h6 {
    color: var(--head);
    font-family: 'Philosopher';
    padding: 0.2em 0;
    margin-top: 1em;
     margin-bottom: 0;}
h1 {
    border-bottom: 3px double var(--head);
    padding: 0.1em 0;
    text-shadow: 2px 2px 0px var(--shadow);
    font-size: 2.5rem;
    margin: 0.4em -1vw 0;
    line-height: 1em;}
h2 {
    width: fit-content;
    border-bottom: 3px double var(--head);
    padding: 0.2em 0;
    margin-top: 2rem;
    margin-bottom: 0;
    font-size: 1.8rem;}
h3 {
    text-decoration: underline;
    font-size: 1.6rem;}
h4 {
    text-decoration: underline;
    font-size: 1.4rem;}

nav h2 {
    display: inline-block;
    margin-right: 0.5em;
    margin-top: 0.5em;}

em, i, b, strong {
    color: var(--acc);}
i {
    padding-right: 0.15em;}
a {
    color: rgb(var(--link));
    padding: 0 0.3rem;}
a:hover, a:focus {
    color: var(--acc2);
    text-shadow: 0px 0px 5px var(--acc);
    border-left: 1px solid var(--acc);
    background: rgb(var(--link),0.3);}
a:focus {
    border: 1px solid var(--acc2);
    outline: 1px solid var(--acc);
    outline-offset: 1px;}
label, summary, button, select {
    display: inline-block;
    border: 1px solid var(--acc);
    border-left: 3px double var(--acc);
    margin: auto 0.2em;
    color: var(--acc);
    background: var(--bg2);}
input {
    outline: 1px solid var(--acc);
    margin: 0.2rem;
    margin-right: 0.4rem;
    border-radius: 0px;
    transform: rotate(45deg);
    height: 0.4rem;
    width: 0.4rem;}
label:hover, label:has(input:focus), button:hover, button:focus, select:hover, select:focus, summary:hover, summary:focus {
    border-color: var(--acc2);
    border-left: 3px solid var(--acc);
    outline: 1px solid var(--acc);
    outline-offset: 1px;
    color: var(--acc2);
    background: rgb(var(--link),0.4);
    text-shadow: 0px 0px 5px var(--acc);}
label:hover input, input:focus, input:checked:focus {
    border: 1px solid var(--acc);
    outline: 1px solid var(--acc2);
    background: var(--acc2);}
input:checked {
    border: 1px solid var(--acc);
    background: var(--acc);}
label:has(input:checked) {
    border-left: 3px solid var(--acc);}
fieldset {
   display: inline-block;
    padding: 3px 6px 9px;
    margin-bottom: 0;
    margin-right: 0.4rem;
    border: 1px solid rgb(var(--link),0.5);
    color: var(--acc);}

summary {
    color: var(--text);}
details {
    margin-top: 1em;}
details[open] {
    border-left: 2px solid rgb(var(--link),0.5);
    padding-left: 1vw;}
summary:after {
    content: '+';
    color: var(--acc);
    margin-left: 0.3em;}
details[open] summary:after {
    content: '-';}

pre, .note, .ex {
    background: var(--bg2);
    border: 1px solid var(--bg);
    border-left: 3px double var(--acc);
    border-right: 3px double var(--bg);
    padding: 0.7em 1em;}
pre:hover, .note:hover, .ex:hover {
    border-left: 3px solid var(--acc);}

code {
    color: var(--acc);}
pre code {
    color: var(--text);}
table code {
    display: inline-block;
    color: var(--text);
    background: var(--bg2);
    border: 1px solid var(--bg);
    border-left: 3px double var(--acc);
    border-right: 3px double var(--bg);
    padding: 0.5em 0.8em;}
table {
    border-color: var(--acc);
    border-width: 1px 3px;
    border-style: solid double;
    background: var(--bg);}
table:hover {
    border-style: solid;}
th {
    background: var(--bg2);
    text-align: right;
    font-size: 1.2rem;}
td, th {
    padding: 0.5em;}
th {
    border-bottom: 1px solid var(--acc);
    border-right: 1px solid var(--acc)}
td {
    border-bottom: 1px solid rgb(var(--link), 0.7);
    border-right: 1px solid rgb(var(--link), 0.7);}
tr:last-of-type td, tr:last-of-type th {
    border-bottom: none;}
tr td:last-of-type, tr:first-of-type th:last-of-type {
    border-right: none;}
tr:first-of-type th {
    padding-left: 1rem;
    text-align: left;
    border-bottom: 3px double var(--acc);}
tr th:first-of-type {
    border-right: 3px double var(--acc);}


table caption {
    margin: 1em 0 0.5em;}

ul {
    margin: 0.5rem 0.5rem 0;}
li::marker {
    content: '» '; 
    color: var(--acc);}
footer {
    border: none;
    height: 20px;
    box-shadow: 0px 0px 0px 9px var(--bg) inset, 0px 0px 0px 9px var(--bg) inset, 0px 0px 0px 9px var(--bg) inset, 0px 0px 0px 9px var(--bg) inset;
    background: transparent;
    background-image: linear-gradient(to right, var(--acc), var(--acc), transparent, var(--acc), var(--acc));
    overflow: visible;
    text-align: center;
    margin: 1.5rem -9px;}
footer:before {
    content: ' ✧ ✧ ✧ ';
    color: var(--acc);}
footer:hover:before { 
    content: ' ✦ ✦ ✦ ';
    color: var(--acc);}
.note, .ex {
    border: 1px solid var(--acc);
       border-left: 3px double var(--acc);
    margin-top: 0.5rem;
    vertical-align: top;}