:root {
    --root-size: 21px;
    --line-height: 1.3;
    --body-font: 'BBBBaskervvol-Base';
    --header-font: 'Ume';
    --accent-font: 'Freemono';
    --h1-size: 2.5rem;
    --h2-size: calc( var(--h1-size) * 0.8 );
    --h3-size: calc( var(--h2-size) * 0.8 );
    --h4-size: calc( var(--h3-size) * 0.8 );
    --h5-size: calc( var(--h3-size) * 0.8 );
    --padd: 1rem;
}

/******************************************************************************************************************************************************
											LAYOUT
*****************************************************************************************************************************************************/

:root {
    --header-height: 80px;
}

* {
  box-sizing: border-box;
}

body, html {
    padding: 0;
    margin: 0;
    scrollbar-gutter: stable;
}

body {
    display: grid; 
    grid-template-columns: 30% 70%;
    grid-template-rows: auto;
    min-height: 100vh;
    padding-top: var(--header-height);
}

header {
  grid-column: 1;    
  overflow-y: auto;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
}

main {
  grid-column: 2;    
  grid-row: 1;
  padding: 0 20vw var(--padd) var(--padd);
}

aside {
  grid-column: 3;    
  grid-row: 1;
  overflow-y: auto;
}

/* this one functions as placeholder for the 'header' */

.navbar--index {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--header-height);
}

/** TODO: MEDIA QUERIES**/
@media (max-width: 1000px){
    
body {
    display: flex; 
    flex-direction: column;
    padding-top: initial;
}

header {
  position: relative;
  height: auto;
  top: auto;
  padding-top: var(--header-height);
}

main {
    padding-right: initial;
}

}

/******************************************************************************************************************************************************
											ELEMENTS
******************************************************************************************************************************************************/

body {
    font-family: var(--body-font);
}

a {
    color: black;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: normal;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }

/******************************************************************************************************************************************************
											HEADER > * 
******************************************************************************************************************************************************/

nav ul {
    list-style: none;
    padding: 0;
    padding-left: var(--padd);
}

.navbar--index {
    font-size: var(--h1-size);
    font-family: var(--header-font);
    padding-left: var(--padd);
    text-align: left;
}

.navbar--print {
    position: fixed;
    top: 0;
    right: 0;
    padding-right: var(--padd);
    font-size: var(--h1-size);
    font-family: var(--header-font);
    padding-left: var(--padd);
    text-transform: capitalize;
}

.navbar--pages, 
.navbar--reports, 
.navbar--organisation,
.navbar--labels { display: none; }

/******************************************************************************************************************************************************
												MAIN > * 
******************************************************************************************************************************************************/

main img {
    max-width: 70%;
}

main > h6 {
    display: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * *
Strikethrough element -> box for drawing characters
* * * * * * * * * * * * * * * * * * * * * * * * * */

del {
    font-family: Monospace;
    text-decoration: none;
    font-size: 4rem;
    text-align: center;
    display: block;
}

p:has(del) + p:has(del) {
  margin-top: -1.6rem;
}

/******************************************************************************************************************************************************
												Experiments
******************************************************************************************************************************************************/

[data-content-model="chapter-2"] main {
    background-color: yellow;
}

.navbar--chapter--chapter-2  a{
    background-color: yellow;
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 25ch;
  margin-right: -30ch;
  margin-bottom: 0;
  clear: right;
}

/* navigation hierarchy */

.navbar--chapter--wp1-collecting-and-connecting,
.navbar--chapter--wp2-earthbound-hardware,
.navbar--chapter--wp3-small-file-publishing,
.navbar--chapter--wp4-ancestral-connections {
    font-size: 1.5rem;
    font-family: var(--header-font);
    margin: 1.5rem 0;
}

nav ul li {
    text-align: center;
}

.ascii {
  /*zoom: 0.25;*/
  /*transform: scale(40%);
  transform-origin: top left;*/
  /*width: 320ch;  */
  font-family: monospace;
  line-height: 1;
  font-size: 3px;
  width: 320ch;
}