html{min-height:100%;}
body{
	font-size: calc(16px + 43 * ((100vw - 300px) / (8500 - 300)) + 50 * ((100vh - 500px) / (8500 - 500)));
	line-height: calc(1.2em - 14 * ((100vw - 300px) / (8500 - 300)) - 8 * ((100vh - 500px) / (8500 - 500)));
	margin-left:0;
	margin-right:0;
	margin-bottom:0;
	padding:0;
	background-color: #3b1d24;
	background-image: url("bg.png");
	image-rendering: -webkit-optimize-contrast;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-rendering-mode: enhanced;
	overflow-y:scroll;
	scrollbar-width: thin;
	font-family: ClearSans;
	text-align: center;
	min-height: 100%;
}

:root {color-scheme: light only;}

::-moz-selection {color: white; background: rgba(215,52,123,0.75);}
::selection {color: white; background: rgba(215,52,123,0.8);}

a {color: black;}
a:link {text-decoration: none;}
a:focus {outline: 0;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

a.body {color: #d62d76;}
a.body:link {color: #d62d76;}
a.body:focus {color: white;}
a.body:visited {color: #d62d76;}
a.body:hover {color: white; text-shadow: 0 0 0.05em #d62d76, 0 0 0.25em white; transition: 0.2s linear;}
a.body:active {text-decoration: none; color: white; text-shadow: 0 0 0.3em white, 0 0 0.2em white; transition: 0.2s linear;}

a.footer {color: #a6a9a6;}
a.footer:link {color: #a6a9a6;}
a.footer:focus {color: white;}
a.footer:visited {color: #a6a9a6;}
a.footer:hover {color: white; transition: 0.2s linear;}
a.footer:active {color: white; transition: 0.2s linear;}

a.menu {color: #c6f0e2;}
a.menu:link {color: #c6f0e2; transition: 0.1s linear;}
a.menu:focus {color: white; font-size: 105%; text-shadow: -0.18em 0.08em 0.16em black, 0 0 0.1em white; transition: 0.2s linear;}
a.menu:visited {color: #c6f0e2; transition: 0.1s linear;}
a.menu:hover {color: white; font-size: 110%; text-shadow: -0.25em 0.12em 0.22em black, 0 0 0.1em white; transition: 0.2s linear;}
a.menu:active {color: white; font-size: 107%; text-shadow: -0.20em 0.10em 0.18em black, 0 0 0.3em white, 0 0 0.2em white; transition: 0.2s linear;}

hr {
	border: 0;
	height: 0.05em;
	background: rgba(123,124,124,0.6);
	box-shadow: 0 0.04em 0.06em #d4f3f1;
}
hr.portfolio {
	background: rgba(19,7,12,0.7);
	box-shadow: 0 0.04em 0.06em #97606e;
}

#cast {
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #3b1d24;
	background: radial-gradient(circle, rgba(150,90,100,0.6) 1%, rgba(10,2,8,0.88) 100%);
}
h1 {
	font-size: 1.05em;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}
h1.snap {
	text-shadow: -0.05em 0.07em 0.1em black;
	display: inline-block;
	box-sizing: border-box;
	width: 24%;
	height: 1.4em;
	min-height: 1.4em;
	max-height: 1.4em;
	text-align: center;
	vertical-align: bottom;
	padding:0.22em 0;
	margin: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	flex: 1 0 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
h2 {
	font-size: 0.95em;
	font-weight: normal;
	padding: 2%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}
h3 {
	font-size: 0.9em;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}
article {display: block;}
p {
	text-indent: 1rem;
	font-weight: normal;
	font-size: 0.9em;
	color: #301e20;
	text-align: justify;
	box-sizing: border-box;
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle;
	padding: 0.4%;
}
p.half {
	text-indent: 0rem;
	padding: 4%;
	width: 47%;
}
p.portfolio {
	color: #c6f0e2;
	font-size: 1.2em;
	text-align: center;
	padding: 0.4%;
	line-height: 1.4em;

}
.number {
	display: inline-block;
	position: relative;
	width: 5em;
}
.number input[type="number"] {
	display: block;
	height: 2em;
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-align: center;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
	border: none; 
	background: none;
	font-family: inherit;
	font-size: 1.1em;
	text-align: center;
}
.number input[type="number"]::-webkit-outer-spin-button, .number input[type="number"]::-webkit-inner-spin-button {display: none;}
.number-minus {
	position: absolute;
	top: 0;
	left: 0.3em;
	bottom: 0;
	width: 1.6em;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	font-size: 1.2em;
	background: none;
	color: #d62d76;
}
.number-plus {
	position: absolute;
	top: 0;
	right: 0.3em;
	bottom: 0;
	width: 1.6em;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	font-size: 1.2em;
	background: none;
	color: #d62d76;
}
.number-plus:active {font-size: 1.6em; right: 0; transition: 0.01s linear;}
.number-minus:active {font-size: 1.6em; left: 0; transition: 0.01s linear;}
.comm-calc {
	background-color: rgba(255, 255, 255, 0.3);
	border: 0.12em solid rgba(0, 0, 0, 0.1);
	border-radius: 1em;
	padding: 1em;
	width: 55%;
	margin: 1.5em auto;
	box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.5);
}
.comm-calc label {
	font-size: 0.8em;
	color: #555;
	margin: 0.4em;
	display: inline-block;
}
.comm-calc p {
	font-size: 1.1em;
	margin: 0.4em;
	display: inline-block;
}
p.comm {
	text-indent: 0rem;
	width: 50.5%;
	font-size: 0.7em;
	color: #301e20;
	text-align: center;
	line-height: 1em;
	padding: 0;
}
p.fooo {
	text-indent: 0rem;
	color: #757373;
	font-size: 0.6em;
	text-align: right;
	padding: 0.8%;
	padding-right: 0.8em;
}
.gum{
	display: block;
	width: 46%;
	height: auto;
	margin-left:auto;
	margin-right:auto;
	min-width: 1024px;
	z-index: 5;
	position: relative;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
@media screen and (max-aspect-ratio: 12/16){
	.gum{
		width: 94%;
		margin-left:auto;
		margin-right:auto;
		min-width: 300px;
	}
}
@media (max-width: 1024px){
	.gum{
		width: 94%;
		margin-left:auto;
		margin-right:auto;
		min-width: 300px;
	}
	#topknot{aspect-ratio: 90 / 53;}
}
#topknot{
	isolation: isolate;
	transform-style: preserve-3d;
	perspective: 60em;
	perspective-origin: 50% 40%;
	background: #a6c6c0;
	background: linear-gradient(90deg, rgba(188,246,231,0.65) 0%, rgba(200,247,237,0.75) 27%, rgba(217,249,247,0.89) 52%, rgba(200,247,237,0.75) 77%, rgba(188,246,231,0.65) 100%);
	box-shadow: -0.30em 0.22em 0.4em 0.12em rgba(18,0,28,0.35), -0.32em 0.31em 0.75em 0.25em rgba(28,0,18,0.75), -0.35em 0.15em 1.5em 0.42em rgba(18,0,28,0.35);
	outline: 0.06em solid rgba(255, 255, 255, 0.5);
	outline-offset: 0.12em;
	margin-bottom: 0.11em;
	margin-top:0.7em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	aspect-ratio: 22 / 9;
	min-height: 10.5em;
}
#clay{
	background: #a6c6c0;
	background: linear-gradient(90deg, rgba(188,246,231,0.65) 0%, rgba(200,247,237,0.75) 27%, rgba(217,249,247,0.89) 52%, rgba(200,247,237,0.75) 77%, rgba(188,246,231,0.65) 100%);
	margin-top: 0.11em;
	box-shadow: -0.30em 0.22em 0.4em 0.12em rgba(18,0,28,0.35), -0.32em 0.31em 0.75em 0.25em rgba(28,0,18,0.75), -0.35em 0.15em 1.5em 0.42em rgba(18,0,28,0.35);
	outline: 0.06em solid rgba(255, 255, 255, 0.5);
	outline-offset: 0.12em;
}
#muscle{
	background: #d22e75;
	background: linear-gradient(90deg, rgba(48,30,32,0) 5%, rgba(213,50,119,1) 50%, rgba(48,30,32,0) 95%);
	height: 1.6em;
	min-height: 1.6em;
	max-height: 1.6em;
	z-index: 1;
	padding: 0.11em 0;
	cursor: pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: nowrap;
}
#muscle:hover{z-index: 6;}
#muscle:active{
	background: rgb(64,30,42);
	background: linear-gradient(90deg, rgba(48,30,32,0) 0%, rgba(235,50,122,1) 50%, rgba(48,30,32,0) 100%);
	z-index: 6;
}
#sole{
	background: #2d191f;
	box-shadow: -0.28em 0.20em 0.35em 0.10em rgba(18,0,28,0.3), -0.30em 0.29em 0.7em 0.22em rgba(28,0,18,0.5), -0.32em 0.12em 1.2em 0.39em rgba(18,0,28,0.3), 0 0.22em 0 0.12em black;
	margin-top:1.1em;
	border-radius: 0.2em;
	margin-bottom:0.8em;
	border: 0.19em solid #2d191f;
	line-height: calc(0.92em - 14 * ((100vw - 300px) / (8500 - 300)) - 7 * ((100vh - 500px) / (8500 - 500)));
	text-align: right;
}
img{
	object-fit: contain;
	display: inline-block;
	clear:both;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	loading: lazy;
	decoding: async;
}
img.logo{
	height: auto;
	width: 100%;
	display: block;
}
img.cooo{
	height: auto;
	width: 100%;
	vertical-align: middle;
}
img.cooo2{
	height: auto;
	width: 98%;
	vertical-align: middle;
}
img.inline{
	height: 0.8em;
	width: auto;
	margin-top:0.5em;
}
img.picex{
	vertical-align: middle;
	height: auto;
	width: 50%;
	padding: 0.5%;
}
.content{
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	padding: 3%;
	width: 90%;
	text-align: center;
}
/* Checkbox */
.checkbox-wrapper-42 input[type="checkbox"] {
	display: none;
	visibility: hidden;
}

.checkbox-wrapper-42 label {display: inline-block;}

.checkbox-wrapper-42 .cbx {
	position: relative;
	top: 1px;
	width: 17px;
	height: 17px;
	border: 1px solid #d62d76;
	border-radius: 3px;
	vertical-align: middle;
	transition: background 0.1s ease;
	cursor: pointer;
}
.checkbox-wrapper-42 .cbx:after {
	content: '';
	position: absolute;
	top: 1px;
	left: 5px;
	width: 5px;
	height: 11px;
	opacity: 0;
	transform: rotate(45deg) scale(0);
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: all 0.3s ease;
	transition-delay: 0.15s;
}
.checkbox-wrapper-42 .lbl {
	margin-left: 5px;
	vertical-align: middle;
	cursor: pointer;
}
.checkbox-wrapper-42 input[type="checkbox"]:checked ~ .cbx {
	border-color: transparent;
	background: #d62d76;
	animation: jelly-42 0.6s ease;
	}
.checkbox-wrapper-42 input[type="checkbox"]:checked ~ .cbx:after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}
.checkbox-wrapper-42 .cntr {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
}
@keyframes jelly-42 {
	from {
		transform: scale(1, 1);
	}
	30% {
		transform: scale(1.25, 0.75);
	}
	40% {
		transform: scale(0.75, 1.25);
	}
	50% {
		transform: scale(1.15, 0.85);
	}
	65% {
		transform: scale(0.95, 1.05);
	}
	75% {
		transform: scale(1.05, 0.95);
	}
	to {
		transform: scale(1, 1);
	}
}
/* all of further is for head */
.logoz {
	position: absolute;
	bottom: 0.1em;
	left: 0.6em;
	width: 22%;
	padding: 2%;
	opacity: 0.6;
	z-index: 4;
	-webkit-animation: LogoDist 36s infinite;
}
.logozG {
	position: absolute;
	bottom: 0.1em;
	left: 0.6em;
	width: 22%;
	padding: 2%;
	mix-blend-mode: lighten;
	opacity: 0;
	z-index: 3;
}
#topknot:hover .logoz {
	z-index: 9;
	opacity: 1;
	filter: blur(0rem) brightness(0);
	-webkit-filter: blur(0rem) brightness(0);
	-webkit-animation: LogozHover 0.2s 1;
}
#topknot:hover .logozG {
	z-index: 8;
	filter: blur(0.5rem);
	opacity: 0.9;
	-webkit-animation: LogozHover 0.2s 1;
}
#topknot:active .logoz {
	transform: scale(1.5);
	filter: brightness(1);
	-webkit-filter: brightness(1);
	transition: 0.1s linear;
}
#topknot:active .logozG {
	transform: scale(1.5);
	filter: blur(0.1rem);
	transition: 0.1s linear;
}
@keyframes LogozHover {
	1% {
		transform: scaleY(1) skewX(0deg);
	}
	50% {
		transform: scaleY(3) skewX(-10deg);
	}
	100% {
		transform: scaleY(1) skewX(0deg);
	}
}
@keyframes LogoDist {
	0% {
		filter: hue-rotate(0deg) brightness(0.4) blur(0.05rem);
	}
	20% {
		transform: scale(1.2);
	}
	25% {
		filter: hue-rotate(90deg) brightness(0.7) blur(0.02rem);
	}
	41% {
		transform: scale(0.9);
	}
	50% {
		filter: hue-rotate(180deg) brightness(0.4) blur(0.05rem);
	}
	61% {
		transform: scale(1.1);
	}
	75% {
		filter: hue-rotate(270deg) brightness(0.7) blur(0.02rem);
	}
	81% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1.0);
		filter: hue-rotate(359deg) brightness(0.4) blur(0.05rem);
	}
}
img.headart {
	height: auto;
	width: 100%;
	display: block;
	object-fit: cover;
	position: relative;
	inset: 0;
}
/* parallax */
#PrlxL0, #PrlxL1, #PrlxL2, #PrlxL3 {
    --rest-transform: scale(1) rotate(0) translate(0) translateZ(0);
	--rest-filter: blur(0);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}
