:root{
   --body-font: 'JF Dot Izumi Gothic 16', sans-serif;
   --heading-font: 'JF Dot Izumi Gothic 16', sans-serif;

   --sidebar: 22svw;
   --main-width: calc(100svw - 3 * var(--gap) - var(--sidebar));

   --black: #364049;
   --grey: #ccc;
   --yellow: hsl(57, 100%, 78%);
   --pink: hsl(345, 80%, 96%);
   --aqua2: hsl(189, 62%, 75%);
   --blue2: hsl(208, 37%, 46%);
   --blue3: hsl(208, 55%, 87%);

   --blue-link: var(--blue2);
   
   --box-shadow: hsla(220, 54%, 40%, 0.25);
   --drop-shadow: drop-shadow(0.2ch 0.15ch 0.05ch hsla(220, 54%, 40%, 0.66));

   --scrollbar-thumb: var(--aqua-texture);
   --scrollbar-button: url("/assets/pixel/sky/20.gif");
   --selection-bg: var(--pink);
}

body{
   background-color: var(--aqua-bg);
   background-image: url("/background/gg15.png"), url("/background/gg11.gif"), linear-gradient(to top, var(--aqua2), var(--aqua), 60%, var(--blue));
      background-size: auto, 20svw;
   font-size: 1.25svw;
}

section > div,
article,
#HCB_comment_box #hcb_form :is(textarea, input), 
#comments_list > .comment{
   border: var(--border-level-3);
      border-style: outset;
      border-color: var(--blue2);
   box-sizing: border-box;
   background-color: var(--white2);
   box-shadow: 0.8ch 0.75ch 0.1ch var(--box-shadow);
}

footer, h1, #HCB_comment_box > h3, main nav{
   filter: var(--drop-shadow);
   text-shadow: var(--text-shadow-white);
}

/* cursors */

html, .fancybox__caption{
    cursor: url("./assets/cursor-wii1.gif") 10 0, auto!important;
}

a, button, details summary, dfn, *[title], select{
    cursor: url("./assets/cursor-wii2.gif") 10 0, pointer!important;
}

textarea, input[type="text"], input[type="text"]::target-text{
	cursor: url("./assets/cursor-design.gif"), text;
}

/* main */

h1{
   text-align: center;
}

main{
   min-height: 80svh;
   width: var(--main-width);
   margin-left: var(--gap);
}

main nav{
   width: 30%;
   margin: var(--double-gap) auto 0 auto;
   text-align: center;
   font-weight: bold;
}

/* "posts" */

article{
   width: 66%;
   padding: 1em;
   margin: var(--gap) auto;
}

u{
   text-decoration-color: var(--blue2);
}

article > u{
   color: var(--blue2);
   display: block;
   margin: 1em 0 1.25em 0;
}

blockquote{
   border-left: dotted 0.15svw var(--blue2);
   padding-left: 1em;
   margin-left: 0.5em;
}

article .date{
   display: block;
   padding: 1ch;
   background-color: var(--blue3);
   border: 0.1svw outset var(--blue2);
   box-shadow: 0.075svw 0.075svw var(--grey);
   text-align: right;
}

article .date::after,
article > u::before{
   content: " \2606";
   margin: 0 1ch;
   display: inline-block;
   transform: translateY(-0.1ch);
}

article > u::before{
   margin-left: 0;
   color: var(--black);
}

#toybox img:not(.mine){
   display: inline-block;
   padding-bottom: 0.25ch;
   transform: translateY(0.5ch);
}

#toybox a img:is(:hover, :focus){
   box-shadow: 0 0.33ch var(--aqua2);
}

.quiz a:is(:hover, :focus) img{
   transform: scale(1.1);
}

ol ol{
   list-style: lower-alpha;
}

/* sidebar */

section{
   text-align: center;
   width: var(--sidebar);
   min-height: var(--sidebar);
   position: fixed;
      top: var(--gap);
      right: calc(2 * var(--gap));
}

section > div{
   padding: 1em;
   padding-bottom: 0;
}

#icon{
   width: 75%;
   transform: translate(-0.1ch, 2em) rotate(-3deg);
}

/* footer */

footer{
   font-size: 0.8em;
   font-weight: bold;
   line-height: 1.75;
   margin: 2em auto 2em auto;
}

footer a{
   text-decoration: none;
   font-variant: small-caps;
   letter-spacing: 0.33ch;
   color: var(--red-link);
}

footer a:is(:hover, :focus){
   color: var(--blue-link)
}

#fuwa{
   margin: 0 auto;
   width: 27svw;
   height: 25svw;
   background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
}