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

		variables

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

:root{
	--sidebar-width: 22svw;
	--text-shadow-color: 22deg 15% 58%;
	--shadow-color: 22deg 15% 58%;
}

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

		basic layout

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

body{
	background-color: var(--bg-color);
   display: grid;
      grid-template-columns: var(--sidebar-width) auto;
      gap: 0;
	margin: 0;
}

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

		shadows!!!!!!!!

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

h1, nav{
	box-shadow: var(--shadow-elevation-medium), var(--shadow-elevation-medium);
}

h1 >*{
   filter: var(--sticker-drop-shadow);
}

h2, h3{
	filter: var(--drop-shadow-low) var(--drop-shadow-low);
}

p, img{
	filter: var(--drop-shadow-low);
}

main a:last-of-type, p{
	text-shadow: var(--literal-text-shadow);
}

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

	navigation sidebar

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

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

	sidebar itself

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

nav{
	background: var(--white-texture);
	display: block;
	box-sizing: border-box;
		height: 100svh;
		width: var(--sidebar-width);
		padding: 0.5svw;
		padding-right: 1.25svw;
	position: sticky;
		top: 0;
		align-self: start;
	border-right: var(--border-level-1);
		border-style: outset;
}

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

	scrolling container

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

nav .hugme{
	padding-left: 0;
	padding-right: 0;
	padding-top: var(--gap);
	box-sizing: border-box;
	text-align: center;
	height: 100%;
	overflow-y: scroll;
}

.hugme::-webkit-scrollbar{
   width: 0.75rem;
}

.hugme::-webkit-scrollbar-thumb{
   background: var(--white-texture);
	border: none;
	border-radius: var(--border-radius-level-3);
}

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

		link cards!!!

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

nav a{
	--size: calc(var(--sidebar-width) * 0.6);
	z-index: 999;
	text-align: center;
	display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
	margin: 0 auto;
	margin-bottom: calc(var(--double-gap));
	padding: 0.25em;
	width: var(--size);
	height: var(--size);
   background: var(--white-texture);
	border: var(--border-level-1);
		border-style: outset;
		border-color: var(--white);
		border-radius: var(--border-radius-level-1);
	box-shadow: var(--sticker-elevation-medium);
	overscroll-behavior: contain;
	text-decoration: none;
}

nav a:last-child{
	margin-bottom: var(--gap);
}

a.new::after{
	content: "new!";
	display: block;
	width: 100%;
	font-size: 1.5em;
	font-family: var(--heading-font);
	text-shadow: var(--text-shadow-white);
}

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

	POP OUT ON HOVER!!!

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

nav a:is(:hover, :focus){
	transform: scale(1.075);
   filter: brightness(1.02);
	box-shadow: var(--sticker-elevation-high);
}

nav a, nav a:is(:hover, :focus){
	transition: box-shadow 0.25s ease, transform 0.3s ease, filter 0.2s ease;
}

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

	preview images hehe

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

nav img{
	max-width: 95%;
	max-height: 90%;
	display: block;
	margin: auto;
	filter: var(--drop-shadow-low);
	object-fit: contain;
}

nav a:hover img{
   filter: var(--drop-shadow-low) brightness(1.01) saturate(1.01);
}

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

	main body w stickers

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

main{
	text-align: center;
	background: var(--white-texture);
	padding: 0 1em;
}

main a:last-of-type{
	color: var(--black);
	font-size: 1.15em;
}

main a:last-of-type::before, main a:last-of-type::after{
	content: "\273F";
	margin: 0 0.25em;
}

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

		headings :+D

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

h1, h2{
	margin: 0.25em auto;
}

h1{
	text-shadow: var(--text-shadow-white);
	display: inline-block;
	font-size: calc(80svw / 12);
	padding: 0.15em 0.4em 0.3em 0.4em;
	border: var(--border-level-1);
		border-radius: var(--border-radius-level-1);
		border-style: outset;
}

h2{
	font-size: calc(65svw / 12);
	margin-bottom: 0.5em;
}

h3{
	font-size: calc(50svw / 12);
}

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

		STICKER TIME!!!!!!!!!!!!!!!!!!!!

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

main > section{
	display: none;
}

main > section:target{
	display: block;
}

img{
	max-width: 100%;
	object-fit: contain;
	display: inline-block;
	margin: 0.5em;
}

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

	first img (raw sheet)

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

h2 + img{
	max-width: 100%;
	max-width: 100svh;
}

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

	icon size imgs

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

.icon img{
	max-height: 15svh;
	max-width: calc(100% / 10);
}

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

	divider size imgs

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

.dividers img{
	max-width: 42%;
}

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

	large imgs

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

.large img{
	max-height: 50svh;
	max-width: 45%;
}