:root {
	font-family: serif;
	--grey: #BBB6B6;
	--dgrey: #DBD6D6;
	--bg: white;
	--fg: var(--grey);
	--warning-yellow: #ffc310;
}

body {
	background: var(--bg);
	color: var(--fg);
	/* &:before { */
	/* 	font-size: 100em; */
	/* 	content: "✴"; */
	/* 	position: absolute; */
	/* 	color: var(--grey); */
	/* 	vertical-align: top; */
	/* 	line-height: 1; */
	/* } */
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 3em;
	margin: 0;
}

@media (orientation: portrait) {
	body {
		font-size: 2em;
	}
}

main {
	margin: 1em;
	width: 100%;
}

@media (orientation: landscape) {

}

.column {
	display: flex;
	justify-content: center;
	position: relative;
	overflow-x: clip;
}

.language {
	--gap: 4em;
    color: transparent;
    background-image: linear-gradient(180deg, var(--dgrey) 0%, var(--bg) 95%);
    background-clip: text;
	display: flex;
	flex-wrap: wrap;
	padding: 1em 0;
	width: 34em;
	flex-shrink: 0;
	overflow-x: clip;
	gap: 0 var(--gap);
}

.language span {
	flex: 1;
	line-height: 1.4em;
	white-space: pre;
    flex: calc(50% - var(--gap)/2);
	text-align: center;
}

#center {
	position: absolute;
	width: 100%;
	top: 0;
	filter: drop-shadow(0px 0px 45px rgb(58,82,75));
	left: 50%;
	transform: translatex(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1em;
}

#center span {
	transition: background color;
	transition-duration: 0.35s;
	color: var(--dgrey);
	background: transparent;
}

@keyframes strobe {
	0% { text-shadow: 0px 0px 1.5em #fc143c00; }
	10% { text-shadow: none }
	20% { text-shadow: 0px 0px 2.5em #fc143c55; }
	30% { text-shadow: none }
	40% { text-shadow: 0px 0px 1.5em #fc143c22; }
	50% { text-shadow: none }
	60% { text-shadow: 0px 0px 2.5em #fc143c99; }
	70% { text-shadow: none }
	80% { text-shadow: 0px 0px 1.5em #fc143cAA; }
	90% { text-shadow: none }
	100% { text-shadow: 0px 0px 2.5em #fc143cFF; }
}
#center span:hover {
	/* background: #FFFFFF44; */
	color: #DBE0DE;
	animation: strobe 0.15s infinite;
	/* text-shadow: 0px 0px 1.5em #fc143c; */
}

#construction {
	color: var(--grey) !important;
}

#ellipses {
	background-image: linear-gradient(90deg, var(--grey) 0%, transparent 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

::selection {
	background-color: var(--dgrey);
	color: #DBE0DE;
}

@keyframes flash {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes flash-inverted {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}
.flash {
	animation: flash 1s infinite;
}

#warning {
	width: 100vw; height: calc(100vh);
	background: var(--warning-yellow); color: black;

	font-family: monospace;
	/* font-weight: bold; */

	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	align-items: center; text-align: center;

	position: relative;
	&:after {
		content: "⎊"; /* transform: scaleY(-1); */
		position: absolute; bottom: 1em;
		animation: flash-inverted 1s infinite;
		z-index: 999;
	}
}

.center {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#warning + main {
	margin-top: 0;
	position: relative;
	&:before {
		display: flex;
		position: absolute;
		top: -2em;
		content: " ";
		background: linear-gradient(in srgb, var(--warning-yellow), var(--bg));
		height: 2em;
		width: 100%;
	}
}

.golden {
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.65) 47%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.65) 53%, rgba(255,255,255,0) 62%), linear-gradient(180deg, #9a6b0f 0%, #d28803 16%, #fdfefd 30%, #d28803 47%, #100403 52%, #5c3500 60%, #eea300 78%, #fff6c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver {
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.65) 47%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.65) 53%, rgba(255,255,255,0) 62%), linear-gradient(180deg, #1E2A38 0%, #9FB3C8 16%, #FFFFFF 30%, #A7B7C6 47%, #41525F 52%, #0E141A 60%, #5C7385 78%, #D7E2EC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section {
	display: flex;
	gap: 0.5em;
	min-height: 100vh;
	max-width: 100vw;
	flex-wrap: wrap;
	align-items: center;
}

.section .media {
	display: flex;
	justify-content: center;
	flex: 1 1 0;
}

.section .text {
	padding: 0 1em;
	font-size: 0.7em;
	flex: 1 1 30%;
	text-align: justify;
	hyphens: auto
}

.page {
	width: 100vw;
	height: 100vh;
}

.page.media {
	display: flex;
	justify-content: center;
	align-items: center;
}

.media video, .media img {
	max-width: 100vw;
	max-height: 100vh;
	object-fit: contain;
}

.media video {
	object-fit: contain;
}

#shutters, #strobe { width: 960px; }

.media.black {
	background: black;
}
.page:has(#strobe) {
	--fade-size: 5em;
	position: relative;
	margin: calc(var(--fade-size)/2) 0;
	&:before {
		content: " ";
		position: absolute;
		width: 100%;
		top: calc(0em - var(--fade-size));
		height: var(--fade-size);
		background: linear-gradient(in oklab, transparent, black);
	}
	&:after {
		content: " ";
		position: absolute;
		width: 100%;
		height: var(--fade-size);
		bottom: calc(0em - var(--fade-size));
		background: linear-gradient(in oklab, black, transparent);
	}
}

#strobe {

}

#autodiagnosis {
	max-width: 100%;
}