:root{
   --shadow-color: 16deg 41% 50%;
   --vector-height: calc(100svh - (var(--double-gap) * 1.75));
   --vector-width: calc(var(--vector-height) * 0.75);
   --black: #553F54;
   --red: hsl(3, 68%, 60%);
   --scrollbar-thumb: var(--orange-texture);
   --scrollbar-button: url("./assets/pixel/nature/01.gif");
}

body{
   background-color: var(--orange-bg);
   background-image: url("/background/48.gif");
   padding: var(--gap) 0 var(--double-gap) 0;
}

a{
   font-weight: bold;
   color: var(--black);
}

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

#seme, #uke{
   background-image: url("/background/m07.png");
   transform: translateY(-1px);
}
#uke{
   transform: scaleY(-1);
}

#vector,
h1,
nav{
   filter: var(--drop-shadow-medium);
}

article > *,
footer,
#seme,
#uke{
   filter: var(--drop-shadow-low);
}

h1, h2, h3{
   text-shadow: var(--text-shadow-white);
   text-align: center;
}

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

h1::before, h1::after{
   content: "┠";
   margin: 0 0.5ch;
   color: var(--white);
   text-shadow: none!important;
}

h2{
   color: var(--red);
   margin: 1em auto;
}

h2::before, h2::after{
   content: "\2013\00A0✿\00A0\2013";
   margin: 0 0.5ch;
}

#vector{
   height: var(--vector-height);
   width: var(--vector-width);
   position: fixed;
   bottom: calc(var(--gap) * 1.66);
   left: calc(var(--gap) * 1.15);
}

header, main, nav, footer{
   margin-left: calc(var(--vector-width) + var(--gap));
}

main{
	background-color: hsla(0, 0%, 100%, 0.1);
	backdrop-filter: blur(0.075svw);
   width: calc(100svw - var(--vector-width) - (var(--double-gap) * 4));
   transform: translateX(calc(var(--double-gap) * 1.5));
   box-shadow: 0 0 var(--gap) var(--double-gap) rgba(255,255,255,0.1);
}

article{
   text-align: center;
}

article::after{
   content: "";
   display: block;
   margin: 1em auto;
   width: 75%;
   height: 2.5em;
   background-image: url("/stickers/cutie/2_summer/N05.png");
      background-repeat: space no-repeat;
      background-size: auto 100%;
}

.divider{
   height: 3em;
   display: inline-block;
   margin: 1em auto;
}

nav{
   text-align: center;
   margin-bottom: var(--gap);
}