body {
	--var-primary-color: #bf2018;
	--var-secondary-color: #f03800;
	--var-tertiary-color: #800038;
	--var-main-color: #000;
	--var-contrast-color: #fff;
	--var-shadow-color: #333;
	--var-light-shadow-color: #efefef;

	margin: 0px;
	padding: 0px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	color: var(--var-shadow-color);
	background: var(--var-primary-color);

	& > canvas {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	footer {
		position: relative;
		margin: 0px;
		padding: 10px;
		color: var(--var-contrast-color);
		background: linear-gradient(10deg, var(--var-tertiary-color), var(--var-secondary-color));
		font-size: 0.85rem;
	}

	section {
		margin: 0px;
		padding: 0px;
		overflow: hidden;

		&.intro {
			background: var(--var-contrast-color);

			p {
				line-height: 1.5em;
			}

			.photo {
				position: relative;
				display: block;
				margin: 0px auto;
				width: 300px;
				height: 300px;
				max-width: 100%;
				color: var(--var-contrast-color);
				background: transparent url("faces/sg.jpg") no-repeat center center;
				background-size: cover;
				border-radius: 100%;

				.bg-cover {
					position: absolute;
					inset: -10px;
					width: 320px;
					height: 320px;
					max-width: none;
					background: linear-gradient(0deg, var(--var-tertiary-color), var(--var-secondary-color));
					opacity: 0.75;
					border-radius: 100%;
					box-shadow: 0px 0px 10px var(--var-main-color);
					animation: photo 2s linear 0s infinite;
					z-index: -1;

					:is(:hover, :focus) > & {
						animation: none;
					}
				}
			}
		}

		&.transparent {
			color: var(--var-contrast-color);
			background: none;
		}

		&.semi-transparent {
			position: relative;
			background: none;

			&::before {
				content: "";
				position: absolute;
				inset: 0px;
				background: var(--var-contrast-color);
				opacity: 0.75;
				z-index: 0;
			}

			> * {
				position: relative;
				z-index: 1;
			}
		}

		&.light {
			background: var(--var-light-shadow-color);
		}

		&.white {
			background: var(--var-contrast-color);
		}

		.columns {
			display: block;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			align-content: stretch;

			@media (width >= 678px) {
				display: flex;
			}

			& > div {
				width: 100%;

				@media (width >= 678px) {
					width: 50%;
				}
			}

			& > div.full {
				width: auto;
			}

			& > div.six {
				width: auto;

				@media (width >= 678px) {
					width: 66%;
				}
			}

			& > div.eight {
				width: auto;

				@media (width >= 678px) {
					width: 80%;
				}
			}

			section.intro & {
				min-height: 50vh;

				.left {
					margin: 20px -10px;
					padding: 15px 10px;

					& > * {
						display: inline;
						margin: 30px 0px;
						padding: 5px 0px;
						color: var(--var-main-color);
						background: var(--var-contrast-color);
						box-shadow: 10px 0 0 var(--var-contrast-color), -10px 0 0 var(--var-contrast-color);
						box-decoration-break: clone;

						&:is(div) {
							display: block;
							margin: 10px 0px;
							width: max-content;

							& + div {
								margin-top: -20px;
							}
						}

						&::before {
							content: "\A";
							display: block;
							height: 0px;
						}

						&p::before {
							height: 40px;
						}
					}
				}
			}

			ul {
				margin: 0px;
				padding: 0px;
				list-style-type: none;

				li {
					margin: 10px;

					&::before {
						content: "";
						display: inline-block;
						margin: 0px 10px 0px 0px;
						padding: 0.35em;
						background: linear-gradient(10deg, var(--var-tertiary-color), var(--var-secondary-color));
						border-radius: 100%;
					}
				}
			}

			h1 {
				margin: 0px;
				padding: 0px;
				width: max-content;
				font-size: 2.75rem;
				color: var(--var-primary-color);
				background-image: linear-gradient(10deg, var(--var-primary-color), var(--var-tertiary-color));
				color: transparent;
				background-clip: text;

				@media (width >= 678px) {
					font-size: 4rem;
				}
			}

			h2 {
				margin: 0px 0px 20px 0px;
				padding: 0px;
				font-size: 2rem;
			}

			span {
				font-size: 1.2rem;
			}

			p, ul {
				font-size: 1.2rem;
			}

			a {
				color: var(--var-primary-color);
				text-decoration: none;

				&:is(:hover, :focus) {
					text-decoration: underline;
				}
			}

			em {
				font-family: "Courier New", Courier, monospace;
			}
		}
	}

	.container {
		margin: 0px auto;
		padding: 40px 20px;
		max-width: 1240px;

		footer > & {
			padding: 0px 20px;
		}
	}

	.social-links {
		display: block;
		padding: 0px 10px;
		color: var(--var-main-color);
		background: var(--var-light-shadow-color);
		border-top: solid 4px var(--var-primary-color);

		ul {
			margin: 0px;
			padding: 0px;
			list-style-type: none;
			text-align: center;

			li {
				display: inline-block;

				a {
					display: block;
					padding: 20px;
					color: inherit;
					text-decoration: none;

					&:is(:hover, :focus) {
						color: var(--var-primary-color);
						background: var(--var-contrast-color);
					}
				}
			}
		}
	}
}

@keyframes photo {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}