/* style.css */

/* Resets */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

a  {
    text-decoration: none;
}

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

figure {
    margin: 0;
}

/* Class react_notes */

.react_notes h3 {
    text-align: left;
    margin: 2rem auto 0.5rem 0;
    padding: 0;
}

.react_notes h4 {
    text-align: left;
    margin: 1rem auto 0.2rem 0;
    padding: 0;
    text-decoration: underline;
    font-weight: normal;
}




/* General */

:root {
    --border:rgb(243, 196, 205);
    --hr: rgb(255, 223, 229);
    --borderfill:rgb(250, 242, 243);
    --borderdark:rgb(212, 154, 165);
    --title: cadetblue;
    --thintitle:rgb(47, 123, 124);
    --code: steelblue;
    --link1: sienna;
    --link2: rgb(159, 101, 197);
    --linkhover: white;
    --flexborder: rosybrown;
    --flexbackground: rgb(252, 248, 235);
    --alert: rgb(214, 64, 64);
    --othercolor1: olive;

    --elementcolor: cadetblue;
    --attributecolor: steelblue;
    --valuecolor: rgb(206, 131, 131);
    --textcontentcolor: olive;
    --textcolor: rgb(177, 110, 110);
    --functions: rgb(189, 108, 189);

    --whatcolor: rgb(114, 69, 114);

    
    --othercolor3: rgb(223, 146, 132);
    --js-border: rgb(190, 215, 216);
    --label: rgb(147, 86, 173);

    --bumper-quarter: 4px;
    --bumper-half: 8px;
    --bumper: 16px;
    --bumper-double: 32px;
    --bumper-triple: 48px;

    --remove-bumper-quarter: -4px;
    --remove-bumper-half: -8px;
    --remove-bumper: -16px;
    --remove-bumper-double: -32px;
    --remove-bumper-triple: -48px;

}

html {
    max-width: 960px;
    margin: auto;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'Barlow', sans-serif; 
    line-height: 1.4;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.simple_nav {
    margin: 1rem;
    text-align: center;
}

footer {
    text-align: center;
}

/* Fonts and alignings */

h1, h2, h3, h4, h5, h6, th {
    color: var(--title); 
    font-weight: bold;
}

h1 {
    padding: var(--bumper-quarter);
    border: 0.5rem double var(--border);
    border-radius: 20px;
    text-align: center;
}

h2, h3 {
    padding: var(--bumper);
    text-align: center;
}


.titleBox {
    margin: var(--bumper-triple) 0 var(--bumper);
    padding: var(--bumper-quarter);
    border: 0.5rem double var(--border);
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
}
h4 {
    padding-top: var(--bumper);
}

h3 {font-size: 1.3rem;}

h4 {font-size: 1.2rem;}

h5 {font-size: 1.1rem;}

h6 {font-size: 1rem;}

a {
    color: var(--link2);
    font-style: italic;
}

a h1, a h2, h3 a, h4 a {
    font-style: normal;
}



.button-style1 button {
    margin: 1rem 0;
}

.index-container a {
    color: var(--link1);
    font-style: normal;
}

strong {
    color: var(--title);
    font-weight: bold;
}

hr {
    border: 7px double var(--hr);
    margin: var(--bumper-double) auto var(--bumper);
    height: 1rem;
    max-width: 95%;
}

.hr-soft {
    border-left: none;
    border-right: none;
    border-bottom: none;    
}

table {
    margin: var(--bumper) 0;
    text-align: left;
}



aside {
    width: 30%;
    float: right;
    color: steelblue;
    border-left: 1px solid steelblue;
    padding-left: 0.5rem;
}

aside p {
    margin: 0;
}

th, td {
    padding-right: var(--bumper);
}

dt {
    font-weight: bold;
    color: var(--title);
    margin: 1rem 0 0;
}

dd {
    margin-inline-start: var(--bumper-double);
}

.img {
    display: block;
    margin: 40px auto;
    width: 300px;
    height: auto;
}

figcaption {
    margin: 0.25rem 0;
}

pre {
    /* white-space: pre-wrap;
    word-break: keep-all; */
    margin: 0;
    font-family: 'Fira Mono', monospace;   
}

.tab {
    margin-left: 1.5rem;
}

.tab2 {
    margin-left: 3rem;
}

.tab3 {
    margin-left: 4.5rem;
}

.tab4 {
    margin-left: 6rem;
}

.alert {
    color: var(--alert);
    font-weight: bold;
}

h3 code, h4 code, h5 code, h6 code {
    text-decoration: none;
    color: var(--title);
    padding: var(--bumper-quarter) var(--bumper-quarter) 1px;
    border: 1px solid var(--title);
    border-radius: var(--bumper-quarter);
}

.formula {
    display: inline-block;
    color: var(--title);
    padding: var(--bumper-quarter) var(--bumper);
    border: 3px solid var(--border);
    border-radius: var(--bumper-half);
    margin: var(--bumper) 0 0 var(--bumper);
    font-weight: bold;
    font-size: 0.9rem;
}

.formula-thin {
    display: inline-block;
    color: var(--title);
    padding: var(--bumper-quarter) var(--bumper);
    border: 2px solid moccasin;
    border-radius: var(--bumper-half);
    margin: 0 0 0 var(--bumper-quarter);
    font-weight: normal;
    font-size: 0.9rem;
}

.formula code {
    color: inherit;
}

.plain {
    padding: 0;
    margin: 0;
}

.indent {
    padding-left: 32px;
}

.formula .parameter {
    color: var(--whatcolor);
    font-weight: normal;
}

p code,
li code,
table code {
    padding: 0 var(--bumper-quarter);
}

.text-decoration-none {
    text-decoration: none;
}

.weaker {
    font-weight: normal;
}

/* JS notes */

.js-notes input:disabled,
input[disabled]{
    border-color: rgb(210, 210, 210);
    color: rgb(173, 171, 171);
}

.js-notes details {
    color: var(--code);
}
.js-notes details summary {
    color: var(--title);
    font-weight: bold;
}

.js-notes details + details {
    margin-top: 1rem;
}

.js-notes table {
    border-spacing: 1rem 0;
}

.js-notes .calendar {
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--border);
    border-radius: 5px;
    margin: 0.5rem;

    color: cadetblue; 
    font-size: 1.3rem; 
    font-weight: bold; 
    display: inline-block;
}
/* 
.js-notes th {
    font-weight: normal;
} */

