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

	variables

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

:root{
   --width: calc(100svw - 8 * var(--gap) - 1em);
   --height: calc(var(--width) * 0.5 - var(--gap));
}

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

	basic styling

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

h1{
   margin: 1em auto;
   width: 100%;
   text-align: center;
}

h1::before, h1::after{
   --size: 1em;
   content: "";
   display: inline-block;
      transform: translateY(0.25ch);
   width: var(--size);
   height: var(--size);
   margin: 0 0.5ch;
	background-image: url("/stickers/yummy/yellow/M13_A.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

main{
   --width: calc(100% - 4 * var(--gap));
   width: var(--width);
   margin: auto;
   margin-bottom: 1em;
   display: flex;
      flex-flow: row wrap;
      gap: var(--gap);
}

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

		icons

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

.icon{
   display: block;
   --size: calc(var(--width) / 5);
   width: var(--size);
   height: var(--size);
   padding: 0.66em!important;
   padding-bottom: 0!important;
}

:is(.icon.texture, .avatar.texture) > *{
   padding: 0;
}

.icon img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.icon:hover, .icon:focus{
   transform: translate(-0.3em, -0.3em);
}

.icon, .icon:hover, .icon:focus{
   transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
}

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

	shadows

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

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

.icon:hover{
   box-shadow: var(--shadow-elevation-high);
}

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

	pop up modal!!!!

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

#starrysky.active, #snooze.active{
   display: block;
}
 
#starrysky{
   display:none;
   position:fixed;
   top:0;
   left:0;
   width:100vmax;
   height:100vmax;
   background-color: var(--black);
   opacity:.5;
   filter:alpha(opacity=50);
   z-index:99;
}
 
#snooze{
   z-index: 999;
   display:none;
   position:fixed;
      top: var(--gap);
      left: calc(var(--gap) * 4);
   margin: var(--gap) auto;
   width: var(--width);
   height: var(--height);
}

#snooze > div{
   padding: 0 var(--gap)!important;
   overflow: hidden;
}

#snooze > div > section:target{
   display: grid;
}

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

	lining everything up ughghg

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

#snooze .hugme, #snooze section > div:first-of-type{
   overscroll-behavior: contain;
   height: calc(var(--height) / 1.5 - var(--gap));
}

#snooze > div > section{
  display:none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--gap);
  grid-template-areas: 'a a a'
                     'b c c'
                     'b c c';
   gap: var(--gap);
}

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

	top bar: heading

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

h2{
   grid-area: a;
   width: 100%;
   /* height: calc(100% - var(--gap)); */
   margin: 0 auto!important;
}

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

	left side: avatar and links

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

#snooze section > div:first-of-type{
   grid-area: b;
   align-self: flex-start;
}

.avatar{
   /* --size: calc(var(--height) / 2);
   height: var(--size);
   width: var(--size); */
   height: calc(100% - 4 * var(--gap));
   padding: 0.5em!important;
   box-sizing: border-box;
   margin-bottom: var(--gap);
}

.avatar img{
   object-fit: cover;
}

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

	   links and buttons

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

.navi{
   box-sizing: border-box;
   text-align: center;
}

.navi a{
   color: var(--black);
   text-decoration: none;
}

.navi a:hover{
   color: var(--white);
   text-shadow: var(--text-shadow-black);
}

a, a:hover{
	transition: color 0.2s ease, text-shadow 0.1s ease;
}

.navi, button.back{
   padding: 0.25em 0.75em!important;
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
}

button.back{
   font-size: 1em;
   text-align: right;
   margin-left: 50%;
   min-width: 50%;
}

.navi a:not(:last-of-type)::after{
   margin: 0 0.1ch 0 1ch;
}

.navi:is(.blue, .purple, .green) a:not(:last-of-type)::after{
   content: url("/assets/pixel/sky/16.gif");
}

.navi a:only-child::before, .navi a:only-child::after{
   margin: 0 1ch;
}

.navi:is(.blue, .purple, .green) a:only-child::before, .navi:is(.blue, .purple, .green) a:only-child::after{
   content: url("/assets/pixel/sky/16.gif");
}

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

	right side: rating and text

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

#snooze section > div:last-of-type{
   grid-area: c;
}

.hugme p:first-of-type{
   margin-top: 0;
}

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