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

		variables

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

:root{
   --shadow-color: 35deg 48% 50%;
   /* --brown: var(--black); */
   /* --brown-texture: var(--black-texture); */

	--gap: 2svw;
   --width: 75svw;
   --icon-size: calc(var(--width) / 3.33);

   --scrollbar-thumb: var(--red-texture);
}

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

		basic style

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

body{
   background-color: var(--yellow-bg);
   background-image: url("/background/gg12.png"), url("/background/44.png");
      background-attachment: fixed;
      background-size: 25svw auto, 5svw auto;
      background-repeat: repeat-x space, repeat;
      background-position: center top, 0 0;
}

.fancybox a img{
   width: 7em;
}

h1{
   font-size: 4em;
   margin: 0 auto;
   margin-bottom: var(--gap);
   text-align: center;
   text-shadow: var(--text-shadow-white);
}

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

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

:is(h2, h3) img{
   height: 1em;
}

#para h3,
section ~ h2{
   text-align: center;
}

.vector,
.sticker{
   z-index: 99;
   width: 30%;
}

#likes + h2{
   margin-top: 0;
}

footer a{
   font-weight: bold;
}

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

		shadows

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

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

main{
   box-shadow: var(--shadow-elevation-medium);
}

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

#icon{
   box-shadow: var(--shadow-elevation-medium-text);
}

.vector{
   filter: var(--text-drop-shadow);
}

main > div >*{
   filter: var(--drop-text-shadow);
}

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

		main content box

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

main{
   width: var(--width);
   margin: var(--gap) auto;
   padding: 1.75em!important;
}

main > div{
   height: fit-content;
   overflow: visible!important;
   padding: 1em 1em 1em 2em!important;
}

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

		icon ayayayay

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

#icon{
   width: var(--icon-size);
   height: var(--icon-size);
   position: absolute;
   transform: translate(calc(var(--gap) * -2.4), calc(var(--gap) * -1.3)) rotate(-3deg);

}

#icon img{
   padding: 0;
   object-fit: cover;
   background: var(--yellow-texture);
}

#icon + p{
   font-size: 0.75em;
   position: absolute;
   transform: translate(calc(1.5em - 2ch), calc(var(--icon-size) / 1.15 + 0.2ch));
}

#icon + p a{
   color: var(--grey);
   text-decoration: none;
}

#icon + p a:is(:hover, :target){
   color: var(--red);
}

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

		top section wahwah

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

#info{
   --shift: calc(var(--icon-size) - var(--gap) * 1.88);
   margin-left: var(--shift);
   width: calc(100% - var(--shift));
   box-sizing: border-box;
   padding-left: 0.5em;
}

#info h2{
   margin: 0 auto 0.5em auto;
}

#info div{
   width: 100%;
}

#info table{
   border-collapse: collapse;
}

#info table img{
   height: 1em;
   width: 1em;
   object-fit: contain;
}

#info th{
   padding-right: 2ch;
   text-align: left;
}

#info table:first-of-type td{
   text-align: right;
}

#info th,
#info td{
   padding-top: 1ch;
   padding-bottom: 0.3ch;
   border-bottom: 0.1svw solid var(--orange);
}

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

		paragraphs yayyy

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

#para{
   margin-top: -0.2em;
   padding-right: 0.75em;
}

#para p{
   max-width: 100%;
}

#para .vector{
   float: right;
   margin-top:-3.5em;
}

#para .sticker{
   float: left;
   margin-right: 1em;
}

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

		likes/dislikes/wahahah

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

#likes{
   --margin: calc(6.5em + var(--gap) - 2ch);
   margin-left: var(--margin);
   margin-top: -1.25em;
   width: calc(100% - var(--margin));
   box-sizing: border-box;
   display: grid;
      grid-template-columns: repeat(2, calc(50% - 2ch));
      grid-template-rows: auto;
      grid-template-areas:
         'a b'
         'a c';
      gap: 0 calc(var(--double-gap) - 0.75ch);
}

#likes h3{
   margin-bottom: 0.5em;
}

#likes ul:first-of-type h3{
   text-align: right;
   padding-right: 1.5em;
}

#likes .vector{
   width: 38%;
   float: left;
   position: absolute;
      /* top: 0.75ch; */
      left: calc(-1 * var(--margin) - 3.5em - 0.5ch);
}

#likes ul{
   box-sizing: border-box;
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 0;
}

#likes li:nth-of-type(even){
   list-style: circle;
}

#likes li{
   margin-bottom: 1ch;
}

#likes ul:nth-of-type(1){
   grid-area: a;
}

#likes ul:nth-of-type(2){
   grid-area: b;
}

#likes ul:nth-of-type(3){
   grid-area: c;
}

#likes ul:nth-of-type(3) h3{
   margin-top: 0;
}