/*...........................................................

		variables

..........................*/

:root{
    --shadow-color: 77deg 17% 54%;
    --green2: hsl(126, 22%, 45%);
 
    --marquee-height: 7.5svw;
    --marquee-padding: calc(var(--gap) / 1);
    --marquee-margin: calc(var(--gap) / 2.5);
    --marquee-total: calc(var(--marquee-height) + var(--marquee-margin) + var(--marquee-padding) + 0.5em);
 
    --scrollbar-thumb: var(--green-texture);
    --scrollbar-button: url("/explore/resource/assets/02.gif");
 
    --aqua: hsl(110, 37%, 67%);
    --aqua-texture: var(--aqua) url("./assets/texture/aqua5.png");
    --blue: hsl(211, 53%, 79%);
    --blue-texture: var(--blue) url("./assets/texture/blue4.png");
    --green: hsl(76, 60%, 68%);
    --green-texture: var(--green) url("./assets/texture/green8.png");
    --yellow: hsl(37, 80%, 75%);
    --yellow-texture: var(--yellow) url("./assets/texture/yellow5.png");
 }
 
 /*...........................................................
 
         shadows!!!!
 
 ..........................*/
 
 .marquee > div, header, main, footer, nav{
    filter: var(--drop-shadow-low);
 }
 
 h1, h2, h3, nav b{
    filter: var(--drop-shadow-low);
 }
 
 /*...........................................................
 
         basic style
 
 ..........................*/
 
 body{
    min-height: 100svh;
    margin: var(--marquee-total) auto;
    background-image: url("./assets/32.png");
       background-size: 8svw;
       background-color: var(--green-bg);
    display: grid;
        grid-template-areas: "nav main" "nav footer";
        grid-template-columns: 30ch 1fr;
        grid-auto-rows: max-content;
        gap: var(--gap);
 }
 
 main{
    margin: 0 auto;
 }

 footer{
    margin-top: var(--gap);
 }
 
 a{
    color: var(--green2);
    font-size: 1.05em;
 }
 
 /*..........................
 
         headings + following paragraph
 
 ..........................*/
 
 h1, h2, h3, h1 + p, h2 + p{
    text-align: center;
 }
 
 h1{
    color: var(--green2);
    margin-top: 0;
    --inner-stroke: var(--white);
    --outer-stroke: hsl(293, 5%, 33%);
 }
 
 h1, h2, h3{
    text-shadow: var(--text-shadow-white);
 }
 
 h1 img{
    max-width: 100%;
 }
 
 h1 + p, h2 + p{
    font-size: 0.9em;
 }
 
 /*..........................
 
         warning/caution
 
 ..........................*/
 
 .warning, .note{
    font-size: 0.9em;
 }
 
 :is(.warning, .note)::before, :is(.warning, .note)::after{
    display: contents;
 }
 
 .warning::before{
    content: "(┳! ";
 }
 
 .warning::after{
    content: ")";
 }
 
 .note::before{
    content: "(";
 }
 
 .note::after{
    content: ")";
 }
 
 /*........................................................
 
         sections
 
 ..........................*/

 section{
    display: none;
    padding-top: var(--marquee-height);
 }

 section:target{
    display: block;
 }
 
 /*........................................................
 
         lists
 
 ..........................*/
 
 ul{
    padding: 0;
 }
 
 li{
    line-height: 1.5;
    margin-bottom: 1em;
 }
 
 li.zlib{
    margin-bottom: 0.2em;
 }
 
 li > ul{
    margin-top: 0.75em;
    margin-left: 1.5em;
 }
 
 /*..........................
 
         cute bullets
 
 ..........................*/
 
 ul{
     list-style: none;
 }
 
 ul li::before{
     display: inline-block;
     transform: translateX(-0.5em);
 }
 
 ul li:nth-of-type(10n+1)::before{
     content: "\02538";
 }
 
 ul li:nth-of-type(10n+1) ul li:first-of-type::before{
     content: "\2606";
 }
 
 ul li:nth-of-type(10n+2)::before{
     content: "\02520";
 }
 
 ul li:nth-of-type(10n+3)::before{
     content: "\02524";
 }
 
 ul li:nth-of-type(10n+4)::before{
     content: "\02542";
 }
 
 ul li:nth-of-type(10n+5)::before{
     content: "\02528";
 }
 
 ul li:nth-of-type(10n+6)::before{
     content: "\2606";
 }
 
 ul li:nth-of-type(10n+7)::before{
     content: "\2502";
 }
 
 ul li:nth-of-type(10n+8)::before{
     content: "\252F";
 }
 
 ul li:nth-of-type(10n+9)::before{
     content: "\2510";
 }
 
 ul li:nth-of-type(10n)::before{
     content: "\251B";
 }
 
 /*........................................................
 
         navigation sidebars
 
 ..........................*/
 
 nav{
    height: calc(100svh - 2 * var(--marquee-total));
    box-sizing: border-box;
    font-size: 0.8em;
    margin-left: var(--gap);
    position: sticky;
    top: calc(var(--marquee-height) + var(--gap) + 1em);
 }
 
 nav b{
    --nav-padding: calc(1.5 * var(--gap));
    display: block;
    width: 100%;
    font-size: 1.5em;
    margin-bottom: 0.25em;
    font-family: var(--heading-font);
    text-shadow: var(--text-shadow-white);
    padding-left: var(--nav-padding);
 }
 
 menu{
    justify-content: flex-start;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
       flex-flow: row wrap;
       gap: 0.66em var(--half-gap);
       align-content: center;
 }
 
 menu a{
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    text-shadow: var(--literal-text-shadow);
    /* text-shadow: var(--text-shadow-white); */
 }
 
 menu a:is(:hover, :focus){
    color: var(--white);
 }
 
 menu li{
    display: inline-block;
    width: auto;
    padding: 0 0 0.25em 0!important;
    margin-bottom: 0;
 }
 
 menu li.texture >*{
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0.5em;
 }
 
 /*...........................................................
 
         marquee
 
 ..........................*/
 
 .marquee{
    height: var(--marquee-height);
    width: 100%;
    position: fixed;
       left: 0;
    background-image: url("./assets/32.png");
       background-size: 8svw;
       background-color: var(--green-bg);
 }
 
 .marquee > div{
    height: 100%;
    width: 100%;
     background-size: auto 100%;
         background-repeat: repeat-x;
         background-position: center;
    animation: marquee 66s linear infinite;
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    will-change: transform;
 }
 
 @keyframes marquee{
    from{
       background-position-x: -100svw;
    }
    to{
       background-position-x: 100svw;
    }
 }
 
 /*..........................
 
         top of the page
 
 ..........................*/
 
 .marquee.top{
    top: 0;
    padding-top: var(--marquee-margin);
    padding-bottom: var(--marquee-padding);
    --mask: linear-gradient(to bottom, 
        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) calc(100% - (0.75 * var(--marquee-padding))), 
        rgba(0,0,0, 0) 100%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask); 
    mask: var(--mask);
 }
 
 .marquee.top > div{
    background-image: url("./assets/explore_02.png");
    animation-name: marquee;
    animation-direction: reverse;
 }
 
 /*..........................
 
         bottom of the page
 
 ..........................*/
 
 .marquee.bottom{
    bottom: 0;
    padding-bottom: var(--marquee-margin);
    padding-top: var(--marquee-padding);
    --mask: linear-gradient(to top, 
        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) calc(100% - (0.75 * var(--marquee-padding))), 
        rgba(0,0,0, 0) 100%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask); 
    mask: var(--mask);
 }
 
 .marquee.bottom > div{
    animation-name: marquee;
    background-image: url("./assets/explore_01.png");
 }