:root {
    --font-mono: oracle /* hal */ /* oracreg */ /* tgrmono */;
    --font-reg: Arial, Helvetica, Sans-Serif /* tgrreg */ /* hal */ /* oracreg */;
}

html {
    font-size: 1vw;
    background-color: white;
}
body {
    padding: 0;
    margin: 0;
    width: 100rem;
    box-sizing: border-box;
    /* background-color: white; */
    overflow-x: hidden;
}
@font-face {
    font-family: oracle;
    src: url("../fonts/EduOracleTriple-Book.woff2");
}
header {
    width: 100rem;
    height: 98vh;
    top: 2rem;
    position: fixed;
    display: grid;
    grid-template-columns: /* 1fr 1fr 1fr 1fr */ 1fr;
    justify-content: space-between;
    z-index: -1;

    transition: grid-template-columns 7s ease;
    animation: resize 9s;
}
@keyframes resize {
    0% {
        grid-template-columns: 0fr;
    }
    100% {
        grid-template-columns: 1fr;
    }
  }

/* about page */
#abtbutton {
    position: fixed;
    right: 0;
}
#about {
    display: none;
    position: fixed;
    top: 3rem;
    color: black;
    height: 97vh;
    z-index: 1;
}
#about p {
    font-size: .9rem;
    line-height: normal;
}
#id-15fe5d02-a150-4b31-95c5-d28b0c5c875c {
    margin-inline-start: 6rem;
}
#id-43fe8e90-1cc2-4d42-92cd-63783717dd3e {
    margin-block-start: 1.5rem;
}
.moveabt {
    margin-left: 2.5rem;
    width: 95rem;
    transition: all 2s .3s;
}
/* bottom */
#id-5d212a3d-0116-4bce-b155-5f99bd538aa2 {
    /* width: 60rem;
    margin-left: 20rem; */
    /* width: 90rem;
    position: fixed;
    top: unset;
    bottom: 1rem; */
    margin-block-start: 30vh;
}
#id-9a4daca0-d91e-4ba9-949e-f23376fc98ba {
    margin-inline-start: 6rem;
    margin-block-start: 1.5rem;
}
#id-41f528f7-cd4e-4740-938b-1cc8ac690668 {
    margin-inline-start: 6rem;
}

h1, h2 {
    font-family: var(--font-reg);
    font-size: 1.6rem;
    font-weight: lighter;
    margin-block-start: 3rem;
    margin-block-end: 1.5rem;
}
h3 {
    font-family: var(--font-reg);
    font-size: 1.2rem; 
    font-weight: lighter;
    margin-block-start: 2rem;
    margin-block-end: .5rem;
}
#title {
    font-family: var(--font-mono);
    font-size: 5rem;
    width: 80rem;
    left: 10rem;
    position: relative;
    top: 10rem;
}
#demo {
    position: relative;
    width: 30rem;
    left: 10rem;
    font-family: var(--font-reg);
    font-size: .9rem;
    margin-top: 8rem;
}
#empty {
    height: 65vh;
}
header a {
    color: lightgrey;
}
header p {
    color: lightgrey;
    animation: numb 15s;
    transition: opacity 10s ease;
}
header p a {
    color: lightgrey;
    animation: numb 15s;
    transition: opacity 10s ease;
}
a {
    text-decoration: none;
}
main a {
    color: black;
}
main a[href^="#"] {
    font-family: var(--font-mono);
}
p {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    margin-block-start: 0;
    margin-block-end: 0;

    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

    /* word-spacing: -0.05em; */
}
/* starter animation */
p span {
    visibility: hidden;
    color: black;
    opacity: 1;
    animation: span 6s 2s;
    transition: opacity 1s ease 2s;
}

@keyframes span {
    0% {
        visibility: visible;
        opacity: 1;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}
@keyframes numb {
    0% {
        color: black;
    }
    100% {
        color: lightgrey;
    }
}

#one {
    grid-column: 2 / span 2;
    justify-self: stretch;
    align-self: start;
}
#two {
    /* grid-column-start: 3; */
    grid-column: 2 / span 2;
    justify-self: center;
}
#three {
    grid-column: 1 / span 2;
    justify-self: center;
}
#four {
    grid-column-start: 1;
}
#five {
    grid-column: 3 / span 2;
    place-self: center;
    justify-self: start;
}
#six {
    grid-column-start: 4;
}
#seven {
    grid-column: 2/ span 2;
}
#eight {
    justify-self: start;
}
#nine {
    place-self: center;
}
#ten {
    justify-self: center;
}
main p {
    font-family: var(--font-reg);
    text-align: justify;
    word-spacing: -0.05em;
    line-height: 1.5rem;
    font-variant-numeric: normal;
}
section {
    text-align: justify;
    width: 60rem;
    margin-left: 20rem;
}