#PrlxL0 {
	--initial-transform: scale(1.2) rotate(-4deg) translate(0, 0) translateZ(-0.40em);
	--final-transform: scale(1.02) rotate(0) translate(0, 0) translateZ(-0.45em);
	--depth-filter: blur(0.08);
	--focus-point: blur(0.22em);
	--final-opacity: 0.9;
	--z-index: 2;
}
#PrlxL1 {
	--initial-transform: scale(1.4) rotate(4deg) translate(0.5em, 0.5em) translateZ(-0.20em);
	--final-transform: scale(1.02) rotate(0) translate(0, 0) translateZ(-0.30em);
	--depth-filter: blur(0.08em);
	--focus-point: blur(0.12em);
	--final-opacity: 0.95;
	--z-index: 5;
}
#PrlxL2 {
	--initial-transform: scale(2.7) rotate(8deg) translate(-2em, -2em) translateZ(0.25em);
	--final-transform: scale(1.02) rotate(0) translate(0, 0) translateZ(5em);
	--depth-filter: blur(0.16em);
	--focus-point: blur(0);
	--final-opacity: 1;
	--z-index: 6;
}
#PrlxL3 {
	--initial-transform: scale(4.8) rotate(16deg) translate(-4em, -4em) translateZ(0.50em);
	--final-transform: scale(1.02) rotate(0) translate(0, 0) translateZ(0.10em);
	--depth-filter: blur(0.6em);
	--focus-point: blur(0.07em);
	--final-opacity: 1;
	--z-index: 7;
}
.parallax-layer picture {
	backface-visibility: hidden;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	min-width: 100%;
	z-index: var(--z-index);
	transform: var(--rest-transform);
	filter: var(--rest-filter);
	will-change: transform, opacity, filter, visibility;
	contain: content;
	animation: PrlxCycle 90s infinite;
}

.parallax-layer picture:nth-child(2) { animation-delay: 18s; }
.parallax-layer picture:nth-child(3) { animation-delay: 36s; }
.parallax-layer picture:nth-child(4) { animation-delay: 54s; }
.parallax-layer picture:nth-child(5) { animation-delay: 72s; }

@keyframes PrlxCycle {
	0%, 100% {
		opacity: 0;
		visibility: hidden;
		transform: var(--initial-transform);
		filter: var(--depth-filter);
	}
	0.4% {
		opacity: 0;
		visibility: visible;
	}
	0.6% {
		opacity: 0.1;
		visibility: visible;
	}
	2.12% {
		opacity: 1;
		visibility: visible;       
	}
	18.6%, 20% {
		visibility: visible;
		opacity: var(--final-opacity);
		filter: var(--focus-point);
	}
	22.12% {
		visibility: hidden;
		opacity: 0;
		transform: var(--final-transform);
	}
	25%, 97% {
		visibility: hidden;
		opacity: 0;
		transform: var(--rest-transform);
		filter: var(--rest-filter);
	}
}