.js-notes .type {
    color: var(--valuecolor);
    font-weight: bold;
}
.js-notes i {
    color: inherit;
}

.js-notes .codeblock {
    color: gray;
}

.js-notes .js-codebox button {
    margin: 0.5rem;
}

.js-notes dd + dt {
    margin-top: 1.5rem;
}

.js-notes dt + dt {
    margin-top: 0;
}

.js-notes h2 + h3 {
    padding-top: 0;
    margin-top: -1rem;
}

.js-notes ol {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.js-notes .comment {
    color: var(--code);
    font-weight: normal;
}

.js-notes .formula .thin {
    font-weight: normal;
}

.js-notes dd + dd {
    margin-top: 0.5rem;
}

.js-notes dd .js-codebox {
    margin-top: 0.5rem;
}
/* .js-notes dd .js-codebox {
    margin-top: 0;
} */

.js-notes ul {
    margin-top: 0;
}

.js-notes dl>dd>ul {
    padding-left: 1rem;
}

.functions {
    color: var(--functions);
    font-weight: bold;
}

.functions2 {
    color: var(--borderdark);
    font-weight: bold;
}

.js-notes b {
    color: rgb(114, 167, 169);
}
/* || CSS Grid */

.gridDefault {
    display: grid;
    border: 0.25rem solid plum;
}

.gridDefault div {
    border: 0.25rem solid peachpuff;
}

.js-notes kbd {
    border: 1px solid var(--titlesc);
}

.js-notes .formula ul {
    margin-bottom: 0;
}

/* || Glossary */

.glossary {
    margin: var(--bumper-half);
}

.glossary h3 {
    text-align: left;
    padding: 0;
    margin: var(--bumper) 0;
    color: var(--border);
}

.glossary div {
    display: flex;
    align-items: baseline;
}

.glossary div h3 {
    flex: 0 0 30px;
    border: 2px solid var(--border);
    border-radius: 5px;
    text-align: center;
    margin-right: var(--bumper);
}

.glossary div dl {
    flex: 1;
}

#abcBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: var(--bumper-half);
    margin-top: var(--bumper-half);
}

#abcBar a {
    width: 30px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 5px;
    text-align: center;
    color: var(--border); 
    background-color: white;
    font-size: 1.3rem;
    line-height: inherit;
    font-weight: bold;
    font-style: normal;
}

