* {
	box-sizing: border-box;
	user-select: none;
}
html {
	font: 2.7vh/1.5 Montserrat, Averia Libre, sans-serif;
	height: 100svh;
	color-scheme: light;
}
@media (max-aspect-ratio: 0.64/1) {
	html {
		font-size: calc(2.7vw * (1 / 0.64));
	}
}
body {
	height: 100svh;
	overflow: hidden;
	margin: 0;
	text-align: center;
	background: #ddcfcc;
	/* background-image: radial-gradient(ellipse 100% 100% at 50% 0, #bfbfe9, #c9c9c9);
	background-image: radial-gradient(ellipse 100% 100% at 50% 0, #bfe9e8, #c9c9c9); */
	background-image: radial-gradient(ellipse 100% 100% at 50% 0, light-dark(hsl(188, 100%, 89%), hsl(187, 16%, 57%)), light-dark(#c9c9c9, #333));
}
p {
	margin: 0;
}
#logo {
	margin-top: 3rem;
	cursor: pointer;
	& > * {
		pointer-events: none;
	}
}
h1 {
	margin: 0;
	font-size: 4rem;
	font-weight: 200;
	line-height: 1 !important;
	small {
		font-size: .52em;
		line-height: 1;
		display: block;
	}
}
#tagline {
	/* background: rgba(238, 232, 170, 0.322); */
	/* background-color: #fff2; */
	/* border-radius: .2rem; */
	/* border: 1px solid #fffa; */
	padding: .15rem 1rem;
	font-size: 1.1rem;
	font-weight: 440;
	b { font-weight: 440 }
	line-height: 1.25;
	word-spacing: .15em;
	
}
#subtitle {
	z-index: 2;
	/* animation: hover 5s ease-in-out infinite; */
	box-shadow: 0 3px 14px #0001;
	transform: translateZ(-1px);
	margin-top: 2.5rem;
	line-height: 1.9;
	font-weight: 360;
	/* text-shadow: 0 2px 2px #0003; */
	.big {
		font-size: 1.25rem;
		font-weight: 280;
		font-style: italic;
	}
	/* color: #555; */
	padding: .66rem 1.75rem .66rem;
	border: 1px solid #fffa;
	border-radius: 3rem;
	corner-shape: squircle;
	background-color: #fff4;
	background: linear-gradient(12deg, #fff4, hsla(78, 100%, 83%, .125));
	.blue-morpho {
		height: 1.7rem;
		line-height: 0;
		margin: 0 .5rem;
		position: relative;
		left: .12rem;
	}
}
@keyframes hover {
	0%,100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -.37rem
	}
}
p#main {
	margin: 2rem 0;
	line-height: 1.66;
	font-style: italic;
	/* max-width: 40rem; */
}
footer {
	position: absolute;
	bottom: -5rem;
	width: 14.25rem;
	height: 14.25rem;
	font-size: .85rem;
	line-height: 1.25;
	/* margin: auto 0 0; */
	padding: 3.2rem 0rem 0;
	border: 1px solid #fffa;
	border-radius: 50%;
	/* corner-shape: squircle; */
	background: #fff4;
	background: linear-gradient(to bottom,  #ffedcaa1, #ffedca33, #fff0 77%);
	.sep {
		margin-inline: 1ch;
	}
	text-shadow: 0 2px 2px #0003;
	strong {
		font-family: Josefin Sans, Averia Libre;
		font-size: 1.4em;
		font-weight: 400;
		font-style: italic;
		color: #3c8cba;
		line-height: 1.5;
		/* -webkit-text-stroke: #3a6f8e .5px; */
		/* letter-spacing: .06em; */
	}
	a {
		color: inherit;
		letter-spacing: .5px;
		font-weight: 500;
		/* font-family: monospace; */
	}
	div {
		margin-top: .4rem;
	}
	/* overflow: hidden; */
	img {
		display: block;
		position: absolute;
		height: 13rem;
		top: -9.8rem;
		/* border-radius: 50%; */
		/* border: 2px solid #fff8; */
		/* mix-blend-mode: multiply; */
		filter: saturate(0.76) brightness(1.6) contrast(0.85);
		filter: saturate(0.76) brightness(1.6) contrast(0.64) drop-shadow(2px 4px 11px #fff);
		transition: scale .3s ease;
		transform-origin: bottom;
		&:hover {
			/* scale: 1.7; */
		}
	}
}
#info {
	position: absolute;
	top: .6rem;
	right: .6rem;
	appearance: none;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	border: 1px solid #fffa;
	border-radius: 50%;
	background: linear-gradient(12deg, #fff6, hsla(78, 100%, 83%, .2));
	color: inherit;
	cursor: pointer;
	
	/* transition: scale .15s ease, background .15s ease; */
	&::before {
		content: 'i';
		font-family: Georgia, serif;
		font-style: italic;
		font-weight: 700;
		font-size: 1rem;
	}
	&:hover {
		/* scale: 1.1; */
		background: linear-gradient(12deg, #fff9, hsla(78, 100%, 83%, .35));
	}
}
#modal {
	max-width: 28rem;
	width: min(90vw, 28rem);
	margin: auto;
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid #fffa;
	border-radius: 1.5rem;
	corner-shape: squircle;
	color: light-dark(#333, #eee);
	background: light-dark(hsl(188, 100%, 93%), hsl(187, 16%, 24%));
	background-image: radial-gradient(ellipse 150% 140% at 23% 0, light-dark(hsl(188, 100%, 89%), hsl(187, 20%, 30%)), light-dark(#c9c9c9, #444));
	box-shadow: 0 8px 30px #0003;
	line-height: 1.6;
	text-align: left;
	font-style: italic;
	opacity: 0;
	scale: .95;
	transition: opacity .22s ease, scale .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
	&[open] {
		opacity: 1;
		scale: 1;
		@starting-style {
			opacity: 0;
			scale: .95;
		}
	}
	&::backdrop {
		background: #2225;
		backdrop-filter: blur(3px);
		opacity: 0;
		transition: opacity .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
	}
	&[open]::backdrop {
		opacity: 1;
		@starting-style {
			opacity: 0;
		}
	}
	p span {
		font-style: normal;
	}
}
#modal-close {
	appearance: none;
	position: absolute;
	top: .5rem;
	right: .75rem;
	width: 2rem;
	height: 2rem;
	border: none;
	background: none;
	color: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	opacity: .6;
	&:hover {
		opacity: 1;
	}
}
#zen-sep {
	color: inherit;
	border: none;
	border-top: 2px solid currentColor;
	width: 8rem;
	position: relative;
	left: -.16rem;
}

#deco {
	/* background-color: rgba(255, 192, 203, 0.374); */
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 11rem;
}