:root{
   --shadow-color: 21deg 15% 63%;
   --yellow-bg: hsl(28, 74%, 99%);
   --cream: hsl(35, 93%, 79%);
   --red: hsl(4, 58%, 53%);
   --red2: hsl(1, 47%, 54%);

   --red-texture: var(--red) url("/background/texture/red3.png");
   --scrollbar-thumb: var(--red-texture);
   --scrollbar-button: url("/assets/pixel/nature/02.gif");
}

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

		basic styling

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

body{
   background-color: var(--yellow-bg);
   background-image: url("/background/gg13.png");
}



main{
   width: 75svw;
   margin: auto;
} 

main > section > div{
   padding: 2em!important;
   margin: var(--double-gap) auto;
}

main > section .texture.red,
nav a{
   background-image: url("/background/45.png");
      background-size: 2em;
      background-position: 22% top;
   border-color: var(--red2);
}

.divider:is([src*=B23], [src*="H25"]){
   max-height: 2em;
}

#computer h2 + img{
   width: 100%;
}


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

	opening sticker box

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

main > div:first-child{
   --size: calc(100svh - 4 * var(--gap));
   height: var(--size);
   width: var(--size);
   margin: var(--double-gap) auto;
}

main > div:first-child >*{
   padding: 0!important;
}

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

		headings

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

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

h1{
   color: var(--red2);
   text-shadow: var(--text-shadow-white);
   font-size: calc(100svw / 14);
}

h1#greeting{
   animation: title ease-in-out forwards;
   animation-duration: 0.55s;
   animation-delay: 0.6s;
}

@keyframes title {
   from{}
   to{margin-top: -20svh;}
}

h2{
   font-size: 2.75em;
   margin-top: 0.25em;
   margin-bottom: 0.5em;
}

h3{
   font-size: 2em;
}

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

	   links

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

a{
   color: var(--red);
}

a:is(:hover, :focus){
   color: var(--orange);
}

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

	navi pagination arrows

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

nav{
   margin: var(--gap) auto;
   display: flex;
      justify-content: center;
      align-items: center;
      gap: 0 calc(var(--double-gap) * 2);
}

nav a{
   --size: 10svw;
   --movement: calc(var(--size) / 4);
   display: block;
   height: calc(var(--size) * 0.36);
   width: var(--size);
   border: var(--border-level-2);
}

nav a:first-of-type{
   clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

nav a:last-of-type{
   clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

nav a,
nav a:hover,
nav a:focus{
   /* transition: transform 0.5s ease-in-out; */
}

nav a:first-of-type:hover,
nav a:first-of-type:focus{
   /* transform: translateX(calc(var(--movement) * -1)); */
   animation: arrow infinite alternate-reverse 0.8s ease-in-out;
}

nav a:last-of-type:hover,
nav a:last-of-type:focus{
   /* transform: translateX(var(--movement)); */
   animation: arrow infinite alternate 0.8s ease-in-out;
}

@keyframes arrow{
   to{
      transform: translateX(var(--movement));
   }
}


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

	   music player

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

#musicplayer table{
   background: var(--yellow-texture);
   border: var(--border-level-2);
      border-style: outset;
      border-color: var(--yellow);
   border-bottom: var(--border-level-3);
      border-bottom-style: solid;
      border-bottom-color: var(--yellow-border);
}

input[type=range]::-moz-range-thumb{
   background: var(--red); /* color of seeker square */
}
input[type=range]::-webkit-slider-thumb{
   background: var(--red); /* color of seeker square */
}

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

		shadows shadowssss

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

/*
h1{
   filter: var(--drop-shadow-medium);
}
*/

footer, h1{
   filter: var(--drop-shadow-low);
}

main .texture{
   box-shadow: var(--shadow-elevation-medium);
   filter: var(--drop-shadow-medium);
}

.texture > div > *, main > div:first-child img{
   filter: var(--drop-text-shadow);
}

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

		line stickers wah

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

img[style*='float']{
   height: 50svh;
   margin: 1em;
   margin-bottom: 0;
}

h2 + img[style*='float']{
   margin-top: 0;
}

p > img[style*='float']{
   margin-left: 0;
}

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

	floating book covers and music/video iframes 

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

#book li img,
#music li iframe{
   border: var(--border-level-3);
      border-color: var(--grey);
   margin: 1em 0 0.5em 2em;
   box-shadow: var(--shadow-elevation-medium-text);
   float: right;
}

#book li img{
   max-height: 100%;
   width: 33%;
}

#book li:has(p){
   margin-bottom: 2em;
}

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

	book gallery no commentary

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

.gallery{
   width: 75%;
   margin: 1em auto;
   margin-top: 2em;
   display: flex;
      justify-content: center;
      align-items: baseline;
      flex-wrap: wrap;
}

#book .gallery{
   gap: var(--half-gap);
}

#book .gallery img{
   max-height: 33svh;
}

#music .gallery{
   gap: var(--half-gap);
}

#music .gallery img{
   max-height: 23svh;
}

#game .gallery{
   gap: var(--half-gap);
   align-items: stretch;
}

#game .gallery img{
   max-width: calc(50% - var(--gap));
}

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

		fancybox lightbox gallery images YAEAAHHH!!!

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

#vivarism .fancybox{
   gap: var(--gap);
}

#vivarism .fancybox a{
   height: 30svh;
   max-width: calc(50% - var(--gap));
   width: auto;
}

.fancybox__caption a{
   color: var(--cream);
}

.fancybox img{
   height: 100%;
   width: 100%!important;
}

.fancybox.tiny a{
   height: 18svh!important;
}

#book .fancybox a img{
   height: 33svh;
}

.fancybox.art{
   gap: var(--gap);
}

.fancybox.art a{
   height: 50svh;
}