#abcBar a:hover {
    background-color: var(--border);
    color: white;
}

/* || Section Bar */

#sectionBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: var(--bumper-half);
    margin-top: var(--bumper-half);
}

#sectionBar input {
    color: var(--title); 
    border: 3px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    padding: var(--bumper-quarter) var(--bumper-half);
    margin-bottom: var(--bumper);
}

#sectionBar .on {
    background-color: var(--borderfill);
}

#sectionBar .off {
    background-color: white;

}

/* || Coding Font */ 

code,
.js-codebox,
.html-codebox {
    color:var(--code);
}

code,
kbd, 
samp,
.js-codebox,
.js-resultbox,
.css-codebox,
.html-codebox,
.code {
    font-family: 'Fira Mono', monospace;   
}

code,
kbd, 
samp,
.js-codebox,
.js-resultbox,
.css-codebox,
.html-codebox
.code {
    font-size: 0.9rem;
}

.js-codebox strong,
.html-codebox strong {
    color: var(--whatcolor);
}

.js-codebox+.js-codebox {
    margin-top: var(--bumper-double);
}

h3 + ul,
h4 + ul {
    margin-top: 0;
}

p + ul,
p + ol {
    margin-top: var(--remove-bumper);
}

h3 + h4 {
    margin-top: var(--bumper);
}

ul + div,
ol + div {
    margin-top: var(--remove-bumper-double);

}

code a {
    font-style: normal;
}

.code2 {
    color: var(--othercolor3);
    background-color: var(--flexbackground);
}

.js-resultbox h6 {
    text-decoration: none;
    margin: 1rem 0;
}
.toggle {
    display: none;
}

/* || display bar */

.displaybar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: var(--bumper) auto;
    justify-content: center;
}

.displaybar input {
    border: 3px solid var(--border);
    padding: var(--bumper-quarter) var(--bumper);
    font-size: 0.9rem;
}

.displaybar .off {
    color: var(--title);
    background-color: white;
}


.displaybar .on {
    color: var(--title);
    background-color: var(--borderfill);
}
/* || HTML-Notes: Forms  and html-form-notes*/

.html-form-notes dd .formula {
    margin-bottom: 0.5rem;
}

.html-form-notes dd ul input {
    color: black;
    background-color: white;
    font-weight: normal;
    border: 1px solid var(--title);
    margin: 0;
}

.html-form-notes input[type="reset" i],
.html-form-notes input[type="button" i],
.html-form-notes input[type="submit" i],
.html-form-notes input[type="image" i] {
    appearance: auto;
    user-select: none;
    cursor: default; 
    border: 2px outset;
    background-color: whitesmoke;
}


.html-form-notes input[type="reset" i]:hover,
.html-form-notes input[type="button" i]:hover,
.html-form-notes input[type="submit" i]:hover,
.html-form-notes input[type="image" i]:hover {
    background-color: white;
    border-style: inset;
}

.html-form-notes textarea:invalid {
    color: indianred;
}

.html-form-notes textarea:valid {
    color: olivedrab;
}

.html-form-notes pre > code {
    padding: 0;
}

.html-form-notes .styled-select optgroup {
    color: var(--code);
    background-color: lightgoldenrodyellow;
    font-weight: bold;
}
.html-form-notes .styled-select option {
    color: var(--code);
    background-color: lightyellow;
}
.html-form-notes .model {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--title);
    line-height: 2rem;
    margin: 0;
    padding-right: 2rem;
}

.html-form-notes .fit {
    width: fit-content;

}
.html-form-notes .model a {
    color: inherit;
    font-style: normal;
    text-decoration: underline;
}

.html-form-notes b {
    color: rgb(185, 117, 185);
    font-weight: bold;
    font-style: normal;
}

.html-form-notes .subtitle,
.html-form-notes .mock-h2 .subtitle
 {
    margin-top: -0.5rem;
    color: var(--title);
    font-weight: bold;
}

.html-form-notes .subtitle code {
    color: inherit;
}

.html-form-notes .h2-level2 {
    margin-top: -1.5rem;
    margin-left: 3rem;
}

.html-form-notes .h2-level2 + .subtitle {
    margin-left: 3rem;
}

.html-form-notes .h2-level3 {
    margin-top: -1.5rem;
    margin-left: 6rem;
}

.html-form-notes .h2-level3 + .subtitle {
    margin-left: 6rem;
}

