html {
    font-size: var(--font-root);
}

body {
    background: var(--colour-bg);
    color: var(--colour-body);
    font-family: var(--font), monospace;
    font-size: var(--font-root);
    font-weight: ;
}

h1,h2,h3,h4,ul,p,li,pre {
    margin: 0;
    padding: 0;
    padding-left: 0;
}

code {
    background: ghostwhite;
    font-family: 'Recursive Mono Casual';
    font-weight: 600;
}

h1 {
    text-decoration: underline overline wavy var(--colour-body) 2px;
    font-size: var(--font-xxl);
}


.cb__cover {
    max-width: var(--readable-width);
    margin: auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-xs);
    margin-top: calc(100vh / 4);
}


.cb__breadcrumb {
    font-size: var(--font-xxs);
    font-style: italic;
    margin: var(--font-xs);
}

.cb__footer {
    grid-column: 2;
    text-align: center;
    padding-bottom: var(--space-unit);
}

.cb__project-toc {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    width: calc(100% - var(--space-lg));
}

.cb__project-toc-list {
    text-align: left;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-lg);
}

.cb__project-toc-item p {
    font-size: var(--font-xs);
}



h1, h2, .cb__desc-item.summary {
    text-align: var(--heading-alignment);
}

p {
    font-size: var(--font-s);
    font-weight: 400;
    margin-bottom: var(--font-s);
    line-height: 130%;
}

ul {
    list-style-type: none;
}

.cb__grid {
    height: 800px;
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: var(--side-bar) var(--readable-width);
    grid-template-rows: var(--space-xl) [heading] repeat(10, var(--space-xxxl))[content]
    grid-gap: var(--space-md);
    padding: var(--basic-padding);
    margin-top: var(--space-xxl);
    margin-left: calc(var(--space-xxxl) + var(--space-xl));
}



.cb__title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: var(--space-xs);
}

.cb__desc {
    grid-column: 2;
    grid-row: 2/ span 4;
}

.cb__desc-item {
    margin-bottom: var(--space-md);
}

.cb__desc-item.summary {
    font-size: var(--font-xxs);
    font-style: italic;
    margin-top: var(--font-xxs);
}

.cb__desc-item.intention {
    margin-top: var(--space-lg);
}

.cb__stats {
    grid-column: 1;
    grid-row: 1 / span 4;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    font-size: var(--font-xs);
    gap: var(--space-xxl);
}


.cb__stats h2 {
    font-size: var(--font-s);
    font-weight: 500;
    text-decoration: overline  wavy 1px;
    margin-bottom: var(--space-sm);
}

a {
    color: var(--colour-link);
    text-decoration: none;
}

.cb__tech_deet_list {
    padding-top: 2px;
    font-size: var(--font-xxs);
    font-style: italic;
}

.cb__soundtrack_list {
    font-size: var(--font-xxs);
}

.cb__tech_deet_list li {
    margin-bottom: var(--space-xxxs);
}

.cg-link {
    color: var(--colour-cglink);
}
.cg-link:hover {
    color: var(--colour-cglink-hover);
}
.cg-link:visited {
    color: var(--colour-cglink-visited);
}

.cb__song {
    margin-bottom: var(--space-xs);
}

.cb__song-track {
    font-size: var(--font-xs);
    margin-bottom: var(--font-xxxs);
}
.cb__song-artist {
    font-size: var(--font-xxs);
}

.cb__toc {
    margin: auto;
    padding: var(--space-xs);
}


.cb__divider {
    border: none;
    border-top: 3px double var(--colour-primary);
    color: var(--colour-primary);
    overflow: visible;
    text-align: center;
    height: 5px;
}

.cb__divider:after {
    background: var(--colour-bg);
    content: '⌇⌇⌇';
    padding: 0 4px;
    position: relative;
    bottom: var(--font-xs);
}
.cb__divider.section {
    margin-top: var(--space-lg);
    width: 150px;
    margin-bottom: var(--space-lg);
}


.cb__divider.top {
    margin-top: var(--space-xl);
}

.cb__divider.bottom {
    margin-bottom: var(--space-lg);
}

.cb__toc-list {
    text-align: center;
    font-variant: small-caps;
    font-size: var(--font-xs);
}

