:root {
--dark-black:#010014;
--dark-white:#e0def9;
--gradient1:linear-gradient(180deg,var(--background3) 0%,var(--background2) 50%,var(--background1) 100%);
--gradient2:linear-gradient(180deg,var(--background3) 0%,var(--background2) 100%);
--highlight:inset 0 5px 5px 5px var(--background3);
--light-black:#430b18;
--light-white:#f6f1f9;
--medium-black:#120116;
--medium-white:#efecfa;
--primary-mint:#c5ee92;
--primary-raspberry:#ad1457;
--primary-tangerine:#ffb66b;
--primary-teal:#0f997e;
--rainbow-blue:#303ba9;
--rainbow-cyan:#14d3ff;
--rainbow-gray:#8a92ad;
--rainbow-green:#33923b;
--rainbow-orange:#f15f05;
--rainbow-pink:#f25b9a;
--rainbow-purple:#892490;
--rainbow-red:#e42424;
--rainbow-yellow:#ffd726;
--ridge-highlight:0 0 5px 5px var(--background3);
--ridge-shadow:inset 0 5px 5px 5px var(--background1);
--shadow:0 0 5px 5px var(--background1)
}

@media (prefers-color-scheme: dark) {
:root {
--background1:var(--dark-black);
--background2:var(--medium-black);
--background3:var(--light-black);
--text1:var(--dark-white);
--text2:var(--medium-white);
--text3:var(--light-white);
--link:var(--rainbow-cyan);
--hover:var(--primary-mint)
}
}

@media (prefers-color-scheme: light) {
:root {
--background1:var(--dark-white);
--background2:var(--medium-white);
--background3:var(--light-white);
--text1:var(--light-black);
--text2:var(--medium-black);
--text3:var(--dark-black);
--link:var(--rainbow-blue);
--hover:var(--primary-teal)
}
}

@media (prefers-reduced-motion) {
* {
animation:none!important;
flex-grow:1!important;
scroll-behavior:auto!important;
transition:none!important
}
}

@media (max-width: 1080px){
    #breadcrumbs-tree{
        display:none
    }
}
@media (max-width: 700px){
    #scroll-tree{
        display:none
    }
}

* {
box-sizing:border-box;
scroll-behavior:smooth;
scrollbar-color: var(--text1) var(--background3);
font-family:"RobotoSerif-Regular",sans-serif
}

body {
align-items:center;
display:flex;
flex-direction:column;
justify-content:flex-start;
margin:0;
width:100%;
height:100%;
overflow:auto;
position:fixed
}

nav {
align-items:flex-end;
align-self:stretch;
background:var(--gradient1);
display:flex;
flex-direction:row;
flex-shrink:0;
gap:30px;
height:205px;
justify-content:space-between;
overflow:auto;
position:relative
}

#home-button {
align-items:flex-start;
background:var(--gradient1);
border-radius:45px 45px 0 0;
box-shadow:var(--highlight),0 -5px 5px 5px var(--background1);
color:var(--text1);
display:flex;
flex-direction:row;
flex-shrink:0;
font-size:20px;
font-weight:700;
gap:15px;
height:180px;
justify-content:center;
overflow:hidden;
padding:30px;
position:relative;
text-align:left;
text-decoration:none
}

#nav-bar {
align-items:flex-start;
align-self:stretch;
display:flex;
flex:1;
flex-direction:row;
gap:30px;
justify-content:space-around;
margin:0;
max-width:1320px;
overflow:auto;
padding:30px;
position:relative
}

.nav-item {
align-items:center;
background:var(--gradient2);
border-radius:30px;
box-shadow:var(--highlight),var(--shadow);
color:var(--text3);
display:flex;
flex:1 0;
flex-direction:row;
font-size:16px;
font-weight:400;
gap:0;
height:60px;
justify-content:center;
max-width:400px;
min-width:200px;
overflow:hidden;
position:relative;
text-align:left;
transition:flex .5s cubic-bezier(.5,-0.5,0.5,1.5) .2s, max-width .5s cubic-bezier(.5,-0.5,0.5,1.5) .2s
}

.nav-item:hover {
flex:2 0;
max-width:600px
}

#navbar:has(.nav-item:hover) .nav-item:not(:hover) {
flex:1 2
}

main {
align-items:center;
align-self:stretch;
background:var(--gradient1);
border-radius:90px 90px 0 0;
box-shadow:var(--shadow),var(--highlight);
display:flex;
flex-direction:row;
flex-shrink:0;
gap:30px;
height:calc(100vh - 115px);
justify-content:center;
margin:-90px 0 0;
overflow:auto;
padding:30px;
position:relative
}

aside {
align-items:center;
align-self:stretch;
background:var(--gradient2);
border-radius:60px;
box-shadow:var(--ridge-shadow),var(--ridge-highlight);
display:flex;
flex:1 1;
flex-direction:column;
gap:15px;
justify-content:space-between;
max-width:400px;
overflow-y:auto;
padding:30px;
position:relative
}