/*appendix*/
#ninetxt {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 96rem;
    margin: 0 2rem;
}
#id-0640da9d-afa9-4583-87ba-dca94a5fa65a {
    grid-column: 1 / span 3;
}

.block-type-markdown {
    margin-inline-start: -5rem;
}
blockquote {
    font-family: var(--font-reg); 
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 2rem;
    margin-inline-start: 5rem;
    margin-inline-end: 0;

    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.active {
    color: black !important; 
    /* opacity: 100% !important; */
}
.highlighted {
    color: black !important;
}
a.highlighted {
    color: black !important;
}
.switch-button {
    z-index: 9;
    position: fixed;
    display: flex;
    cursor: pointer;
    top: 0;
}
.switch-button div {
    font-family: var(--font-reg);
    font-size: 1.2rem;
    padding: .5rem 1rem;
    color: lightgrey;
    /* color: black;
    opacity: 30%; */
}

/*letters*/
/*pigeon*/
div#id-0f1abd4d-6f00-4bb5-85b5-2675d03c1f72.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-0f1abd4d-6f00-4bb5-85b5-2675d03c1f72 p {
    font-size: 1.6rem;
    line-height: 2rem;
}
.pigeonone {
    margin-left: -15rem;
    width: 45rem !important;
    transition: all 2s .3s;
}
div#id-7ec0c347-a7d1-470c-939b-b589b9f0605b.block{
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-7ec0c347-a7d1-470c-939b-b589b9f0605b p {
    font-size: 1.6rem;
    line-height: 2rem;
}
/*Ecm*/
#id-b403ed89-033c-4064-af1f-3b40e586e63e p {
    font-size: 1.6rem;
    line-height: 2rem;
}
div#id-b403ed89-033c-4064-af1f-3b40e586e63e.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-f0e89a03-988e-4cd7-b5ac-ec42ea842eeb p {
    font-size: 1.6rem;
    line-height: 2rem;
}
div#id-f0e89a03-988e-4cd7-b5ac-ec42ea842eeb.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
/*footnote*/
div#id-854a8dd1-64e1-4b1c-a2b4-4ab3ff6bcec4.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-854a8dd1-64e1-4b1c-a2b4-4ab3ff6bcec4 p {
    font-size: 1.6rem;
    line-height: 2rem;
}
.fnone {
    margin-left: 13rem;
    width: 50rem !important;
    transition: all 2s .3s;
}
#id-e32ab9ae-4958-414a-8541-d5e602790dfb p {
    font-size: 1.6rem;
    line-height: 2rem;
}
div#id-e32ab9ae-4958-414a-8541-d5e602790dfb.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
/*cursor*/
.cursorone {
    margin-left: -30rem;
    width: 50rem !important;
    transition: all 2s .3s;
}
div#id-aa2f0b42-092e-4775-a487-b281630a445d.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-aa2f0b42-092e-4775-a487-b281630a445d p {
    font-size: 1.6rem;
    line-height: 2rem;
}
div#id-32da0fd1-2b58-4072-a257-7d94dd9d3f5e.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-32da0fd1-2b58-4072-a257-7d94dd9d3f5e p {
    font-size: 1.6rem;
    line-height: 2rem;
}
/*spider*/
div#id-d592a472-59cd-459c-ae33-b53c6c6f55a8.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-d592a472-59cd-459c-ae33-b53c6c6f55a8 p {
    font-size: 1.6rem;
    line-height: 2rem;
}
div#id-8cb2fb61-0247-462d-ab85-b52012cd990b.block {
    margin-block-start: 3rem;
    margin-block-end: 3rem;
    width: 60rem;
}
#id-8cb2fb61-0247-462d-ab85-b52012cd990b p {
    font-size: 1.6rem;
    line-height: 2rem; 
}
.spiderone {
    margin-left: -30rem;
    width: 50rem !important;
    transition: all 2s .3s;
}
/*citation*/
code {
    font-family: var(--font-mono);
    font-size: .8rem;
    vertical-align: 15%;
    cursor: pointer;
    padding: .15rem;

    /* font-variant-numeric: tabular-nums; */
}
/* blockquote code {
    vertical-align: bottom;
} */
ul, ol {
    margin-block-start: 0;
    margin-block-end: 2rem;
    padding-inline-start: 0;
    font-size: .9rem;
}
li {
    list-style: none;
    font-family: var(--font-reg);
}
li strong {
    font-weight: normal;
    margin-inline-end: 3rem;
    font-family: var(--font-mono);
    /* font-variant-numeric: tabular-nums; */
}
.block-type-list {
    display: none;
    text-align: left;

    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* bibliography */
#bib .block-type-list {
    display: block;
}
#bib {
    width: 96rem;
    margin: 0 2rem;
}
#d08c99a5-7726-4d93-9481-8fb9fb40cc5f {
    margin-block-start: 1rem;
    margin-block-end: 2rem;
    column-count: 3;
}
#b79a50a7-786f-4cef-97bd-a516ed8eff56 {
    margin-block-start: 1rem;
    margin-block-end: 2rem;
    column-count: 3;
}

