:root{
   --link-size: calc(100svh / 3 - var(--gap));
   --header-chunk: 54svh;
}

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

		basic style

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

body{
   background-color: var(--blue-bg);
   background-image: url("/background/gg02.png"), url("/background/01.png");
      background-size: 10svw auto, 10svw auto;
      background-repeat: round, repeat;
      background-position: center, 0 0;
   display: grid;
      grid-template-areas: 'header nav' 'main nav' 'main abacus' 'main contact' 'flavour flavour' 'footer footer';
      gap: var(--gap) calc(var(--double-gap) + 0.5 * var(--half-gap));
      grid-template-columns: 1fr 15svw;
      grid-template-rows: var(--header-chunk) max-content min-content minmax(0, 1fr) repeat(2, max-content);
   margin: var(--gap) auto;
   text-align: center;
   width: 89svw;
}

.hugme::-webkit-scrollbar-thumb{
   background: var(--orange-texture);
   border-color: var(--orange);
}

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

	   links ^__+^

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

a.highlight:hover, .highlight[title]:hover{
   color: var(--red)!important;
}

.highlight[title], .highlight[title]:hover{
	transition: color 0.2s ease;
}

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

		shadows

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

nav a,
#garden strong{
   box-shadow: var(--shadow-elevation-low);
}

header,
#guestbook,
main > section:not(#playlist, #community, #flavour, #guestbook),
#playlist :is(.centered, .texture:last-child),
:is(#abacus, #flavour) > section,
#community > div,
footer{
   box-shadow: var(--shadow-elevation-medium);
}

nav,
nav > div,
#abacus h2,
#garden{
   filter: var(--drop-shadow-low);
}

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

   header!! welcome!!!!!

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

header{
   grid-area: header;
   height: var(--header-chunk);
   padding: 1.5em;
   box-sizing: border-box;
   border: var(--border-level-1);
  		border-radius: var(--border-radius-level-1);
		border-style: outset;
      border-color: var(--red);
   background: var(--red-texture);
}

header > div{
   display: flex;
      flex-flow: column wrap;
      justify-content: flex-end;
      align-items: flex-end;
   height: 100%;
   padding: var(--gap);
   padding-bottom: 0;
   box-sizing: border-box;
   border: var(--border-level-2);
  		border-radius: var(--border-radius-level-2);
		border-style: inset;
      border-color: inherit;
   background-image: url("/background/splash/home.png"), url("/background/15_A.png");
      background-size: auto 100%, auto 40%;
      background-position: left bottom, 0 0;
   
}

header > div > *{
   filter: var(--life-saving-drop-shadow) var(--drop-text-shadow);
}

h1{
   max-width: 33%;
   max-height: 33%;
   margin: 0;
}

h1 img{
   max-height: 100%;
   max-width: 100%;
}

h1 + span{
   font-style: italic;
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
   backdrop-filter: blur(0.025svw);
}

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

      navi... yes

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

nav::before, nav::after, #abacus::after, #community::before{
   --size: calc(var(--header-chunk) / 2);
   content: "";
   display: block;
   width: 100%;
   height: var(--size);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
   margin: var(--gap) auto;
}

nav::before{
   margin-top: calc(-1 * var(--half-gap));
   margin-bottom: calc(0.5 * var(--half-gap));
   background-image: url("/stickers/dotty/2_summer/J04.png");
}

nav::after{
   background-image: url("/stickers/dotty/2_summer/G06.png");
   margin-bottom: calc(-1 * var(--half-gap));
}

#abacus::after{
   background-image: url("/stickers/dotty/4_winter/D07.png");
   margin-bottom: calc(-1 * var(--half-gap));
}

nav{
   grid-area: nav;
      align-self: baseline;
}

nav a{
   position: relative;
   display: flex;
      align-items: center;
      justify-content: center;
   width: calc(100% + 0.1svw);
   height: calc(var(--header-chunk) / 7);
   box-sizing: content-box;
   border: var(--border-level-2);
      border-radius: var(--border-radius-level-2);
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
      border-right: var(--border-level-1);
      border-style: outset;
   color: var(--black);
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      text-shadow: var(--text-shadow-white);
   will-change: transform;
}

