/* ----- css coded by hand by elysia ----- */
		/* ----- universal animations ----- */
		@media (prefers-reduced-motion: no-preference) {
			@keyframes pattern-layer {
				0% {
					background-position: 0 0;

				}
				100% {
					background-position: -20% 20%;
				}
			}
			@keyframes pattern-layer-slow {
				0% {
					background-position: 0 0;

				}
				100% {
					background-position: -20% 120%;
				}
			}
			@keyframes wiggle-wiggle {
				0% {transform: translateX(0px);}
				25% {transform: translateX(10px);}
				50% {transform: translateX(0px);}
				75% {transform: translateX(-10px);}
				100% {transform: translateX(0px);}
			}
			@keyframes bg-rotate-white {
			0%{background-position:0% 52%}
				50%{background-position:100% 49%}
				100%{background-position:0% 52%}
			}
			@keyframes hue-rotate {
				0% {filter: hue-rotate(0deg);}
				50% {filter: hue-rotate(180deg);}
				0% {filter: hue-rotate(0deg);}
			}
			@keyframes hue-rotate-full {
				from {filter: hue-rotate(0deg);}
				to {filter: hue-rotate(360deg)}
			}
			@keyframes gelatine {
				from, to { transform: scale(1, 1); }
				25% { transform: scale(0.9, 1.1); }
				50% { transform: scale(1.1, 0.9); }
				75% { transform: scale(0.95, 1.05); }
			  }
		}
		



		/* ----- body and gloabls ----- */
		@font-face {
			font-family: Biscuit Kids;
			src: url("../fonts/biscuitkidsDEMO.otf");
		}
		@font-face {
			font-family: "Comic Neue";
			src: url("../fonts/Comic_Neue/ComicNeue-BoldItalic.ttf");
		}
		@font-face {
			font-family: "Playpen";
			src: url("../fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf");
		}
		@font-face {
			font-family: Poetsen One;
			src: url("../fonts/Poetsen_One/PoetsenOne-Regular.ttf");
		}
		::selection {
			background: #c12b34;
			color: white;
			animation: bg-rotate-white 6s infinite alternate ;
		}
		html {
			scroll-behavior: smooth; 
			/* probably better to keep this outside of preferes reduced motion? cus it makes easier on eyes */
		}
		html::-webkit-scrollbar {
			width: 10px;
			background-color: #282632;
		}
		html::-webkit-scrollbar-thumb {
			background-color: #a42642;
			border-radius: 10px;
			height: 10px;
		}
		@supports not selector(::-webkit-scrollbar) {
			html {
				scrollbar-color: #282632 #a42642;
				scrollbar-width: 10px;
				overflow-y: scroll;
			}
		}
		/* things that only appear for screenreaders.. */
		.sr-only {
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			height: 1px;
			width: 1px;
			overflow: hidden;
			position: absolute;
			
		}
		.jump-main {
			position: absolute;
			padding: 0.5rem 1rem;
			transform: translateY(-2000em);
			transition: transfrom 1s ease;
			background-color: #dab0e0;
			border-radius: 20px;
		}
		.jump-main:focus {
			transform: translateY(10em);
		}
		a, a:visited {
			text-shadow: 0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099;
			color: #fff;
			z-index: 3;
			position: relative;
			text-decoration-color: #fb6099;
			transition: all 1s ease;
		}
		header {
			display: flex;
			justify-content: center;
			transform: translateY(-6.4em);
			
			left: 0;
			right: 0;
			pointer-events: none;
		}
		h1 {
			font-size: 2em;
			background: url("../images/maiPageTitleBg.png") no-repeat;
			background-size: contain;
			padding: 5.5em 5.5em 0px;
			max-width: 30%;
			margin: auto;
			display: flex;
			justify-content: center;
			animation: gelatine 0.5s normal 0.3s;
			
		}
		h1::after {
			content: "elysia";
			transform: translateY(-28px);
			font-family: Biscuit Kids;
			text-shadow: 2px 2px 5px purple, 2px 2px aliceblue, -1px -0.5px 16px #fff1a4;
			scale: 1.5;

		}
		
		.ribbon-hr {
			background-image: url("../images/ribbonhr.png");
		}
		body {
			font-family: "Playpen", 'Times New Roman', Times, serif;
			font-size: 1em;
			margin: auto;
			overflow-x: hidden;
			background: darkblue;
			color: white;
			cursor: url(../icons/maimaicursor.png), default;
		}
		@media (max-width:500px) {
			aside h2:nth-child(6) {
				font-size: 1em;
				/* i should be using clamp or a dedicated class but for now this is fiine */
			}	
		}
		
		.two-height {
			line-height: 2;
		}
		main {
			margin: auto;
		}
		img {
			max-width: 100%;
			max-height: 100%;
		}
		.body-bg {
		    position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background-size: cover;
    		z-index: -99;
    		background-image: url(../images/bg_pattern.png);
    		background-repeat: repeat;
    		background-position: 50%;
    		background-size: 52px;
    		mix-blend-mode: overlay;
		    animation: pattern-layer 10s infinite linear;
		}
		.body-bg-wrap {
			position: absolute;
		}
		/* mix blend mode (ESPEPCIALLY overlay), rgba, filters, all seem to be the 
		culprits of bad performance. Background size cover has no affect, and re engineering 
		the animations to use transform instead of background position offered very little 
		or no improvement. On mobile, mix blend mode and filters on some backgrounds are 
		disabled for firefox mobile performance */
		#shines {
			background-image: url('../images/bg_shines.png');
			background-size: 1332px;
            background-position: center 24px;
            background-repeat: repeat;
			 animation: hue-rotate 20s ease infinite; 
			 z-index: 1; 
			 mix-blend-mode: hard-light;
			  pointer-events: none;
		}
		#char-bg {
			background-image: url('../../incest/sisterbg.png' );background-size: 100%;
            background-position: center 24px;
            background-repeat: no-repeat; animation: none; mix-blend-mode: plus-lighter; z-index: -101;
		}
		#scroll-bg {
			background-image: url('../images/heart-mask.png'),
             linear-gradient(to top, rgba(240,241,255,0.659), rgba(240,241,255,0.659)); animation: pattern-layer-slow 25s linear infinite;; background-repeat: round repeat; z-index: -100;
		}
		@media (max-width: 500px) {
			#shines {
				animation: none;
				mix-blend-mode: normal;
			}
			#scroll-bg {
				mix-blend-mode: normal;
			}
		}




		/* -----  nav  ------ */
		nav {
			margin-top: 4vh;
			background: linear-gradient(274deg, #fff1d1, #dab0e0, #c3e07b, #fff1d1);
    		background-size: 800% 800%;
			animation: bg-rotate-white 14s ease infinite;
			max-width: 75vw;
			margin-left: auto;
			margin-right: auto;
			border-radius: 13px;
			display: flex;
			
		}
		.ul-nav {
			list-style-type: none;
			padding: 15px;
			display: flex;
			flex-wrap: wrap;
			background: #282632;
			border-radius: 11px;
			margin: 3px;
			gap: 15px;
			width: calc(100%);
			
		}
		.ul > li > a:focus, .ul-nav > li > a:visited:focus {
			outline: white 1px solid;
			border-radius: 5px;
		}
		.ul-nav > li > a::after {
			content: " >> ";
			text-decoration: none;
		}
		#mobile-nav-ul > li > a::after {
			content: "";
		}
		.ul-nav > li > a:hover, .ul-nav > li > a:visited:hover {
			filter: brightness(1.5);
		}
		.mobile-nav {
			background: none;
			border: none;
			color: inherit;
			width: calc(100%);	
			position: relative;
		}
		#mobile-nav {
			visibility: hidden;
			margin: 0px;
			width: 0px;
		}
		#mobile-nav-label {
			interpolation-size: allow-keywords;
			display: none;
			padding: 15px;
			background: #282632;
			border-radius: 15px;
			margin: 3px;
			gap: 15px;
			width: 100%;
		}
		.mobile-nav-button::after {
			content: "open menu";
			transition: content 2s;
		}
		.mobile-nav-holder {
			height: 0rem;
			margin-top: 0px;
			transition: height 0.5s ease, margin-top 0.5s ease;
			interpolation-size: allow-keywords;
			overflow: clip;
			visibility: hidden;
		}
		#mobile-nav-ul {
			padding: 0px;
			pointer-events: none;
			gap: 15px;
			display: grid;
			grid-template-columns: repeat(auto-fill, 70px);
			background: none;
			transition: padding 0.2s ease;
		}
		#mobile-nav-container {
			display: none;
			justify-content: center;
		}
		/* behaviour after clicking menu... */
		#mobile-nav:checked ~ #mobile-nav-label .mobile-nav-button::after {
			content: "close menu";
		}
		#mobile-nav:checked ~ #mobile-nav-label .mobile-nav-holder {
			height: 125px;
			margin-top: 15px;
			visibility: visible;
		}
		#mobile-nav:checked ~ #mobile-nav-label #mobile-nav-ul {
			pointer-events: all;
			padding: 6px 0px 0px 0px;
		}




		/* ------  main layout features  ------ */
		.main-layout {
			display: grid;
			grid-template-columns: 1.2fr 26fr 1.2fr;
			max-width: 75vw;
			margin-top: -6em;
			margin-left: auto;
			margin-right: auto;
			justify-content: center;
			justify-self: center;
		}
		.column-red {
			background: linear-gradient(90deg,#c12b34 50%,#a42642 0);
			background-size: 11px auto;
			height: 100%;
			min-width: 5vw;
			height: 1000vh;
			position: absolute;
			z-index: -1;
			align-self: center;
			top: 0;
		}
		#col1 {
			left: 0;
		}
		#col3 {
			right: 0;
		}
		#col2 {
			min-width: 84vw;
			background: #fefbf2;
			box-shadow: 3px 3px 5px -2px rgba(0,0,0,.35),0 0 5px rgba(0,0,0,.35),inset 0 0 0 5px #fefbf2,inset 0 0 0 6px #ff7200;
			color: #950b45;
			border-radius: 10px;
			margin: 0px 5vw;
			position: relative;
			justify-self: center;
		}
		#col2 > p {
			margin: 19px;
			z-index: 2;
			position: relative;
			
		}
		#col > p::selection {
			animation: hue-rotate-full 6s infinite alternate ;
		}
		#col2 > h2 {
			text-align: center;
			padding: 10px 5px;
			border-top: dashed 2px;
			border-bottom: dashed 2px;
			text-decoration: none;
			font-family: 'Times New Roman', Times, serif;
		}
		.col-ribbon {
			position: absolute;
			top: 10em;
		}
		@media (min-width:1250px) {
			#col2 {
				padding: 18px;
				font-size: 1.3em;
			}
		}

	


		/* ------  page sections ------ */
		/* profile */
		.profile-holder {
			float: right;
			shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		}
		.profile {
			display: grid;
			justify-content: right;
			align-items: center;
			grid-template-columns: repeat(auto-fit, minmax(173px, 353px));
			max-width: 57vw;
			gap: calc(5rem - 7vw);
		}
		.stat-box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			position: relative;
			z-index: 1;
			/* without this, safari has weird z fighting with the box abd image */
			gap: 10px;
			max-height: 60px;
			margin: 20px;
			margin-top: 0px;

		}
		.profile-img {
			padding: 10px;
			border-radius: 10px;
			box-shadow: 3px 3px 5px -2px rgba(0,0,0,.35),0 0 5px rgba(0,0,0,.35),inset 0 0 0 5px #fefbf2,inset 0 0 0 6px #ff7200;
			background-color: #fefbf2;
			width: calc(100% - 36px);
			height: calc(100% - 36px);
			justify-self: center;
		}
		.cute-box {
			padding: 10px;
			border-radius: 10px;
			background-color: darkorange;
			animation: wiggle-wiggle 1.5s linear infinite;
			color: white;
			overflow-x: hidden;
			font-family: "Poetsen One";
			font-weight: 500;
			box-shadow: 3px 3px 10px -2px rgba(104, 33, 175, 0.73),0 0 8px rgba(38, 185, 41, 0.51),inset 0 0 0 5px darkorange,inset 0 0 0 6px #fefbf2;
			text-align: center;
			line-height: 1;
			word-wrap: break-word;
		}
		
		
		/* special interests */
		.si-boxes {
			display: grid;
			grid-auto-flow: row;
			grid-template-columns: repeat(auto-fill, minmax(125px, 0.3fr));
			list-style-type: none;
			padding: 10px;
			justify-content: center;
			align-items:flex-end;
			gap: 35px;
			font-size: 1.3rem;
		}
		
		.si-contents {
			text-align: center;
			
			img {
				transition: all 0.5s;
				mask-image: url(../images/masks/flowermask1.png);
				mask-size: 220%;
				mask-repeat: no-repeat;
				mask-position: center;
			}
			img:hover, &:has(.si-link:hover) img {
				mask-image: url(../images/masks/flowermask1.png);
				mask-size: 90%;
				
			}
		}
		.si-link {
			display: block;
			
			word-wrap: break-word;
			text-align: center;
			border-image: url("../images/borders/gulp.png") 7 fill round;
			border-width: 7px;
			border-radius: 20px;
			padding: 5px;
			border-style: solid;
		}
		


		/* -----  decorations  ----- */
		.flower-decor {
			position: absolute;
			scale: 0.08;
			rotate: 15deg;
			right: 1em;
			top: -11em;
		}
		.corner-char {
			position: absolute;
			right: 0;
			top: 0;
			margin: 10px;
			scale: 0.4;
			transform: translateY(-22em);
			image-orientation: flip;
		}
		.train-line {
			border-radius: 100%;
			border: 2px white solid;
			color: white;
		}



		/* -----  breakpoints  ----- */
		/* main breakpoint are at 1500px (adds special effects for desktop like scroll anim), 
		and at 500px (mobile nav). the remaining breakpoints are used for adjusting minor 
		position: absolute decorations */
		@media (min-width: 1880px) {
			.flower-decor {
			right: 11em;
			}
		}
		@media (min-width: 1220px) {
			.corner-char {
				transform: translateY(-15em);
				scale: 0.5;
			}
			.main-layout {
				margin-top: -4.4em;
			}
		}
		@media (max-width: 1000px) {
			.corner-char {
				transform: translateY(-16em);
				right: -24px;
			}
		}
		/* mobile layout enabled at 500px... */
		@media (max-width: 500px) {
			header {
				transform: translateY(-8.2em);
				scale: 0.7;
			}
			.corner-char {
				right: -105px;
			}
			.main-layout {
				margin-top: -8em;
			}
			#col2 {
				margin: 0px 3vw;
			}
			.profile-holder {
				float: none;
			}
			.profile {
				max-width: 100%;
				justify-content: center;
				
			}
			
			.stat-box {
				justify-self: normal;
			}
			nav {
				margin-top: 1vh;
			}
			.ul-nav {
				justify-content: center;
			}
			#mobile-nav-container {
				display: flex;
			}
			#mobile-nav-label {
				display: block;
			}
			#desktop-nav-ul {
				display: none;
				pointer-events: none;
			}
		}
		@media (max-width: 338px) {
			.corner-char {
				scale: 0.3;
			}
			.main-layout {
				/* margin-top: 57px; */
			}
			.stat-box {
				margin-left: 0px;
			}
			nav {
				margin-top: 1vh;
			}
		}
		



		/* ------  scroll animations  ------ */
		/* only appear when browser supports them and also when screen is wide enough... */
		/* ALSO stops webkit and firefox browsers from trying to cheat the anim timeline check 
		without having a complete implementation */
		@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%))  {
			@media (min-width: 1500px) and (prefers-reduced-motion: no-preference) {
				@keyframes move-left {
					from {right: 0vw;}
					to {right: 69vw;}
				}
				@keyframes move-right {
					from {right: 0em;}
					to {right: -6em;}
				}
				@keyframes move-up-nav {
					from {margin-top: 4vh; border-radius: 13px; top: -1vh;}
					to { margin-top: 0vh; border-radius: 0px 0px 13px 13px; top: 0vh;}
				}
				@keyframes move-up-ul {
					from {border-radius: 13px; padding: 15px;}
					to {border-radius: 4px 4px 13px 13px; padding: 0px 0px 0px 40px;}
				}
				@keyframes main-margin {
					from {margin-top:14.5em}
					to {margin-top: 28.5em;}
				}
				header {
					position: fixed;
					z-index: 4;
					top: 6em;
					animation: move-left 2s forwards;
					animation-timeline: scroll();
					animation-range: entry 0px 300px;
				}
				.corner-char {
					position: fixed;
					animation: move-right 2s forwards;
					animation-timeline: scroll();
					animation-range: entry 0px 50vh;
					z-index: 1;
				}
				nav {
					position: fixed;
					left: 0;
					right: 0;
					width: 75%;
					top: -1vh;
					z-index: 3;
					animation: move-up-nav 2s forwards, bg-rotate-white 14s ease infinite;
					animation-timeline: scroll(), none;
					animation-range: entry 0px 100px;
				}
				.ul-nav {
					justify-content: center;
					animation: move-up-ul 2s forwards;
					animation-timeline: scroll();
					animation-range: entry 0px 50vh;
				}
				.main-layout {
					margin-top: 14.5em;
					animation: main-margin 2s forwards;
					animation-timeline: scroll();
					animation-range: entry 0px 50vh;
				}
				li {
					z-index: 1;
				}
			}
		}