body {
	margin: 1vw;
	font-family: 'Roboto', var(--font-sans-serif);
	overflow-x: hidden;
}

div.decor {
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	user-select: none;
	
	position: absolute;
	top: 0;
	left: 0;
	inset: 1vw;

	& > * {
		position: absolute;
	}

	h1 {
		font-size: 16.64vw;
		font-style: italic;

		margin: 0;
		line-height: 0.75;
		z-index: -1;
	}

	.i-10 {
		z-index: -2;
		top: 3.646vw;
		left: 19.531vw;
		width: 6.25vw;
	}

	.t-1 {
		font-size: 1.25vw;
		top: 12.5vw;
	}

	.i-1 {
		top: 2.396vw;
		right: -3.646vw;
		z-index: 0;
		width: 31.51vw;
	}

	.i-2 {
		top: 6.771vw;
		left: -4.167vw;
		z-index: 3;
		width: 31.458vw;
	}

	.t-5 {
		z-index: 4;
		font-size: 3.646vw;
		bottom: 0;
		left: 5.729vw;
	}

	.t-6 {
		z-index: 4;
		font-size: 1.042vw;
		bottom: 11.458vw;
	}

	.t-7 {
		z-index: 4;
		font-size: 2.083vw;
		top: 14vw;
	}

	.t-8 {
		left: 20.833vw;
		top: 15.625vw;
		font-size: 2.083vw;
		line-height: 0.8;
		opacity: 0.5;
		&  > span {
			display: block;

			.big {
				font-size: 5.208vw;
			}
		}
	}

	.i-3 {
		width: 10.417vw;
		bottom: 0;
		left: 0;
	}

	.i-4 {
		right: 0;
		bottom: 0;
		width: 10.417vw;
		z-index: -10;
	}

	.i-5 {
		width: 26.042vw;
		top: 78.125vw;
		left: 5.208vw;
		z-index: 4;
	}

	.i-5a {
		top: 72.917vw;
		left: 5.208vw;
	}

	.i-6 {
		bottom: 0;
		left: 0;
		width: 4.063vw;
	}

	.swimstory {
		width: 11.458vw;
		z-index: 4;
		left: 0;
		top: 46.875vw;
		font-size: 1.042vw;
	}

	.i-7 {
		bottom: -8.333vw;
		right: 12.5vw;
		width: 16.667vw;
	}

	.i-8 {
		width: 8.333vw;
		top: 12.5vw;
		right: 0;
	}

	.t-4 {
		font-size: 3.125vw;
		right: 31.25vw;
		bottom: -15.625vw;
	}
	
	.ref {
		width: 52.083vw;
		bottom: -46.875vw;
		right: 3.125vw;
		z-index: 1;
		border: 1px solid #000;
	}

	.beta {
		width: 15.625vw;
		left: 32.292vw;
		z-index: 2;
		border: 1px solid #000;

		&.v1 {
			bottom: -20.833vw;
		}
		&.v2 {
			bottom: -33.333vw;
		}
	}

	.flags {
		width: 9.896vw;
		left: 32.292vw;
		border: 1px solid #000;

		&.v1 {
			bottom: -40.208vw;
		}
		&.v2 {
			bottom: -46.875vw;
		}
	}

	.pony {
		bottom: -48.438vw;
		z-index: 2;
		&.v1 {
			right: -0.521vw;
		}
		&.v2 {
			right: 5.208vw;
		}
	}

	.illus {
		width: 33.333vw;
		left: 4.167vw;
		top: 41.667vw;
		z-index: 5;
	}

	.t-2 {
		text-transform: none;
		width: 10.417vw;
		right: 21.875vw;
		top: 12.708vw;
		font-size: 1.563vw;
	}

	.t-3 {
		opacity: 0.5;
		z-index: -1;
		width: 11.458vw;
		right: 22.917vw;
		top: 17.708vw;
		line-height: 1.5;
		font-size: 1.302vw;
		text-align: justify;
	}

	.t-9 {
		z-index: 1;
		right: 6.25vw;
		bottom: 4.167vw;
		text-transform: none;
		font-style: italic;
		font-size: 3.125vw;

	}

	.song {
		bottom: -10.417vw;
		width: 15.625vw;
		height: 7.813vw;
		right: 0;
	}

	.t-10 {
		z-index: 10;
		left: 0;
		bottom: -47.917vw;
		font-weight: normal;
		text-transform: none;
		font-size: 0.833vw;
		font-family: 'Roboto Mono';

		a {
			font-weight: normal;
		}
	}
}

/* img.decor {
	position: absolute;

	&.i-3 {
		width: 12rem;
		bottom: 0;
		left: 0;
	}

} */

.lorem {
	position: absolute;
	top: 62.5vw;
	z-index: -10;
	line-height: 2;
	color: white;
	font-size: 0.833vw;
	font-weight: normal;
	text-transform: none;
}

.color2 {
	color: chartreuse;
}

main {
	position: absolute;
	z-index: 20;
	width: 70vh;
	margin: 13.542vw 30vw 0 28vw;
	font-size: 1.042vw;
	
	color: white;
	text-align:justify;

	& > .title {
		text-transform: uppercase;
		font-size: 7.292vw;
		font-weight: bold;
		text-align: right;
		position: relative;
		.left {
			display: block;
			text-align: left;
		}
		img {
			position: absolute;
			&.i-9 {
				/* top: 9rem;
				right: 9.25rem; */
				left: 14.583vw;
				top: 0.833vw;
				width: 2.083vw;
			}
			&.i-10 {
				width: 3.646vw;
				bottom: 1.875vw;
				left: 7.292vw;
			}
		}
	}

	.content {
		font-family: 'Roboto Mono';
		.one {
			font-weight: bold;
			margin-left: 3.385vw;
			margin-right: -1.042vw;
		}

		p {
			margin-top: 0;

			& > span {
				background-color: turquoise;
			}
		}

		a {
			font-weight: bold;
			color: white;
			font-style: italic;
			background-color: turquoise;
			&::before {
				content: '>';
			}
			&:hover {
				color: chartreuse;
				background-color: white;
			}
		}

		.two {
			margin-left: 9.375vw;
			margin-right: -4.167vw;
			
			.title {
				background-color: turquoise;
				font-family: 'Roboto';
				text-transform: uppercase;
				font-weight: bold;
				font-style: italic;
				font-size: 2.083vw;
				float: left;
				display: inline-block;
				margin-right: 0.521vw;
			}

			.nav {
				text-align: left;
				li {
					display: inline-block;
				}
			}
		}
	}
}

a {
	font-weight: bold;
	color: white;
	font-style: italic;
	&::before {
		content: '>';
	}
	&:hover {
		color: chartreuse;
		background-color: white;
	}
}