.cb__toc-item {
    display: inline;
    margin-right: var(--font-xxs);
}

.cb__toc-item:not(:last-child)::after {
    background: ghostwhite;
    margin-left: var(--font-xxs);
    content: '●';
    font-size: var(--font-xxs);
    /* padding: 0 4px; */
    position: relative;
    top: -5px;
}

.cb__section h2 {
    font-size: var(--font-ml);
    text-decoration: underline wavy var(--colour-body) 2px;
    margin-bottom: var(--space-md);
}

.cb__section h3 {
    font-size: var(--font-s);
    margin-top: var(--font-xl);
    margin-bottom: 0.2rem;
}

.cb__glossary-term-inner {
    opacity: 0;
    position: absolute;
    background: var(--colour-bg);
    font-size: var(--font-xxs);
    width: var(--space-xxxl);
    left: calc(var(--space-xxxl) + var(--space-xl));
    border-top: 4px double var(--colour-accent);
    border-bottom: 4px double var(--colour-accent);
    padding-top: var(--font-xxs);
    padding-bottom: var(--font-xxs);
    line-height: 130%;
}

.cb__glossary-term {
    cursor: pointer;
}

.cb__glossary-term::before ,
.cb__glossary-term::after
{
    content: "⌇";
    font-size: var(--font-m);
    color: var(--colour-accent);
}

.cb__glossary-term-inner b {
    display: block;
    font-size: var(--font-xxs);
}

span.cb__glossary-term_inner p {
  display: inline;
}

span.cb__glossary-term.visible {
  opacity: 1;
  background: var(--colour-accent);
  color: var(--colour-bg);
  transition-property: opacity;
  transition-duration: 0.20s;
  border-radius: 2px;
}

span.cb__glossary-term.visible::before ,
span.cb__glossary-term.visible::after {
    color: var(--colour-bg);
}

.cb__glossary-term.visible .cb__glossary-term-inner {
  opacity: 1;
  color: var(--colour-primary);
  transition-property: opacity;
  transition-duration: 0.20s;
}

.highlight {
    border-top: 3px double var(--colour-primary);
    padding: var(--space-xxs);
    font-size: var(--font-xs);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    overflow-x: scroll;
    max-width: 100%;
}

.cb__quote {
    font-size: var(--font-xs);
    line-height: 135%;
    font-style: italic;
    font-weight: 400;
    margin-left: var(--space-unit);
}

.cb__numbered-list {
    margin-left: var(--space-unit);
    counter-reset: list-number;
    list-style-type: none;
    margin-bottom: calc(var(--font-m) * -1);
}

.cb__numbered-list li {
    counter-increment: list-number;
    display: flex;
    align-items: center;
}

.cb__numbered-list li:before {
    flex: 0 0 auto;
    content: counter(list-number);
    margin-right: var(--font-s);
    margin-bottom: var(--font-s);
    border: 1px solid var(--colour-primary);
    border-radius: 50%;
    height: var(--font-s);
    width: var(--font-s);
    font-size: var(--font-xs);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: aliceblue;

}


@media(max-width: 900px) {
:root {
    --font-root: 20px;
    --heading-alignment: center;
}

.cb__grid {
    height: unset;
    max-width: var(--max-width);
    display: flex;
    flex-flow: column;
    /* grid-template-columns: var(--side-bar) var(--readable-width); */
    /* grid-template-rows: var(--space-xl) [heading] repeat(10, var(--space-xxxl))[content] */
    /* grid-gap: var(--space-md); */
    padding: var(--basic-padding);
    margin-top: var(--space-xs);
    margin-left: var(--space-xs);
}

.highlight {
    padding-bottom: var(--space-xs);
}

aside {
    align-items: center;
}

.cb__stats {
    gap: var(--space-unit);
    margin-bottom: var(--space-unit);
}
.cb__glossary-term-inner {
    margin-left: 0;
    left: 1rem;
    transform: translate(1rem, var(--font-m));
    width: 60%;
    box-shadow: 0 0.25rem 20rem var(--colour-primary);
    padding: 1rem;
    font-size: var(--font-xs);
    /* left: 0; */
}
.cb__glossary-term-inner b {
    font-size: var(--font-xs);
}

.cb__project-toc-list {
    display: flex;
    flex-flow: column;
}

}