:root {
	--width: max(100vw, 320px);
	--height: max(100vh, var(--width) * 0.4);
}

* {
	box-sizing: border-box;
}

:root, html {
	width: var(--width);
	background: #000000;
}

body {
	width: 100%;
}

:root, html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

canvas {
	width: var(--width);
	height: max(var(--width), var(--height));
	margin-left: calc(50vw - var(--width) * 0.5);
	margin-top: calc((var(--height) - max(var(--width), var(--height))) * 0.5);
	z-index: -1;
}

@font-face {
	font-family: D-DIN-Bold;
	src: url(fonts/D-DIN-Bold.woff2) format("woff2"), url(fonts/D-DIN-Bold.woff) format("woff"), url(fonts/D-DIN-Bold.otf) format("opentype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: D-DIN-Light;
	src: url(fonts/D-DIN.woff2) format("woff2"), url(fonts/D-DIN.woff) format("woff"), url(fonts/D-DIN.otf) format("opentype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: D-DIN-Medium;
	src: url(fonts/D-DIN.woff2) format("woff2"), url(fonts/D-DIN.woff) format("woff"), url(fonts/D-DIN.otf) format("opentype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: D-DIN-Regular;
	src: url(fonts/D-DIN.woff2) format("woff2"), url(fonts/D-DIN.woff) format("woff"), url(fonts/D-DIN.otf) format("opentype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: fram2;
	src: url(fonts/fram2.woff2) format("woff2"), url(fonts/fram2.woff) format("woff"), url(fonts/fram2.ttf) format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: NothingYouCouldDo;
	src: url(fonts/NothingYouCouldDo-Regular.ttf) format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	line-height: calc(min(var(--width), var(--height)) / 12);
	font-size: calc(min(var(--width), var(--height)) / 16);
	font-family: D-DIN-Bold, Arial, Verdana, sans-serif;
	font-style: normal;
	font-weight: 400;
}

p {
	line-height: calc(max(640px, min(var(--width), var(--height))) * 0.03);
	font-size: calc(max(640px, min(var(--width), var(--height))) * 0.0225);
	font-family: D-DIN-Regular;
	font-style: normal;
	font-weight: 400;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#starwars {
	position: fixed;
	width: var(--width);
	height: var(--height);
	margin-left: calc(50vw - var(--width) * 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
	mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
}

#starwars-board {
	min-width: var(--height);
	margin-top: var(--height);
	transform: perspective(calc(var(--height) * 1.732)) rotateX(60deg) scaleY(1.732);
	transform-origin: 50% 0;
}

#starwars-board p {
	margin-bottom: 2em;
	line-height: calc(max(640px, max(var(--width), var(--height))) * 0.08);
	font-size: calc(max(640px, max(var(--width), var(--height))) * 0.06);
	font-family: news-gothic-std, Arial, Verdana, sans-serif;
	font-style: normal;
	font-weight: 700;
	text-align: justify;
	text-shadow: -1px -1px 0 #666600, 1px -1px 0 #666600, -1px 1px 0 #666600, 1px 1px 0 #666600;
	color: #cccc00;
}

.framonaut {
	position: absolute;
	width: 100%;
	height: var(--height);
}

.slide {
	width: 100%;
	height: var(--height);
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.item {
	width: 50vw;
	height: var(--height);
}

.item-1 {
	padding: 0 calc(var(--width) / 32) 0 calc(var(--width) / 32);
	height: var(--height);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.item-2 {
	height: auto;
}

.item-2 > img {
	width: 100%;
	height: auto;
}

.cw .intro {
	margin-bottom: 50vh;
}

.cw .item-2, .jm .item-2 {
	order: -1;
}

.jm .item-1 {
	padding-left: calc(var(--width) / 32 * 3);
}

.framonaut h2 {
	margin: calc(var(--width) / 64) 0 calc(var(--width) / 128) 0;
	color: #ffffff;
	line-height: calc(var(--width) / 24);
	font-size: calc(var(--width) / 32);
	text-shadow: -1px -1px 0 rgba(102, 102, 102, 0.5), 1px -1px 0 rgba(102, 102, 102, 0.5), -1px 1px 0 rgba(102, 102, 102, 0.5), 1px 1px 0 rgba(102, 102, 102, 0.5);
}

.framonaut h3 {
	margin: calc(var(--width) / 128) 0 calc(var(--width) / 64) 0;
	color: #ffffff;
	line-height: calc(var(--width) / 48);
	font-size: calc(var(--width) / 64);
	text-shadow: -1px -1px 0 rgba(102, 102, 102, 0.5), 1px -1px 0 rgba(102, 102, 102, 0.5), -1px 1px 0 rgba(102, 102, 102, 0.5), 1px 1px 0 rgba(102, 102, 102, 0.5);
	text-transform: uppercase;
}

.framonaut p {
	margin: 0.75em 3vw;
	color: #000000;
}

.slides .bg {
	padding: calc(max(var(--width), var(--height)) / 32);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.slides .bg div {
	padding: calc(max(var(--width), var(--height)) / 48);
}

.slides h1 {
	color: #ffffff;
	height: calc(min(var(--width), var(--height)) / 12);
	line-height: calc(min(var(--width), var(--height)) / 12);
	font-size: calc(min(var(--width), var(--height)) / 16);
	text-shadow: -1px -1px 0 rgba(102, 102, 102, 0.5), 1px -1px 0 rgba(102, 102, 102, 0.5), -1px 1px 0 rgba(102, 102, 102, 0.5), 1px 1px 0 rgba(102, 102, 102, 0.5);
}

.slides .content {
	min-height: 75%;
}

.slides .content p {
	color: #000000;
	line-height: calc(min(var(--width), var(--height)) / 24);
	font-size: calc(min(var(--width), var(--height)) / 32);
	text-shadow: -1px -1px 0 rgba(204, 204, 204, 0.5), 1px -1px 0 rgba(204, 204, 204, 0.5), -1px 1px 0 rgba(204, 204, 204, 0.5), 1px 1px 0 rgba(204, 204, 204, 0.5);
}

.slides .image-note {
	height: calc(max(var(--width), var(--height)) / 60);
	line-height: calc(max(var(--width), var(--height)) / 60);
	font-size: calc(max(var(--width), var(--height)) / 80);
	color: #ffffff;
	text-align: center;
	text-shadow: -1px -1px 0 rgba(102, 102, 102, 0.5), 1px -1px 0 rgba(102, 102, 102, 0.5), -1px 1px 0 rgba(102, 102, 102, 0.5), 1px 1px 0 rgba(102, 102, 102, 0.5);
}

.image-1911-2024 p {
	position: absolute;
	text-align: center;
	width: calc(max(var(--width), var(--height)) / 2);
	height: calc(max(var(--width), var(--height)) / 16);
	margin-left: calc(50vw - max(var(--width), var(--height)) / 2);
	margin-top: calc(-max(var(--width), var(--height)) / 32);
	line-height: calc(max(var(--width), var(--height)) / 32);
	font-size: calc(max(var(--width), var(--height)) / 128 * 3);
	font-family: NothingYouCouldDo, cursive;
	font-weight: 400;
}

.dragon {
	position: absolute;
	width: calc(max(var(--width), var(--height)) * 0.12);
	margin-left: calc(50vw - max(var(--width), var(--height)) * 0.06 + var(--width) * 0.25);
	margin-top: calc(50vh - max(var(--width), var(--height)) * 0.04);
	transition: transform 40s ease-out;
	transform: translateX(0) translateY(0) rotate(0);
	will-change: transform;
}

.dragon-visible {
	transform: translateX(calc(var(--width) * -0.5)) translateY(calc(var(--height) * 0.3)) rotate(15deg);
}

@media not all and (min-aspect-ratio: 1/1) {
	.slide {
		flex-direction: column;
	}

	.item {
		width: 100%;
		height: calc(var(--height) * 0.5);
	}

	.item-1 {
		height: calc(var(--height) * 0.6);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.item-2 {
		height: calc(var(--height) * 0.4);
		display: flex;
		justify-content: center;
	}

	.item-2 > img {
		width: auto;
		height: 100%;
	}

	.cw .intro {
		margin-bottom: 0;
	}

	.cw .item-2, .jm .item-2 {
		justify-content: flex-start;
		order: inherit;
	}

	.rr .item-2, .ep .item-2 {
		justify-content: flex-end;
	}

	.jm .item-1 {
		padding-left: calc(var(--width) / 32);
	}

	.ep .item-2 {
		padding-bottom: calc(var(--height) / 64);
	}

	.framonaut h2 {
		line-height: calc(var(--width) / 12);
		font-size: calc(var(--width) / 16);
	}

	.framonaut h3 {
		line-height: calc(var(--width) / 24);
		font-size: calc(var(--width) / 32);
	}
}