/*bones*/

* {
 box-sizing: border-box;
 margin: 0;
 border: 0;
 padding: 0;
 outline: 0;
 color: var(--font-color);
 font-weight: normal;
 font-size: clamp(17px, 2vh, 12pt);
 line-height: 1.5;
 text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
 cursor: default;
}

html { -webkit-text-size-adjust: 100%; }

body {
 min-width: 100vw;
 min-height: 100vh;
 background-color: var(--body-background-color);
 font-family: var(--theme-font-primary), var(--theme-font-secondary), var(--theme-font-tertiary), var(--theme-font-tertiary), sans-serif;
 overflow-x: hidden;
}

#body {
 display: grid;
 grid-template-columns: 1fr;
 grid-gap: 2rem;
 margin: 7vw auto;
 width: 85vw;
 max-width: var(--style-maximum-width);
 min-width: var(--style-minimum-width);
}

#logo {
 display: block;
 margin: 0 auto;
 width: 85%;
}

h1,h2,h3,h4,h5 {
 color: var(--theme-color-primary);
 text-align: var(--header-align);
 font-weight: var(--header-weight);
}
h1 {
 text-align: var(--title-align);
 font-weight: var(--title-weight);
 font-size: 2.5rem;
 line-height: 1;
}
h2 {
 font-size: 1.75rem;
 border-bottom: var(--theme-lines) solid var(--theme-color-primary);
}
h3 {
 font-size: 1.5rem;
 border-bottom: var(--theme-lines) solid var(--theme-color-secondary);
}
h4 { font-size: 1.33rem }
h5 { font-size: 1.2rem }
h6 { font-size: 1rem }

li, p { padding: 0 0 0.5rem }
li, p, a, label, strong, input {
 font-size: 1rem;
 font-family: var(--theme-font-secondary);
 text-indent: initial;
}
span {
 font-family: inherit;
 font-size: inherit;
}
.fa-regular, .fa-brands, .fa-solid {
 font-size: inherit;
 position: relative;
 top: calc(.1rem - 1px);
 color: inherit;
 text-indent: 0;
}

hr {
 height: 2px;
 margin: 0 0 0.5rem;
 background: var(--theme-color-primary)
}

hr.break { height: 0 }

div.box, div.clearbox { padding: var(--box-padding) }

div.box {
 border-radius: var(--box-radius);
 background-color: var(--box-background-color);
}

.brightbox { background: var(--theme-color-primary) }
.darkbox { background: var(--theme-color-dark) }
.brightbox, .darkbox {
 margin-bottom: 1rem;
 padding: 0.5rem 1rem;
 border-radius: 0.5rem;
}
div.darkbox, div.brightbox {
 margin-top: 0.5rem;
}

ul { list-style: none }
ul li::before {
  content: "⬤";
  margin-right: 1ch;
  font-size: .5em;
  position: relative;
  top: -3.5px;
  color: var(--theme-color-primary);
}
ul.star li::before {
  content: '✦';
  font-size: .75em;
}
ul.square li::before {
 content: "▪";
 font-size: .75em;
}
ul.dash li::before {
 content: "-";
 font-size: 1em;
 font-weight: 900;
}
ul.nobullet li::before {
 content: "";
 margin-right: 0;
}
ul, ol {
 padding-bottom: 0.5em;
 list-style-position: inside;
}
ol ol {
 padding-bottom: 0;
 list-style-type: upper-alpha;
}
ol ol ol { list-style-type: lower-roman }
ul.outside { list-style-position: outside !important }
ul.noindent, ul.noindent li {
 padding-left: 0;
 margin-left: 0;
}
 
ol li {
 padding-left: 1.2em;
 text-indent: -1.2em;
}
ol.readability li, ul li.readability { min-width: 45ch }
ul li {
 padding-left: 1.2em;
 text-indent: -1em;
}
ul.readability li, ul li.readability { min-width: 45ch }
ul.nobullet li {
 padding-left: 0em;
 text-indent: 0em;
}
li::marker {
 color: var(--theme-color-primary);
 font-weight: bold;
}
li:first-child { padding-top: 0.5rem }
li:last-child { padding-bottom: 0 }

blockquote, .code {
 display: inline-block;
 margin: .25rem 0 0;
 padding: .2rem .4rem;
 color: var(--theme-color-secondary);
 font-family: Consolas, Inconsolata, Monaco, monospace;
 font-size: .9em;
 text-indent: initial;
}
blockquote {
 display: inline-flex;
}
blockquote.code {
 display: flex;
 text-decoration: none;
 margin: .5rem 0;
 border: 0;
}
blockquote.code:before {
 content: "$";
}
blockquote:before {
 margin-right: 1rem;
 font-weight: bold;
 color: var(--theme-color-primary);
 text-transform: capitalize;
 content: attr(data-name) ": ";
}

table:first-child { width: 100%; }

a, .link {
 color: var(--theme-color-secondary);
 font-weight: bold;
 text-decoration: none;
 border-bottom: var(--theme-lines) solid var(--theme-color-secondary);
}
a:hover, a.selected {
 color: var(--theme-color-bright);
 border-bottom: var(--theme-lines) solid var(--theme-color-bright);
}
a.logo {
 margin: 0;
 border: 0 !important;
 padding: 0;
 text-decoration: none;
}