/*graphics*/
figure {
    margin-block-start: 2rem;
    margin-block-end: 2rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
figcaption {
    font-family: var(--font-reg);
    font-size: 1rem;
}
img {
    height: 95vh;
    filter: /* blur(15px) */ invert(0%);
    -webkit-filter: /* blur(15px) */ invert(0%);
    transition: all 2s;
    background-color: white;
    mix-blend-mode: difference;
}

/* blocksatz */
#id-56f70d6d-c022-4a22-b3f8-72c6fc464587 {
    letter-spacing: -0.01rem;
}
#id-9995db4c-0faf-4df3-b159-4708ee8e1eea {
    letter-spacing: -0.01rem;
}
#id-e43b9996-9135-4567-9cb7-002f8240b7cd {
    letter-spacing: -0.01rem;
}
#id-a4a545b5-3d45-4b56-945b-3b5e84da2fd8 {
    letter-spacing: -0.01rem;
}
#id-366f7b3f-87e8-4f20-9aa8-0a1ccb4b8fe2 {
    letter-spacing: -0.01rem;
}
#id-cb6f20a7-72de-477c-a5cd-281259ee49e2 {
    letter-spacing: -0.01rem;
}
#id-d11b085d-08db-4aae-890c-125301720e92 {
    word-spacing: -0.01rem;
    letter-spacing: 0.01rem;
}
#id-f5159682-7e0b-418f-897d-ae5f55970caa {
    letter-spacing: -0.01rem;
}
#id-36adef39-1732-4227-9de7-2b225a1bea02 p:first-of-type {
    letter-spacing: -0.01rem;
}
#id-9af005dd-d70a-4e93-97d6-ead3f6a21767 {
    letter-spacing: -0.01rem;
}
#id-dcda8ed2-8366-41d4-8513-3180312a0f62 {
    letter-spacing: -0.01rem;
}
#id-a496d6ef-7234-4bdc-acda-a16235d65234 {
    letter-spacing: 0.01rem;
}
#id-2f6db2bb-2b73-41a3-93f2-6475e541f230 {
    letter-spacing: -0.01rem;
}

/* observer-entry */
.movepre {
    margin-left: 7rem;
    width: 40rem;
    transition: all 2s .3s;
}
.moveeco {
    margin-left: 20rem;
    transition: all 2s .3s;
}
.moveone {
    margin-left: 46.5rem;
    width: 45rem;
    transition: all 2s .3s;
}
.movetr {
    margin-left: 9.5rem;
    width: 70rem;
    text-indent: 5rem;
    transition: all 2s .3s;
}
.movetr23 {
    margin-left: -23rem;
    width: 65rem;
    text-indent: 7rem;
    transition: all 2s .3s;
}
.movetr34 {
    margin-left: -18rem;
    width: 70rem;
    text-indent: 3rem;
    transition: all 2s .3s;
}
.movetwo {
    margin-left: 55rem;
    width: 40rem;
    transition: all 2s .3s;
}
.imgtwo {
    margin-left: -27rem;
    /* width: 40rem; */
    transition: all 2s .3s;
}
.imgthree {
    margin-left: 15rem;
    transition: all 2s .3s;
}
.movethree {
    margin-left: 22rem;
    width: 40rem;
    transition: all 2s .3s;
}
.movefour {
    margin-left: 14.5rem;
    width: 45rem;
    transition: all 2s .3s;
}
.movetr45 {
    margin-left: 10rem;
    width: 70rem;
    text-indent: 7rem;
    transition: all 2s .3s;
}
.movefive {
    margin-left: 67.5rem;
    width: 31.5rem;
    transition: all 2s .3s;
}
.movetr56 {
    margin-left: -23rem;
    width: 50rem;
    text-indent: 7rem;
    transition: all 2s .3s;
}
.movesix {
    margin-left: 48rem;
    width: 35rem;
    transition: all 2s .3s;
}
.moveseven {
    margin-left: 49.5rem;
    width: 43rem;
    transition: all 2s .3s;
}
.movetr78 {
    margin-left: 6rem;
    width: 41rem;
    text-indent: 7rem;
    transition: all 2s .3s;
}
.moveeight {
    margin-left: 64rem;
    width: 35rem;
    transition: all 2s .3s;
}

/* @media screen and (max-width: 768px) {

} */