.html-form-notes h2 + .subtitle + dl {
    margin-top: 1.5rem;
}

.html-form-notes article > dl > dd > ul {
    padding-left: 1rem;
}

.html-form-notes > article > dl > dt {
    margin: 1rem 0 0.5rem;
}

.html-form-notes .figcode {
    margin-bottom: 1.5rem;
}

.html-notes input {
    margin: 0 0 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--title);
    border-radius: 0.25rem;
    background-color: rgb(255, 255, 248);
    font-weight: bold;    
}

.html-notes label {
    font-weight: normal;
    padding: 0;
    color: black;
}

.highlight {
    background-color: lightyellow;
    border: 1px solid cadetblue;
}

.html-notes figure div {
    margin: 0.5rem 0;
}

.bulletless > li{
    margin-left: -1rem;
}

.bulletless li{
    list-style-type: none;
}


.html-notes .fieldset1 {
    width: fit-content;
    border: 2px solid var(--borderdark);
    border-radius: 0.3rem;
}

.html-notes .fieldset1 > legend {
    background-color: var(--borderdark);
    border-radius: 0.3rem;
    font-weight: bold;
    color: white;
    padding: 0.1rem 0.5rem;
}

.html-notes .fieldset1 >input {
    margin: 0.5rem;
}

.html-notes .fieldset1 > label {
    padding-right: 1rem;
    color: var(--code);
}

/* || General: Form */

.parForm {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border);
}

label {
    padding: var(--bumper) 0;
    font-weight: bold;
    color: var(--title);
}

input,
.button-style1 button {
    border: 3px solid var(--js-border);
    border-radius: 10px;
    padding: var(--bumper-half) var(--bumper);
    background-color: whitesmoke;
    font-weight: bold;
    color: var(--title);
}

form input {
    margin: 0.5rem auto;
}

input.valid {
    color: var(--title);
    border-color: var(--title);
}

input.invalid {
    color:orange;
    border-color: orange;
}

input + p {
    font-weight: bold;
    font-size: 0.8rem;
    margin: 0 10px;
    color: orange;
    opacity: 0;
    height: 0;
}
input.invalid + p {
    opacity: 1;
    height:auto;
    margin-bottom: 20px;
}

/* || HTML-Notes: Nav */

.html-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    list-style-type: none;
    padding-left: 0;
}

.html-nav ul li {
    color: var(--title);
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0 5px;
    border: 2px solid var(--border);
    border-radius: 5px;
    white-space:nowrap;
}

.html-nav ul li:hover {
    background-color: var(--borderfill);
}

.html-nav ul li a {
    color: inherit;
    font-style: normal;
}

/* || Sticky nav */

.sticky-nav {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}


.sticky-nav summary {
    list-style: none;
}

.sticky-nav summary::-webkit-details-marker {
    display: none;
}

.sticky-nav details >summary:before {
    content: "\25B6";
    color: var(--border);
}

.sticky-nav details[open] > summary:before {
    content: "\25BC";
    color: var(--border);
}

.sticky-nav .html-nav ul {
    display: inline-block;
    justify-content: left;
    padding: 0;
    margin: 0;

}

.sticky-nav .html-nav ul li {
    width: fit-content;
    color: var(--title);
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0 5px;
    border: 2px solid var(--border);
    border-radius: 5px;
    white-space:nowrap;
    margin: 0.5rem 0;
    background-color: white;
}


/* || HTML-Notes: Definitions */

.html-notes dd ul,
.html-notes dd ol {
    margin: 0; 
}

dd .formula,
dd .formula-thin {
    margin: 0;
}

.deprecated_chapter dt code {
    color: rgb(194, 172, 172);
}


dl .html-codebox {
    margin: 0.5rem 0 1rem;
}

/* || HTML-Notes: List */

.html-notes li p {
    margin: 0;
}

/* || HTML-Notes: Figure (including .figcode) */

.figcode {
    border-left: 3px solid papayawhip;
    border-top: 3px solid papayawhip;
    border-bottom: 3px solid papayawhip;
    border-right: 3px dotted papayawhip;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
}

.figinblock {
    max-width: fit-content;
    border-left: 3px solid papayawhip;
    border-top: 3px solid papayawhip;
    border-bottom: 3px solid papayawhip;
    border-right: 3px dotted papayawhip;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
}

