@media (max-aspect-ratio: 0.8) or (width < 480px) { /* default portrait mode, nth-of-types all here so that they do not need to be overriden later */
	.topic:nth-of-type(n+7) { /* display only the first six hexagons by default */
		display: none;
	}
	@media (max-aspect-ratio: 0.9356) { /* "load" next hexagons if window is high enough */
		.topic:nth-of-type(-n+8) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.8063) {
		.topic:nth-of-type(-n+9) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.7083) {
		.topic:nth-of-type(-n+11) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.6316) {
		.topic:nth-of-type(-n+12) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.5699) {
		.topic:nth-of-type(-n+14) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.5192) {
		.topic:nth-of-type(-n+15) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.4767) {
		.topic:nth-of-type(-n+17) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.4407) {
		.topic:nth-of-type(-n+18) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.4097) {
		.topic:nth-of-type(-n+20) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.3828) {
		.topic:nth-of-type(-n+21) {
			display: inline-block;
		}
	}
}

@media (0.8 < aspect-ratio < 1.2) and (min-width: 480px) { /* square mode */
	.topic:nth-of-type(n+16) { /* display the first 15 hexagons by default */
		display: none;
	}
	@media (max-aspect-ratio: 1.1144) { /* "load" next hexagons if window is high enough */
		.topic:nth-of-type(-n+17) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 0.9955) {
		.topic:nth-of-type(-n+20) {
			display: inline-block;
		}
	}
}

@media (1.2 <= aspect-ratio < 2.49) and (min-width: 480px) { /* landscape mode */
	.topic:nth-of-type(n+10) { /* display the first nine hexagons by default (limit for 9 is aspect ratio 2.4941) */
		display: none;
	}
	@media (max-aspect-ratio: 2.0359) { /* "load" next hexagons if window is high enough */
		.topic:nth-of-type(-n+12) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 1.72) {
		.topic:nth-of-type(-n+15) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 1.4889) {
		.topic:nth-of-type(-n+18) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 1.3125) {
		.topic:nth-of-type(-n+21) {
			display: inline-block;
		}
	}
}

@media (2.49 <= aspect-ratio < 4.57) and (min-width: 480px) { /* ultra wide mode */
	.topic:nth-of-type(n+9) { /* display the first eight hexagons by default (first row) */
		display: none;
	}
	@media (max-aspect-ratio: 3.4801) { /* "load" next hexagons if window is high enough */
		.topic:nth-of-type(-n+12) {
			display: inline-block;
		}
	}
	@media (max-aspect-ratio: 2.8095) {
		.topic:nth-of-type(-n+16) {
			display: inline-block;
		}
	}
}

@media (min-aspect-ratio: 4.57) and (min-width: 480px) { /* row mode */
	body {
		padding: 1vw 0 0 0;
	}
	label.navictrl {
		top: 4.8749vw;
		left: 0.5%;
		width: 6vw;
		transform: none;
	}
	.line {
		left: 1vw;
		height: 0.5vw;
		width: 5vw;
	}
	.line:nth-child(1) {
		top: 1vw;
	}
	.line:nth-child(2) {
		top: 2.5vw;
	}
	.line:nth-child(3) {
		top: 4vw;
	}
	#navictrl:checked + .navictrl .line:nth-child(1) {
		transform: translateY(1.5vw) rotate(-45deg);
	}
	#navictrl:checked + .navictrl .line:nth-child(3) {
		transform: translateY(-1.5vw) rotate(45deg);
	}
	nav.topmenu {
		top: 0;
		left: 10.553vw;
	}
	.topic {
		width: 14.994%; /* 7.65% * 2 * 0.98 where 7.65% is roughly 100% / 13 */
		margin: 0.132498vw 0 -6.492402vw 0.306%; /* 7.65vw * 0.866 * 0.02 ; 0 ; -7.65vw * 0.866 * 0.98 ; 7.65% * 0.04 */
	}
	.topic a {
		font-size: 1.9vw;
	}
	.topic:nth-of-type(8n+1) {
		margin-left: 7.803%; /* 7.65% * 1.02 */
	}
	.topic:nth-of-type(n+7) { /* display the first 6 hexagons (one row) */
		display: none;
	}
}