Wikipedista:Janbery/Dílna/Startovací stránka/style.css

/* Ensure the body and html take up full height */
html, body {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header_menu_container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header_menu {
	display: flex;
	flex-direction: row;
	justify-content: center; /* Center items horizontally within the menu */
	align-items: center; /* Center items vertically within the menu */
	flex-wrap: wrap;
	text-align: center;
	padding: 0em 0;
	font-family: "Montserrat", "sans serif";
	gap: 0.3em;
	max-width: 100%;
}

.header_menu a {
	background-color: gainsboro;
	width: 160px; /* Updated to 160px */
	height: 160px; /* Updated to 160px */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 500ms ease;
	border-bottom: 0.8em solid white;
	text-decoration: none;
	font-size: 1.15em;
	font-weight: bold;
	color: #000000;
	box-sizing: border-box; /* Ensure padding is included in the width and height */
}

.header_menu .active-menu-item + a {
	background-color: #FFFFFF;
	transition: none;
	border-bottom: 0.8em solid #293380;
	color: #293380;
}

.header_menu a:hover {
	background-color: #293380;
	text-decoration: none;
	color: #293380;
}

.header_menu .active-menu-item + a:hover {
	background-color: #FFFFFF;
}

.content-block {
	padding: 0em;
}

@media screen and (max-width: 600px) {
	html, body {
		justify-content: flex-start; /* Align content to the top on smaller screens */
	}

	.header_menu_container {
		justify-content: center; /* Ensure center alignment on smaller screens */
		align-items: flex-start; /* Align items to the top */
		padding: 0em;
	}

	.header_menu {
		flex-direction: column; /* Stack items vertically */
		justify-content: center;
		align-items: center;
	}

	.header_menu a {
		width: 120px; /* Adjusted for smaller screens */
		height: 120px; /* Adjusted for smaller screens */
	}
}