.tree-item {
align-items:flex-start;
align-self:stretch;
background:var(--gradient2);
border-radius:30px;
box-shadow:var(--highlight),var(--shadow);
display:flex;
flex-direction:column;
flex:initial;
gap:15px;
justify-content:center;
overflow:auto;
padding:15px;
position:relative;
list-style:none;
transition:padding .5s cubic-bezier(.5,-0.5,0.5,1.5) .2s
}

.tree-text{
color:var(--text3);
font-size:16px;
font-weight:400;
position:relative;
text-align:left;
flex:auto;
width:100%;
}

.tree-text a {
height:100%;
width:100%;
display:inline-block
}


#back-button,#top-button {
background:var(--gradient2);
border-radius:30px;
bottom:15px;
box-shadow:var(--highlight),var(--shadow);
color:var(--text3);
display:block;
font-family:"RobotoSerif-Regular",sans-serif;
font-size:16px;
font-weight:400;
height:60px;
left:50%;
flex:none;
overflow:hidden;
padding:15px;
margin:15px;
position:sticky;
text-align:center;
text-decoration:none;
translate:-50%;
width:75px
}

article {
align-items:center;
align-self:stretch;
background:var(--gradient2);
border-radius:60px;
box-shadow:var(--ridge-shadow),var(--ridge-highlight);
display:flex;
flex:2 0;
flex-direction:column;
gap:30px;
justify-content:flex-start;
max-width:1000px;
min-width:300px;
overflow-y:auto;
padding:30px;
position:relative
}

hgroup {
align-items:flex-start;
align-self:stretch;
display:flex;
flex-direction:column;
flex-shrink:0;
justify-content:flex-start;
position:relative
}

hgroup > h1{
align-items:center;
background:var(--gradient1);
border-radius:30px 30px 0 0;
box-shadow:0 5px 5px 5px var(--background1),var(--highlight);
color:var(--text2);
display:flex;
flex-direction:row;
flex-shrink:0;
font-size:24px;
font-weight:700;
gap:15px;
justify-content:center;
margin:0 0 -30px;
overflow:hidden;
padding:15px 30px 45px;
position:relative;
text-align:left
}

hgroup > section {
align-items:flex-start;
align-self:stretch;
background:var(--gradient1);
border-radius:30px;
box-shadow:0 5px 5px 5px var(--background1),var(--highlight);
display:flex;
flex-direction:column;
flex-shrink:0;
gap:15px;
justify-content:center;
margin:0;
overflow:hidden;
padding:30px;
position:relative
}
hgroup > section * {
    position:relative;
    text-align:left;
    align-self:stretch;
}

hgroup > section p {
color:var(--text3);
font-size:12px;
font-weight:400;
}

hgroup > section h2 {
color:var(--text2);
font-size:16px;
font-weight:700;
}

hgroup > section hr {
background:var(--gradient2);
border-radius:5px;
border-width:0;
box-shadow:0 0 5px 0 var(--background3),inset 0 0 5px 0 var(--background1);
height:10px;
width:100%
}

hgroup > section :not(h1,h2,h3,h4,h5,h6) a {
color:var(--link);
font-size:12px;
font-weight:400;
text-decoration:underline
}

hgroup > section blockquote {
background:var(--gradient2);
border-radius:15px;
box-shadow:0 0 5px 0 var(--background3),inset 0 0 5px 0 var(--background1);
display:inline-block;
gap:10px;
justify-content:center;
overflow:hidden;
padding:15px;
margin: 15px 0;
}

hgroup > section img {
border-radius:15px;
display:inline-block;
box-shadow:0 0 5px 0 var(--background3);
object-fit:scale-down;
color:var(--text1);
font-size:10px;
font-weight:400
}


hgroup > section small {
color:var(--text1);
font-size:10px;
font-style:italic;
font-weight:400;
}

hgroup :is(h1,h2,h3,h4,h5,h6) a {
color:var(--text2);
text-decoration:none
}

hgroup :is(h1,h2,h3,h4,h5,h6) :is(a:hover,a:active,a:focus)::before {
color:var(--hover);
content:" # "
}

.tree-item a, .nav-item {
color:var(--text3);
text-decoration:none
}

#top {
margin-bottom:0;
margin-top:-30px
}

:focus,.blurb-title:focus-within,.tree-item:focus-within {
box-shadow:0 0 0 5px var(--hover)!important;
outline:none;
}

.blurb-title:focus-within a,.tree-item:focus-within a {
box-shadow:none!important
}

.blurb :is(a:hover,a:active,a:focus),
.tree-item :is(a:hover,a:active,a:focus),
.nav-item:is(:hover,:active,:focus),
#back-button:is(:hover,:active,:focus),
#top-button:is(:hover,:active,:focus),
#home-button:is(:hover,:active,:focus)
 {
color:var(--text1);
text-decoration:underline;
text-decoration-color:var(--hover);
text-decoration-thickness:5px
}

.tree-item:has(> .tree-text > a:active),
.current-page,
.blurb-title:has(a:active),
.nav-item:active,
#back-button:active,
#top-button:active,
#home-button:active
 {
background:linear-gradient(0deg,var(--background3) 0%,var(--background2) 100%)!important
}

.tree-item:hover{
padding:15px 15px 15px 30px;
}