nav a > span{
   transform: translateY(0.2ch) translateZ(0);
}

nav a:is(:hover, :focus){
   color: var(--black);
   justify-content: left;
   transform: translateX(calc(-1 * var(--gap) + 0.18svw)) translateZ(0);
   width: calc(100% + 0.1svw + var(--gap) * 0.9);
}

nav a, nav a:is(:hover, :focus){
   transition: transform .2s ease-in-out, width .2s ease-in-out;
}

:is(nav a:is(:hover, :focus)) > span{
   padding: 0 3ch;
}

/* smooths borders */

nav a:first-child{
   border-top-right-radius: var(--border-radius-level-2);
}

nav a:last-child{
   border-bottom-right-radius: var(--border-radius-level-2);
}

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

	the main content section!!!!!

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

main{
   grid-area: main;
   display: grid;
      gap: var(--gap);
      grid-template-columns: 25% 1fr;
      grid-auto-rows: max-content;
}

#playlist img{
   width: 100%;
}

#welcome > div{
   display: flex;
      gap: var(--gap);
      align-items: stretch;
      justify-content: space-between;
}

#welcome > div{
   text-align: center;
   padding: 1em;
}

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

	stickers before/after headings

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

#welcome h2::before, 
#welcome h2::after{
   --size: 1em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

#welcome h2::before{
   margin-right: 0.5ch;
}

#welcome h2::after{
   margin-left: 0.5ch;
}

#welcome h2{
   margin-top: 0.5rem;
}

#welcome > div > div:first-of-type h2::before, 
#welcome > div > div:first-of-type h2::after{
   background-image: url("/stickers/cutie/2_summer/V10.png");
   background-position-y: bottom;
}

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

	updates iframe box

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

#updates{
   border-radius: var(--border-radius-level-2);
}

#updates{
   width: 20svw;
   height: 39svh;
}

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

	spotlight/featured page

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

#spotlight{
   font-size: 0.9em;
}

#spotlight h2::before, 
#spotlight h2::after{
   background-image: url("/stickers/cutie/1_spring/O06.png");
   background-position-y: bottom;
}

#spotlight img:first-of-type{
   width: calc(100% - 2ch);
   border: var(--border-level-3);
      border-radius: var(--border-radius-level-3);
      border-style: inset;
      border-color: var(--white);
}

#spotlight a{
   font-weight: bold;
   text-decoration: none;
   color: var(--red-link);
}

#spotlight a img:hover{
   border-color: var(--red-link);
}

#spotlight a img,
#spotlight a img:hover{
   transition: border-color .2s ease-in-out;
}

#spotlight a:hover,
#spotlight a:focus{
   color: var(--orange)
}

#spotlight p{
   margin: 0 auto;
}

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

	   status section

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

#status{
   grid-column: 1 / span 2;
   padding: 1.5em;
}

#status > div{
   padding: 1.5em!important;
   overflow: visible!important;
}

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

	"greetings" paragraph

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

#status p{
   margin-top: 0.5em;
   max-width: 100%;
   margin: 1em var(--gap);
}

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

	   "currently" table

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

#status table{
   min-width: fit-content;
   max-width: 45ch;
   float: left;
   position: relative;
   z-index: 99;
   margin: auto;
      margin-right: var(--gap);
      margin-bottom: var(--half-gap);
   border-spacing: 0;
   border-radius: var(--border-radius-level-2);
   vertical-align: middle;
   font-size: 0.9em;
}

#status table th{
   padding: 0.5ch 1ch; 
   padding-bottom: 0;
   border: var(--border-level-3);
      border-style: outset;
}

#status table tr:first-child th{
   border-top: var(--border-level-2);
   border-top-left-radius: var(--border-radius-level-2);
}

#status table tr:last-child th{
   border-bottom: var(--border-level-2);
   border-bottom-left-radius: var(--border-radius-level-2);
}

#status table tr:is(:first-child, :last-child) th{
   border-style: outset;
}

#status table td{
   padding: 0 1.75ch;
   padding-top: 0.75ch;
   text-align: left;
   border: var(--border-level-3);
      border-style: dotted;
      border-color: var(--grey);
      border-left: 0;
}

