source ⟩ hypertext ⟩ public ⟩ indigo ⟩ craft ⟩ iceberg ⟩ style.css

:root {
	--text: white;
	--background: black;
	--accent: white;
}

body {
	font-family: var(--sans-serif);
	font-size: 1.1rem;
}

main {
	max-inline-size: 100ch;
}

#iceberg {
	display: grid;
	grid-template-columns: 4fr 1fr;
	align-items: center;

	text-align: center;

	& .bg-row {
		block-size: 100%;

		background-size: 100% 100%;

		& .iceberg-list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-wrap: wrap;

			block-size: 100%;
			margin: 0;
			padding: 1rem;

			text-align: center;

			& > li {
				display: block;
				padding-inline: 1em;

				font-weight: bold;
				text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 0 2px 3px black;
			}
		}

		&:not(:first-of-type) {
			border-block-start: 5px solid white;
		}

		&.layer-minus1 {
			background-image: url("/indigo/craft/iceberg/media/level-1.jpg")
		}
		&.layer-0 {
			background-image: url("/indigo/craft/iceberg/media/layer0.jpg")
		}
		&.layer-1 {
			background-image: url("/indigo/craft/iceberg/media/layer1.jpg")
		}
		&.layer-2 {
			background-image: url("/indigo/craft/iceberg/media/layer2.jpg")
		}
		&.layer-3 {
			background-image: url("/indigo/craft/iceberg/media/layer3.jpg")
		}
		&.layer-4 {
			background-image: url("/indigo/craft/iceberg/media/layer4.jpg")
		}
		&.layer-5 {
			background-image: url("/indigo/craft/iceberg/media/layer5.jpg")
		}
		&.layer-6 {
			background-image: url("/indigo/craft/iceberg/media/layer6.jpg")
		}
		&.layer-7 {
			color: red;

			background-image: url("/indigo/craft/iceberg/media/layer7.jpg");
		}
	}

	& .figure-row {
		padding: 1rem;

		& figcaption {
			font-size: 0.9rem;
			letter-spacing: var(--caps-spacing);
			text-align: center;
			text-transform: uppercase;
		}
	}
}