/* Limit the header height to 70% of the viewport height */
header {
	max-height: 70vh;
/* 70% of the viewport height */
	overflow: hidden;
/* Hide any overflow content */
}

/* Ensure the navigation menu items are displayed horizontally */
.wp-block-navigation__container {
	display: flex;
	justify-content: center;
	gap: 2vw;
/* Space between items */
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Styling for each menu item with black background by default */
.wp-block-navigation-item {
	background-color: black !important;
/* Black background */
	color: white !important;
/* White text */
	padding: 2vh 4vw;
/* Increased padding for wider boxes */
	font-size: calc(1rem + 1vw);
/* Responsive font size */
	font-weight: 900;
/* Bold text */
	text-align: center;
/* Center the text */
	text-transform: uppercase;
/* Uppercase text */
	transition: all .3s ease;
/* Smooth transition for hover effects */
	display: inline-block;
/* Ensure the items are displayed inline */
	width: 180px;
/* Increase width to make boxes wider */
	height: auto;
/* Height adjusts based on content */
	margin: 0;
/* Remove default margin */
	position: relative;
/* Ensures positioning for the text */
	overflow: hidden;
/* Prevents content from overflowing */
	white-space: nowrap;
/* Prevents text from wrapping onto a new line */
	text-overflow: ellipsis;
/* Adds ellipsis (...) if the text overflows */
}

/* Apply fixed angles for each menu item */
.wp-block-navigation-item:nth-child(1) {
	transform: rotate(-10deg);
/* Angle for the first item */
}

.wp-block-navigation-item:nth-child(2) {
	transform: rotate(-5deg);
/* Angle for the second item */
}

.wp-block-navigation-item:nth-child(3) {
	transform: rotate(3deg);
/* Angle for the third item */
}

.wp-block-navigation-item:nth-child(4) {
	transform: rotate(5deg);
/* Angle for the fourth item */
}

/* Ensure links inside the menu items are displayed correctly */
.wp-block-navigation-item a {
	color: white !important;
/* Ensure link color is white */
	text-decoration: none;
/* Remove underline from links */
	display: block;
/* Makes the entire box clickable */
	height: 100%;
	width: 100%;
/* Makes the link fill the box */
}

/* Hover effect on menu items */
.wp-block-navigation-item:hover {
	background-color: #FF7900 !important;
/* Orange background on hover */
	color: black !important;
/* Text color turns black on hover */
}

body {
	font-family: "Proxima Nova", sans-serif;
}