#status table tr:first-child td{
   border-top: var(--border-level-3);
   border-top-right-radius: var(--border-radius-level-2);
}

#status table tr:last-child td{
   border-bottom: var(--border-level-3);
   border-bottom-right-radius: var(--border-radius-level-2);
}

#status table tr:is(:first-child, :last-child) td{
   border-style: dotted;
}

#status table :is(th, td){
   border-top: 0;
}

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

	   cute girl icon

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

#statuswrapper{
   height: min-content;
   width: fit-content;
   display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      gap: 0 var(--gap);
   margin: 0 auto;
}

#statuswrapper > img:is(:first-child, :last-child){
   width: 5em;
   align-self: flex-end;
}

#icon{
   --size: 15svw;
   width: var(--size);
   height: var(--size);
   background: var(--orange-texture);
    mask-image: url("https://i.postimg.cc/xdqthzqr/cat-01-sharp.png");
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
}

#icon > img{
   mask-image: url("https://i.postimg.cc/MG4dSpjn/cat-02-sharp.png");
   mask-size: 100%;
   mask-repeat: no-repeat;
   mask-position: center;
   width: calc(var(--size) - 4.5ch);
   height: auto;
   margin: 2ch;
   margin-top: 2.75ch;
   transform: scale(1.08, 1.1);
}

#icon_wrapper{
   --border-color: #89563E;
   transform: rotate(5deg) translateY(0.5ch);
   filter: drop-shadow(0.2svw 0.2svw var(--border-color)) drop-shadow(0.25svw 0 var(--border-color)) var(--drop-text-shadow);
   position: relative;
   margin: auto;
   width: min-content;
}

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

	   status cafe

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

#statuscafe {
   min-width: 27ch;
   /* max-width: 32ch; */
   max-width: 45ch;
   background-color: transparent;
   font-size: 1em;
   line-height: 1.1;
   margin-top: 2ch;
}

#statuscafe-username {
   margin-bottom: .5em;
   font-weight: bold;
   z-index: 99;
   position: relative;
}

#statuscafe-username a{
   /* color: var(--orange-link); */
   color: var(--red-link);
   text-decoration: none;
}

#statuscafe-username a:hover,
#statuscafe-username a:focus{
   color: var(--blue-link);
}

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

	oops i joined a bunch of fanlistings!

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

#community::before{
   --size: 12svw;
   margin-top: 0;
   background-image: url("/stickers/cutie/2_summer/Q02.png");
}

#community{
   text-align: center;
   grid-row-end: span;
}

#community a{
   color: var(--aqua-link);
}

#community a:is(:hover, :focus){
   color: var(--red-link);
}

#community > .texture{
   padding: 0.5em;
   height: 145svh;
}

#community > .texture > div{
   display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column nowrap;
   line-height: 1.4;
}

#community h3{
   margin: 1.5rem auto;
   margin-top: 0;
}

#community img{
   max-width: calc(35% - 1ch);
}

#community .hugme{
   margin-right: 0;
   padding: 0 2ch;
}

#community .hugme::-webkit-scrollbar {
   width: 0.36rem;
   height: 0.36rem;
}

#community .hugme::-webkit-scrollbar-thumb {
   background: var(--green-texture);
   border-color: var(--green);
}

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

	guestbook section...? hmmmm

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

#guestbook{
   grid-column: 2;
   justify-self: stretch;
   height: 175svh;
}

#guestbook > div{
   --back-position: 0.75em;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
      background-position: 
			var(--back-position) var(--back-position),
			calc(100% - var(--back-position)) var(--back-position),
			var(--back-position) calc(100% - var(--back-position)),
			calc(100% - var(--back-position)) calc(100% - var(--back-position)),
			0 0;
      background-size: 2.25em;
		background-image: 
         url("/stickers/dotty/2_summer/G05.png"),
			url("/stickers/dotty/1_spring/F09.png"),
         url("/stickers/dotty/2_summer/G05.png"),
			url("/stickers/dotty/1_spring/F09.png"),
			url("/background/texture/white.png");
   overscroll-behavior: auto!important;
}

#guestbook h2{
   height: 25svh;
   max-width: 30svw;
   margin: 0.75em auto;
   background-image: url("/stickers/cutie/2_summer/A01_A.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center bottom;
}

