body {
	--aspect: 1.5;

	font-family: roboto, verdana, sans-serif;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #333;
	padding: 8px;
	margin: 0;
	min-height: calc(100dvh - 16px);
	position: relative;
}

h3 {
	margin: 0.2rem 0 0.3rem;
}

header {
	width: min(100%, 980px);
	height: 42px;
	margin: auto;
	position: relative;

	& > .logo {
		box-sizing: border-box;
		height: 128px;
		width: 108px;
		background-image: url('/_gfx/IT-Creators-logo.svg');
		background-size: cover;
		background-position: 0% 0%;
	}
}

nav {
	display: flex;
	margin: auto;
	justify-content: flex-end;
	width: min(100%, 980px);
	padding: 8px 10px;

	& > ul {
		padding: 0;
		margin: 6px 0 0;
		display: flex;
		justify-content: flex-end;
		font-size: 20px;
		line-height: 1;

		& > li {
			list-style-type: none;
			color: #999;

			&::marker {
				color: #065d9f;
				content: '■';
			}

			& > a {
				display: inline-block;
				text-decoration: none;
				padding: 0 20px 0 4px;
				color: #888;
				letter-spacing: 1px;
				transition: all 0.1s ease-in-out;

				&:hover {
					color: red;
				}
			}
		}
	}
}

.mainbox {
	padding-left: calc(50% + 2rem);
	padding-top: 1rem;
}

main {
	position: relative;
	width: min(100%, 980px);
	margin: auto;
}

h2 {
	margin: 0;
	position: absolute;
	display: block;
	right: calc(55% + 10px);
	font-size: 4rem;
	top: 1rem;
	font-weight: bold;
	color: #94949420;
	z-index: -1;
	line-height: 3.3rem;
	background: linear-gradient(to right, #7ab4f1 0%, #043875 100%);
	text-shadow: 2px 2px 4px #0002;
	background-clip: text;
}

footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px 10px;
	color: #888;
	font-size: 0.8rem;
}