:root{
   --shadow-color: 199deg 14% 58%;
   --blue2: hsl(230, 41%, 49%);
}

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

		basic style

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

body{
   width: calc(100svw - 6 * var(--double-gap));
   margin: var(--gap) auto;
   display: grid;
      grid-template-areas: 'header' 'main' 'footer';
      gap: var(--gap);
      grid-auto-flow: row;
      grid-auto-columns: minmax(0, 1fr);
   background-image: url("/background/splash/01.png"), url("/background/01.png");
      background-size: auto 80svh, 10svw auto;
      background-position: calc(-1.5 * var(--gap)) center;
      /*
   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;
      */
}

footer{
   font-size: 0.8em;
}

#footer{
   grid-area: footer;
   width: fit-content;
   margin: auto;
   padding: 0.75em!important;
   text-align: center;
}

#footer a{
   display: inline-block;
   height: fit-content;
}

#footer > div{
   display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--half-gap);
   padding: 0.75em 2em;
   padding-bottom: 0;
}

#footer strong::before {
   --size: 2em;
   content: "";
   display: inline-block;
   margin-right: 1ch;
   width: var(--size);
   height: var(--size);
   transform: translateY(0.5em);
   background-image: url("/stickers/yummy/orange/T01.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

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

		shadows

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

header > *,
#welcome,
#handhold,
#footer,
#selfinsertwebring,
#women-web td,
.fictolove-boxxy,
#templateWebring{
   box-shadow: var(--shadow-elevation-medium);
}

journal-ring,
#yume-ring{
   filter: var(--drop-shadow-medium);
}

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

		THE HEADER!!!!!!! HERE WE GO!!!!!!!!!!

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

header{
   margin: 0 auto;
   grid-area: header;
   width: 100%;
}

header *{
   box-sizing: border-box;
}

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

		borders, nesting

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

header > div{
   padding: 1em;
   border: var(--border-level-1);
   border-radius: var(--border-radius-level-1);
}

h1{
   background: var(--black-texture);
   border-style: inset;
   box-shadow: 0.1em 0.08em 0.25em hsla(0, 3%, 6%, 0.45) inset;
   color: var(--white2);
   text-align: center;
   text-shadow: var(--text-shadow-white);
}

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

		nesting layer 1

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

header > div{
   --bg-size: 2svw;
   display: block;
   width: 100%;
   padding: var(--bg-size);
   border-color: var(--red);
   border-style: outset;
   background-color: var(--red);
      background-image: url("/background/02.gif");
      background-size: calc(var(--bg-size) * 1.21);
}

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

		nesting layer 2

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

header > div > div{
   background: var(--white-texture);
   padding: 1.4svw;
   border: var(--border-level-2);
   border-style: outset;
      border-color: var(--red);
      border-radius: var(--border-radius-level-2);
   filter: var(--simple-text-shadow);
}

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

		the actual heading!!

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

h1{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   margin: 0 auto;
   padding: 0.25em 0;
   border: var(--border-level-2);
   border-radius: var(--border-radius-level-3);
   color: var(--black2);
}

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

		::before / ::after

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

h1::before,
h1::after{
   --sticker-size: 23svw;
   content: "";
   display: inline-block;
   width: var(--sticker-size);
   height: calc(var(--sticker-size) / 2);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

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

	cute images on the sides

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

h1 > *,
h1::before,
h1::after{
   filter: drop-shadow(0.07em 0.05em 0.03em hsla(0, 3%, 6%, 0.4));
}

h1::before{
   background-image: url("/stickers/cutie/scenes/Spring_01.png");
}

h1::after{
   background-image: url("/stickers/cutie/scenes/Summer_01.png");
}

h1 img{
   max-height: 1.5em;
}

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

	main area -- sidebars n main box

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

main{
   width: 100%;
   margin-top: var(--gap);
   margin-bottom: calc(-1 * var(--gap));
   display: grid;
   grid-template-columns: 30% 1fr;
   grid-template-rows: 1fr var(--gap);
   grid-template-areas: 'sidebar welcome';
   gap: var(--gap) var(--double-gap);
}

#welcome{
   grid-area: welcome;
   align-self: start;
   --bg-size: 2.75svw;
   padding: var(--bg-size) !important;
   background-image: url("/background/03.png") !important;
   background-size: calc(1.5 * var(--bg-size)) !important;
   margin-left: var(--gap);
}

#welcome > div{
   --back-position: 0.75em;
   background-color: var(--white2);
   background: var(--white-texture);
   background-repeat: no-repeat, no-repeat, repeat;
   background-position:
      var(--back-position) calc(100% - var(--back-position)),
      calc(100% - var(--back-position)) calc(100% - var(--back-position)),
      0 0;
   background-size: 1.5em;
   background-image:
      url("/stickers/cutie/1_spring/C19.png"),
      url("/stickers/cutie/1_spring/C19.png"),
      url("/background/texture/white.png");
}

.enter{
   display: block;
}

.enter:hover,
.enter:focus{
   transform: scale(1.05);
}

.enter,
.enter:hover,
.enter:focus{
   transition: transform .2s ease-in-out, filter .2s ease;
}

#welcome .enter{
   margin: auto;
   margin-bottom: 1.5em;
}

#welcome img.enter{
   max-width: 75%;
}

#welcome .enter:hover,
#welcome .enter:focus{
   filter: var(--drop-text-shadow);
}

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

		WEBRINGS!!!!!!!!!

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

#webrings{
   grid-area: sidebar;
   display: flex;
   flex-flow: column wrap;
   align-items: stretch;
   justify-content: flex-start;
   gap: var(--double-gap) 0;
   font-size: 0.8em;
   text-align: center;
}