#guestbook h2 span{
   display: inline-block;
   transform: translateY(-0.5ch);
}

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

	more contact / misc info idkkkk

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

#garden{
   grid-area: contact;
   margin-top: var(--gap);
}

#garden strong{
   display: block;
   width: 80%;
   height: 1em;
   padding-bottom: 1em;
   margin: 1em auto;
   border: var(--border-level-1);
      border-style: outset;
      border-radius: var(--border-radius-level-1);
}

#garden img{
   width: 50%;
}

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

	abacus.. numbers... number go UP!!!

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

#abacus{
   grid-area: abacus;
}

:is(#abacus, #garden) h2, :is(#abacus, #flavour) > section{
   display: flex;
      align-items: center;
      justify-content: center;
   margin: calc(1.5 * var(--gap)) auto;
}

#abacus > section:last-child{
   margin-bottom: var(--half-gap);
}

:is(#abacus, #flavour) a{
   color: var(--black);
   text-decoration: none;
}

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

	sidebar floating heading

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

:is(#abacus, #garden) h2{
   margin: 0;
   text-align: center;
   text-shadow: var(--text-shadow-white);
}

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

	the little boxes themselves!!!

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

:is(#abacus, #flavour) > section{
   display: block;
   padding: 1em;
   padding-bottom: 0.5em;
   box-sizing: border-box;
   border: var(--border-level-1);
      border-style: outset;
      border-radius: var(--border-radius-level-1);
   line-height: 1.4;
   font-size: 0.9em;
   font-weight: bold;
}

:is(#abacus, #flavour) > section > span:not(.highlight){
   display: inline;
}

#abacus > section:first-of-type{
   padding-bottom: 1em;
}

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

	cute inset white text

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

.highlight{
   display: block;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding: 1ch;
      padding-bottom: 0.1ch;
   background: var(--white-texture)!important;
   box-shadow: 0.13em 0.11em 0.36em hsla(22, 32%, 85%, 0.9) inset;
   border: var(--border-level-2);
      border-style: inset;
      border-radius: var(--border-radius-level-2);
   font-size: 0.9em;
   font-weight: normal;
}

.highlight > *{
   filter: var(--drop-text-shadow);
}

:is(#lastupdate, #hitcount, #nc_hitcount).highlight{
   text-shadow: var(--literal-text-shadow);
}

#abacus .highlight{
   margin-bottom: 1.5ch;
}

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

	this one has the white box on the bottom, so...

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

#lastupdate.highlight{
   margin-top: 0.5em;
   margin-bottom: 0;
}

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

	flavours... text cliques!!!

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

#flavour{
   grid-area: flavour;
   display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      gap: var(--half-gap);
}

#flavour > section{
   height: max-content;
   max-width: calc(100% / 6);
   margin: 0!important;
   padding: 1em 1ch 0.75em 1ch!important;
}

#flavour .highlight{
   height: fit-content;
   margin: auto;
   margin-top: 0.5em;
   width: 100%;
   box-sizing: border-box;
}

#flavour .highlight > span{
   width: 16ch;
   display: inline-block;
}

#flavour > section:last-of-type > span::after{
   --size: 3.25svw;
   position: absolute;
      transform: translate(0, -6svh);
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
	background-image: url("/stickers/yummy/orange/D06.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

#flavour img{
   max-width: 1.5svw;
}

#flavour > section:first-of-type img{
   max-width: 1svw;
}

#flavour > section:first-of-type > span:first-child{
   font-size: calc(15svw / 11);
}

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

	AND LAST BUT NOT LEAST!!!!!!!! THE FOOTER!!!!!!!!!!

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

footer{
   grid-area: footer;
   height: fit-content;
}

footer > div{
   padding: 1em!important;
   padding-bottom: 0.5em!important;
   display: flex;
      justify-content: center;
      gap: 3ch;
}

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

	   texture colours hehe

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

/* orange */

nav a:nth-of-type(7n + 2),
#flavour section:last-of-type,
#flavour section:last-of-type > .highlight,
#status table tr:nth-child(2) th{
   background: var(--orange-texture);
   border-color: var(--orange);
}