strong, .bold { font-weight: bold }

label {
 display: inline-block;
 padding-right: 1vw;
}

input, button, select, option {
 font-family: var(--theme-font-monospace);
 line-height: 1.5;
 padding: .3rem .5rem;
 border: var(--theme-lines) solid var(--theme-color-primary);
 color: var(--theme-color-secondary);
}

.flex {
 display: flex;
 gap: 1rem;
 justify-content: space-evenly;
}
.flex-wrap {
 flex-wrap: wrap;
 justify-content: space-evenly;
}

.flex-item { flex: 1 }

.fifths .flex-item { width: calc(20% - 1rem) }

.display-block, .break { display: block }
.display-inline, .nobreak { display: inline-block }
.display-none, .hide { display: none !important }

.float-left, .fleft { float: left }
.float-right, .fright { float: right }

.height-none { height: 0 }
.height-half { height: 0.5rem }
.height-normal { height: 1rem }
.height-double { height: 2rem }

.margin-none { margin: 0 }
.margin-thin { margin: 0.1vw }
.margin-light { margin: 0.5vw }
.margin-normal { margin: 1vw }
.margin-heavy { margin: 1.5vw }
.margin-thick { margin: 2vw }
.margin-massive { margin: 3vw }
.margin-auto, .centered {
 margin-left: auto;
 margin-right: auto;
}

.border-none { border-width: 0 !important }
.border-thin { border-width: 0.1vw }
.border-light { border-width: 0.2vw }
.border-normal { border-width: 0.3vw }
.border-heavy { border-width: 0.5vw }
.border-thick { border-width: 1vw }
.border-massive { border-width: 2vw }

.padding-none { padding: 0 !important }
.padding-thin { padding: 0.1vw }
.padding-light { padding: 0.5vw }
.padding-normal { padding: 1vw }
.padding-heavy { padding: 1.5vw }
.padding-thick { padding: 2vw }
.padding-massive { padding: 3vw }

.padding-sides-none { padding-left: 0 !important; padding-right: 0 !important; }
.padding-sides-thin { padding-left: 0.1vw; padding-right: 0.1vw; }
.padding-sides-light { padding-left: 0.5vw; padding-right: 0.5vw; }
.padding-sides-normal { padding-left: 1vw; padding-right: 1vw; }
.padding-sides-heavy { padding-left: 1.5vw; padding-right: 1.5vw; }
.padding-sides-thick { padding-left: 2vw; padding-right: 2vw; }
.padding-sides-massive { padding-left: 3vw; padding-right: 3vw; }

.padding-bottom-none { padding-bottom: 0 !important }
.padding-bottom-thin { padding-bottom: 0.1rem !important }
.padding-bottom-light { padding-bottom: 0.5rem !important }
.padding-bottom-normal { padding-bottom: 1rem !important }
.padding-bottom-heavy { padding-bottom: 1.5rem !important }
.padding-bottom-thick { padding-bottom: 2rem !important }
.padding-bottom-massive { padding-bottom: 3rem !important }

.round-none { border-radius: 0 }
.round-thin { border-radius: .5vw }
.round-light { border-radius: 1vw }
.round-normal { border-radius: 2vw }
.round-circle, .circle { border-radius: 20vw }

.text-break { white-space: normal }
.text-nowrap, .nowrap { white-space: nowrap }
.text-center, .tcenter { text-align: center }
.text-justify, .tjustify { text-align: justify }
.text-left, .tleft { text-align: left }
.text-right, .tright { text-align: right }
.text-uppercase { text-transform: uppercase }
.text-lowercase { text-transform: lowercase }
.text-capitalize { text-transform: capitalize }
.text-underline, .underline { text-decoration: underline }

.text-black, .black { color: black }

.font-xxxsmall { font-size: .3rem !important }
.font-xxsmall { font-size: .4rem !important }
.font-xsmall { font-size: .5rem !important }
.font-small, .font-small * { font-size: .75rem !important }
.font-normal { font-size: 1rem !important }
.font-big { font-size: 1.5rem !important }
.font-large { font-size: 2rem !important }
.font-xlarge { font-size: 3rem !important }
.font-xxlarge { font-size: 4rem !important }
.font-size-inherit { font-size: inherit !important }

.font-thin { font-weight: 300 }
.font-normal { font-weight: 400 }
.font-bold { font-weight: 600 }
.font-bolder { font-weight: 700 }
.font-thick { font-weight: 900 }

.font-verdana, .font-verdana * { font-family: verdana !important }
.font-opensans, .font-opensans * { font-family: open sans !important }

.ucfirst { text-transform: capitalize }

sup, sub, .super, .exponent {
 font-size: 0.8em;
 vertical-align: top;
}
sub { vertical-align: sub }

.highlight, strong { color: var(--theme-color-bright) }
.highlight-dark { color: var(--theme-color-dark) }
.color-red { color: #C10 }

.link, .link:hover { cursor: pointer }

.error, .failure, .red { color: #A30 }
.success, .green { color: #0A3 }

@media only screen and (max-width: 430px) {

#body {
 width: 100%;
 min-width: 200px;
}

div.box {
 border-left: 0;
 border-right: 0;
 border-radius: 0;
}

}