.figcode figcaption,
.figure1 figcaption,
.figcode summary  {
    color: rgb(235, 169, 162);
    font-weight: bold;
}

.figcode figcaption code {
    font-style: normal;
    color: inherit;
}

.figcode p {
    margin: 0.5em 0;

}

.figcode pre {
    color: steelblue;
    font-size: 0.9rem;
}

.figcode li {
    font-family: 'Fira Mono', monospace;   
    margin: 0;
    font-size: 0.9rem;
}



.figcode figure + figure {
    margin-top: 1rem;
}

.figure1 figure {
    border: 3px solid peachpuff;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

.figcode hr {
    border: none;
    border-top: 2px dotted pink;
    margin: 1rem;
}

.figcode table {
    padding: 0.25rem 1rem;
    margin: 0;
}

/* || HTML-Notes: Table */



td, th {
    vertical-align: middle;
}
tbody th {
    font-weight: normal;
    background-color: rgb(255, 244, 235);
}

.coltitle {
    background-color: rgb(248, 227, 230);
}
.colclass1 {
    background-color: rgb(243, 240, 209);
}

.colclass2 {
    background-color: rgb(204, 231, 235);
}

.bottomcaption {
    caption-side: bottom;
}

.borderedtable {
    text-align: center;
    vertical-align: middle;
    border: 1px solid cadetblue;
    border-collapse: collapse;
}

.borderedtable th, 
.borderedtable td {
    border: 1px solid cadetblue;
    text-align: center;
    padding: 4px 8px;
}

.borderedtable caption {
    font-weight: bold;
    color: cadetblue;
    font-size: 1.1rem;
}

.nthtable thead {
    border-bottom: 4px double cadetblue;
}

.nthtable tbody > tr:nth-of-type(odd) {
    background-color:lightyellow;
}

.nthtable thead > tr:last-of-type > th:nth-of-type(1) {
    color: palevioletred;
}

.nthtable thead > tr:last-of-type > th:nth-of-type(2) {
    color: salmon;
}

.nthtable thead > tr:last-of-type > th:nth-of-type(3) {
    color: olive;
}

.nthtable tbody > tr > td:nth-of-type(2) {
    text-align: left;
}

#table .formula {
    margin: 0.25rem;
}

/* || HTML-Notes: Menu */

.menuexample menu {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    width: 400px;
}
  
.menuexample li {
    flex-grow: 1;
}
  
.menuexample button {
    width: 100%;
}

/* || HTML-Notes: General: boxes*/

.html-codebox{
    margin: var(--bumper);
    border-left: solid 3px mistyrose;
    padding: 0 1rem;
    word-wrap: break-word;
    font-size: 0.9rem;
}

/* || HTML-Notes: General: text blocks */

.html-notes h2 {
    text-align: left;
    text-decoration: underline;
    padding: 1rem 0 0.5rem;
    font-size: 1.3rem;
}

.html-notes h3 {
    text-align: left;
    text-decoration: underline;
    padding: 1rem 0 0.5rem;
    font-size: 1.0rem;
}

.html-notes summary {
    padding: 0.5rem 0;
}

.html-form-notes h2,
.html-form-notes h3,
.html-form-notes h4 {
    text-decoration: none;
}

.html-form-notes h2 code,
.html-form-notes h3 code,
.html-form-notes h4 code {
    border: none;
    color: var(--code);
    font-size: 1.2rem;
}

.html-form-notes .figcode > figure > figcaption {
    color: var(--title);
    font-style: none;
    font-size: 1.1rem;
    text-decoration: underline;
}

/* || Dev-notes */

.dev-notes .element {
    font-weight: inherit;
    color: inherit;
}

/* || HTML-Notes: General: inline text */

.element {
    font-weight: bold;
    color: var(--elementcolor);
}

.attribute {
    font-weight: normal;
    color: (--attributecolor);
}

.error {
    color: rgb(238, 93, 93);
    font-weight: normal;
}

.variable,
.sampledata,
.value {
    color: var(--valuecolor);
    font-weight: normal;
}

.textcontent {
    color: var(--textcontentcolor);
    font-weight: normal;
}

.text {
    color: var(--textcolor);
    font-weight: normal;
}

.maindef {
    color: cadetblue;
    font-weight: bold;
}

.topic {
    color: var(--title);
    font-weight: bold;
}

.html-notes strong,
.html-notes .alert {
    color: indianred;
}