#webrings a{
   color: var(--black2);
   text-decoration: none;
}

.fictolove-boxxy,
#handhold,
#women-web td,
#selfinsertwebring,
#yume-ring table{
   border: var(--border-level-1) !important;
   border-style: outset !important;
   border-radius: var(--border-radius-level-1) !important;
   border-color: inherit;
}

#handhold > div,
#women-web .webring-links,
.fictolove-info,
#selfinsertwebring div,
#yume-ring table tr{
   display: block;
   border: var(--border-level-2);
   border-style: inset;
   border-radius: var(--border-radius-level-2);
   border-color: inherit;
   box-shadow: 0.13em 0.11em 0.36em hsla(22, 32%, 85%, 0.9) inset;
   background: url("/background/texture/white.png");
   padding-top: 0.5ch;
}

:is(#handhold > div,
   #women-web .webring-links,
   .fictolove-info) > *{
   filter: var(--drop-text-shadow);
}

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

	women of the internet

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

#women-web table{
   border-spacing: var(--half-gap) 0;
   width: 100%;
}

#women-web td{
   background: url("/background/texture/green.png");
   border-color: var(--green) !important;
}

#women-web :is(.webring-prev, .webring-next){
   display: block;
   padding: 0.5ch 0;
   padding-bottom: 0;
   margin-top: calc(50% + 0.5ch);
   font-weight: bold;
}

#women-web img,
#women-web :is(.webring-prev, .webring-next){
   filter: var(--simple-text-shadow);
}

#women-web .webring-links{
   width: calc(100% - 2ch);
   margin: 1ch auto;
   margin-top: 0;
   border-color: var(--green);
}

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

	   bjd handhold

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

#handhold{
   background: url("/background/texture/red.png");
   border-color: var(--red) !important;
   width: 100%;
   padding: 1ch;
}

#handhold img{
   border: var(--border-level-3);
   border-style: outset;
   border-radius: var(--border-radius-level-3);
   border-color: var(--red);
}

#handhold > span{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: bold;
   line-height: 1;
   padding-bottom: 0.5ch;
}

#handhold > div{
   border-color: var(--red);
   filter: var(--drop-text-shadow);
}

#handhold a{
   text-decoration: none;
   color: var(--red-link);
}

#handhold a:focus,
#handhold a:hover{
   color: var(--black);
}

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

	   yume ring

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

#yume-ring{
   text-align: center;
}

#yume-ring a{
   color: var(--blue-link);
}

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

#yume-ring table{
   padding: 1ch;
   border-color: var(--blue)!important;
   background: var(--blue-texture);
   margin: auto!important;
   font-size: 0.8em!important;
}

#yume-ring table tr{
   padding: 1ch;
   padding-bottom: 0.5ch;
   text-shadow: var(--literal-text-shadow);
}

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

	   journal-ring 

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

#journal-ring{
   transform: scale(1.25);
   text-transform: lowercase;
   font-weight: bold!important;
   font-size: 0.9em;
   color: var(--aqua-link)!important;
   text-shadow: var(--text-shadow-white)!important;
}

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

	   2d lovering

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

#fictoring{
   margin: 0 !important;
   padding: 0 !important;
}

.fictolove-info,
.fictolove-links{
   font-size: 1em !important;
}

.fictolove-boxxy{
   background: url("/background/texture/purple.png") !important;
   border-color: var(--purple) !important;
   padding: 0 2ch 1ch 2ch !important;
   width: max-content !important;
}

.fictolove-info,
.fictolove-links,
.fictolove-prev,
.fictolove-next{
   color: var(--black) !important;
   font-weight: bold !important;
   font-family: var(--body-font) !important;
}

.fictolove-info{
   text-transform: uppercase;
   border-color: var(--purple);
   padding: 0 2ch;
   padding-top: 0.5ch;
}

.fictolove-info::after{
   content: " ~";
}

#fictoring a:first-of-type{
   display: block !important;
   margin-bottom: -3.5ch;
}

#fictoring span{
   filter: none !important;
   display: inline-block !important;
}

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

	self insert ring

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

#selfinsertwebring{
   box-sizing: border-box;
   padding: 1ch;
   font-weight: bold;
   text-align: center;
   border-color: var(--yellow)!important;
   background-image: url('/background/texture/yellow.png');
   display: grid;
      grid-template-columns: 8svw 1fr;
      grid-template-rows: 1fr max-content;
      gap: 1ch;
   font-size: 0.8em;
   font-family: 'MS PGothic', var(--body-font);
   text-shadow: var(--literal-text-shadow);
}

.my-font{
   font-family: var(--body-font);
}

#selfinsertwebring a{
   color: #D08100;
   font-weight: bold;
}

#selfinsertwebring a:hover,
#selfinsertwebring a:focus{
   color: #B85C00;
}

#selfinsertwebring img{
   border: var(--border-level-3);
   display: block;
   box-sizing: border-box;
   object-fit: cover;
   height: 100%;
   width: 100%;
}

#selfinsertwebring div{
   text-align: center;
   font-weight: normal;
   box-sizing: border-box;
}

#selfinsertwebring div:first-of-type{
   display: flex;
      align-items: center;
      justify-content: center;
   padding: 1ch;
}

#selfinsertwebring div:first-of-type p{
   max-width: 25ch;
   line-height: 1.3;
}

#selfinsertwebring div:last-of-type{
   grid-column: 1 / span 2;
}

#selfinsertwebring :is(div, img){
   border-style: inset;
   border-color: var(--yellow);
   border-radius: var(--border-radius-level-2);
}