html {
	--u: 1.5vmax; /* change hexagon size */
	--c1: #60b2f3;
	--c2: #489de2;
	--c3: #2c8cd8;
	--c4: #1d81d0;
	--gp: 50% / calc(var(--u) * 10) calc(var(--u) * 12);
	--glt: repeating-conic-gradient(
			from 210deg at 16.66% 25%,
			var(--c2) 0% 33.3%,
			#fff0 0% 100%
		)
		var(--gp);
	--glb: repeating-conic-gradient(
			from 210deg at 16.66% 75%,
			var(--c4) 0% 33.3%,
			#fff0 0% 100%
		)
		var(--gp);
	height: 100vh;
	background: repeating-linear-gradient(
				to bottom,
				var(--c1) 0% 1.5%,
				transparent 1.5% 23.5%,
				var(--c2) 23.5% 26.5%,
				transparent 26.5% 48.5%,
				var(--c3) 48.5% 51.5%,
				transparent 51.5% 73.5%,
				var(--c4) 73.5% 76.5%,
				transparent 76.5% 98.5%,
				var(--c1) 98.5% 100%
			)
			var(--gp),
		var(--glt), var(--glb), var(--glt), var(--glb), var(--glt), var(--glb),
		var(--glt), var(--glb),
		repeating-conic-gradient(
				from 150deg at 50% 75%,
				var(--c1) 0% 33.3%,
				#fff0 0% 100%
			)
			var(--gp),
		repeating-conic-gradient(
				from 90deg at 66.66% 50%,
				var(--c4) 0% 33.3%,
				#fff0 0% 100%
			)
			var(--gp),
		repeating-conic-gradient(
				from -90deg at 50% 25%,
				var(--c1) 0% 33.3%,
				var(--c2) 0% 66.4%,
				var(--c3) 0% 100%
			)
			var(--gp);

	transform: rotate(60deg);
	overflow: hidden;
}

html:before {
	content: "";
	background: linear-gradient(-45deg, #002542 0%, transparent 50%, #d2ebff 100%);
	position: absolute;
	width: 100vw;
	height: 100vh;
	transform: rotate(-60deg);
}