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

		variables

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

:root{
	--shadow-color: 44deg 25% 54%;

   --pink: #C89191;
	--brown: #714424;
	--orange: #D69358;
	--yellow: #e4b72f;
	--green: #ABBB7C;
	--purple: #a7708a;

	--green2: #96a957;
	--orange2: #cb8648;
	--yellow2: #daaa1c;
	--purple2: #9d627d;
   --pink2: #be7878;

	--brown-texture: var(--brown) url("/background/texture/brown.png");
	--orange-texture: var(--orange) url("/background/texture/orange3.png");
	--yellow-texture: var(--yellow) url("/background/texture/yellow4.png");
	--green-texture: var(--green) url("/background/texture/green5.png");
	--purple-texture: var(--purple) url("/background/texture/purple2.png");
	--pink-texture: var(--pink) url("/background/texture/pink3.png");

	--scrollbar-thumb: var(--purple-texture);
	--scrollbar-button: url("/assets/pixel/heart/04.gif");
}

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

		basic styling

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

body{
	background-color: var(--yellow-bg);
	background-image: url("/background/11.png");
		background-size: 18%;
		background-position: 25% -5%;
}

h1,
body > p{
	text-align: center;
}

h1,
footer,
body > p:first-of-type{
	text-shadow: var(--text-shadow-white)
}

footer{
	font-weight: bold;
}

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

	shadows

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

body > p,
footer{
	filter: var(--life-saving-drop-shadow);
}

.texture{
	box-shadow: var(--life-saving-box-shadow);
}

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

	the cute boxes!!!!!!

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

.texture{
	grid-template-rows: auto auto;
}

.texture:nth-of-type(odd){
   grid-template-areas: 'main img' 'charm charm';
   grid-template-columns: 1fr var(--size);
}

.texture:nth-of-type(even){
   grid-template-areas: 'img main' 'charm charm';
   grid-template-columns: var(--size) 1fr;
}

div > a:last-child{
	display: inline-block;
}

div:not(:last-child) > a:last-child{
	margin-bottom: 1em;
}

h2::before, h2::after{
   --size: 0.6em;
   content: "";
   display: inline-block;
	margin: 0 0.33em;
   width: var(--size);
   height: var(--size);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

h2::before, h2::after{
	background-image: url("/assets/pixel/heart/05.gif");
}

.green h2::before, .green h2::after, .orange h2::before, .orange h2::after, .yellow h2::before, .yellow h2::after{
	background-image: url("/assets/pixel/heart/06.gif");
}

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

	the images :+DD MY HUSBANDOS

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

.img img{
	/*
	border: var(--border-level-3);
		border-style: inset;
		border-color: var(--white);
	box-sizing: border-box;
	*/
	border-radius: var(--border-radius-level-3);
	height: 95%;
}

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

	final row: charm point list

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

.charm{
	grid-area: charm;
	padding: 0!important;
	height: 3em;
	display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
}

.charm h3{
	margin: 0 0.5em;
	margin-top: -0.15em;
	display: inline-block;
}

.charm > div{
	flex: 2;
	display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-around;
}

.charm > div > span{
	display: inline-block;
	padding-top: 0.5em;
}

.texture:nth-of-type(odd) .charm{
	flex-flow: row-reverse;
}

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

	changes scrollbar colour

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

.texture.purple > .hugme::-webkit-scrollbar-thumb, .texture.pink > .hugme::-webkit-scrollbar-thumb, .texture.orange > .hugme::-webkit-scrollbar-thumb{
	background: var(--aqua-texture);
		border-color: var(--aqua);
}

.texture.red > .hugme::-webkit-scrollbar-thumb, .texture.yellow > .hugme::-webkit-scrollbar-thumb{
	background: var(--green-texture);
		border-color: var(--green);
}

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

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

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

	link that lets you escape this page

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

main > .texture:is(:nth-last-child(2), :nth-last-child(3)){
	display: block;
	margin: var(--double-gap) auto;
}

main > .texture:nth-last-child(3){
	width: 70ch;
}

main > .texture:nth-last-child(2){
	max-width: calc(45svw + 2.5em);
	padding-bottom: 0.25em;
}

main > .texture:nth-last-child(2) > img{
	padding: 0;
	width: 45svw;
}

main > .texture:last-child{
	display: block;
	width: 55ch;
}

main > .texture:last-child p{
	margin: 0 auto;
	text-align: center;
}