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

		variables

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

:root{
   --shadow-color: 77deg 17% 54%;
   --green2: hsl(126, 22%, 45%);

   --width: 50svw;

   --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("/assets/pixel/nature/02.gif");

   --aqua: hsl(110, 37%, 67%);
   --aqua-texture: var(--aqua) url("/background/texture/aqua5.png");
   --blue: hsl(211, 53%, 79%);
   --blue-texture: var(--blue) url("/background/texture/blue4.png");
   --green: hsl(76, 60%, 68%);
   --green-texture: var(--green) url("/background/texture/green8.png");
   --yellow: hsl(37, 80%, 75%);
   --yellow-texture: var(--yellow) url("/background/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("/background/32.png");
      background-size: 8svw;
      background-color: var(--green-bg);
}

main{
   margin: 0 auto;
   max-width: var(--width);
}

a{
   color: var(--green2);
   font-size: 1.05em;
}

footer{
   margin-top: 3em;
}

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

		headings + following paragraph

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

h1, h2, h3, h1 + p, h2 + p{
   text-align: center;
}

h1{
   color: var(--green2)
   /* 
   text-shadow: var(--text-shadow-black);
   color: var(--white);
    */
}

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: ")";
}

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

		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));
   width: calc((100svw - var(--width)) / 2 - 2 * var(--gap));
   box-sizing: border-box;
   position: fixed;
      top: calc(var(--marquee-total) - 1em);
   font-size: 0.8em;
}

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);
}

nav:first-of-type{
   left: var(--gap);
   padding-right: 0.5em;
}

nav:first-of-type b{
   padding-left: var(--nav-padding);
}

nav:first-of-type menu{
   justify-content: flex-start;
}

nav:last-of-type{
   right: var(--gap);
}

nav:last-of-type b{
   padding-right: var(--nav-padding);
   text-align: right;
}

nav:last-of-type menu{
   justify-content: flex-end;
}

menu{
   height: 100%;
   padding: 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.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("/background/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("/stickers/cutie/scenes/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("/stickers/cutie/scenes/Explore_01.png");
}