:is(nav a:nth-of-type(7n + 2), #status table tr:nth-child(2) th) > span,
#flavour section:last-of-type > span:not(.highlight){
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-orange) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-orange) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-orange) / 0.18));
}

/* yellow */

nav a:nth-of-type(7n + 3),
#status table tr:nth-child(3) th,
:is(#abacus section:nth-of-type(5n + 1), #flavour section:nth-of-type(5n)),
:is(#abacus section:nth-of-type(5n + 1), #flavour section:nth-of-type(5n)) > .highlight,
#garden strong:nth-of-type(3){
   background: var(--yellow-texture);
   border-color: var(--yellow);
}

:is(nav a:nth-of-type(7n + 3), #status table tr:nth-child(3) th, #garden strong:nth-of-type(3)) > span,
:is(#abacus section:nth-of-type(5n + 1), #flavour section:nth-of-type(5n)) > span:not(.highlight){
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-yellow) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-yellow) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-yellow) / 0.18));
}

/* green */

nav a:nth-of-type(7n + 4),
#status table tr:nth-child(4) th,
:is(#abacus section:nth-of-type(5n + 2), #flavour section:nth-of-type(5n + 4)),
:is(#abacus section:nth-of-type(5n + 2), #flavour section:nth-of-type(5n + 4)) > .highlight,
#garden strong:nth-of-type(2){
   background: var(--green-texture);
   border-color: var(--green);
}

:is(nav a:nth-of-type(7n + 4), #status table tr:nth-child(4) th, #garden strong:nth-of-type(2)) > span,
:is(#abacus section:nth-of-type(5n + 2), #flavour section:nth-of-type(5n + 4)) > span:not(.highlight){
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-green) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-green) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-green) / 0.18));
}

/* aqua */

nav a:nth-of-type(7n + 5),
#status table tr:nth-child(5) th,
:is(#abacus, #flavour) section:nth-of-type(5n + 3),
:is(#abacus, #flavour) section:nth-of-type(5n + 3) > .highlight,
#garden strong:nth-of-type(1){
   background: var(--aqua-texture);
   border-color: var(--aqua);
}

:is(nav a:nth-of-type(7n + 5), #status table tr:nth-child(5) th, #garden strong:nth-of-type(1)) > span,
:is(#abacus, #flavour) section:nth-of-type(5n + 3) > span:not(.highlight){
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-aqua) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-aqua) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-aqua) / 0.18));
}

/* blue */

nav a:nth-of-type(7n + 6),
#status table tr:nth-child(6) th,
:is(#abacus section:nth-of-type(5n + 4), #flavour section:nth-of-type(5n + 2)),
:is(#abacus section:nth-of-type(5n + 4), #flavour section:nth-of-type(5n + 2)) > .highlight{
   background: var(--blue-texture);
   border-color: var(--blue);
}

:is(nav a:nth-of-type(7n + 6), #status table tr:nth-child(6) th) > span,
:is(#abacus section:nth-of-type(5n + 4), #flavour section:nth-of-type(5n + 2)) > span:not(.highlight){
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-blue) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-blue) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-blue) / 0.18));
}

/* purple */

nav a:nth-of-type(7n),
#status table tr:nth-child(7) th,
:is(#abacus section:nth-of-type(5n), #flavour section:first-of-type),
:is(#abacus section:nth-of-type(5n), #flavour section:first-of-type) > .highlight{
   background: var(--purple-texture);
   border-color: var(--purple);
}

:is(nav a:nth-of-type(7n + 7), #status table tr:nth-child(7) th) > span,
:is(#abacus section:nth-of-type(5n), #flavour section:first-of-type) > span:not(.highlight){
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-purple) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-purple) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-purple) / 0.18));
}

/* red */

nav a:nth-of-type(7n + 1),
#abacus section:last-of-type,
#abacus section:last-of-type > .highlight,
#status table tr:nth-child(1) th{
   background: var(--red-texture);
   border-color: var(--red);
}

:is(nav a:nth-of-type(7n + 1),
#abacus section:last-of-type > span:not(.highlight),
#status table tr:nth-child(1) th) > span{
   filter: 
   drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-red) / 0.22))
   drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-red) / 0.20))
   drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-red) / 0.18));
}