.inlinebox {
    border: 1px solid;
    border-radius: .25rem;
    padding: 0 .25rem;
}

.deprecated {
    color: rgb(148, 128, 128);
}



i,
.keyword {
    color: var(--thintitle);
}

a[href^="mailto"]::before {
    content: "📧 ";
}

a[href^="tel"]::before {
    content: "📞 ";
}


/* || JavaScript Notes */

.js-codebox {
    margin: var(--bumper);
    border-left: solid 3px var(--js-border);
    padding: 0 var(--bumper);
    word-wrap: break-word;
}


.js-resultbox {
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: 5px;
    margin: 1rem;
}

.js-table-code-column-1 tbody tr :nth-child(1), 
.js-table-code-column-2 tbody tr :nth-child(2), 
.js-table-code-column-3 tbody tr :nth-child(3), 
.js-table-code-column-4 tbody tr :nth-child(4), 
.js-table-code-column-5 tbody tr :nth-child(5) { 
    color: var(--code);
    font-family: 'Fira Mono', monospace;   
    font-size: 0.9rem;
}

.js-table-bold-column-1 tbody tr :nth-child(1){
    font-weight: 500;
}



/* || Listing */

.list-plain {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.list-horizontal {    
    padding: 0;
    margin: 10px 0 20px;
}

.list-horizontal li {
    display: inline-block;
    width: 8rem;
}

/* || Navigation */

.nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 5px 0;
}

.nav-button:link, 
.nav-button:visited,
.nav-button-rev:link,
.nav-button-rev:visited {
    font-weight: bold;
    padding: 0.2rem 0.7rem;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    border: 3px solid var(--border);
}

.nav-button:link, 
.nav-button:visited {
    background-color: var(--border);
    color: var(--linkhover);
}

.nav-button:hover,
.nav-button:active,
.nav-button-rev:link,
.nav-button-rev:visited {
    background-color: var(--linkhover);
    color: var(--border);
}

.nav-button-rev:hover,
.nav-button-rev:active {
    background-color: var(--border);
    color: var(--linkhover);
}

/* || Index Flexbox */

.index-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bumper);
    margin: var(--bumper) 0;
}

.index-card {
    flex: 1 0 300px;
    display: flex;
    flex-direction: column;
    padding: var(--bumper);
    border: 0.5rem double var(--border);
    border-radius: 20px;
}

.index-card-body {
    flex: 1;
}

.index-card-section {
    margin: var(--bumper) 0;
}

.index-card-footer {
    margin: var(--bumper) auto 0;
    color: var(--border);
    font-size: 0.9rem;
    font-style: italic;
}

.index-card h3 {
    text-align: center;
}

.index-card ul {
    margin: 0;
    padding-left: var(--bumper-double);
}

/* || Css Notes: Boxes */

.css-codebox {
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: 5px;
    margin: 1rem auto;
    max-width: 800px;
}

/* || CSS Notes: Flexboxes */

.css-container,
.css-flex-container,
.css-h160-container, 
.css-gap-container {
    padding: 3px;
    border: 3px solid var(--flexborder);
    margin: 20px;
}

.css-flex-container {
    display: flex;
}

.css-h160-container {
    display: flex;
    height: 160px;
}

.css-gap-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.css-container div,
.css-flex-container div,
.css-h160-container div,
.css-gap-container div {
    padding: 5px;
    border: 3px solid var(--title);
    background-color: var(--flexbackground);
}

.css-container div {
    margin: 5px;
}

.css-flex-container div {
    flex: 1;
    margin: 5px;
}

.css-h160-container div,
.css-gap-container div {
    width: 130px;
    height: 60px;
}

/* || CSS Notes: Font used inside flexboxes */

.giant,
.semigiant {
    color: var(--title);
    font-weight: bold;
    text-align: center;
}

.giant {
    font-size: 2rem;
}

.semigiant {
    font-size: 1.3rem;
}

/* || CSS Notes: Navigation bar, still not working properly */

.links-list a {
    background-color: var(--flexbackground);
    text-decoration: none;
    padding: 1rem 2rem;    
    display: inline-block;
}
    
.links-list a:hover {
    background-color: var(--border);
}


.git_notes h3 {
    text-align: left;
}

.tagline {
    color: cadetblue;
    font-weight: bold;
    font-size: larger;
}

.paratitle {
    color: cadetblue;
    font-weight: bold;
    margin-bottom: 0;
}