@media (orientation: portrait) {
	/* Hide landscape-only elements if still used */
	.landscape {
		display: none !important;
	}

	header {
	}

	header.site-header {
		height: 8vh;
		position: static;
		border-bottom: 0.25vh solid var(--light);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 4vw;
	}

	#hamburger {
		display: block;
		width: 6vh;
		height: auto;
		cursor: pointer;
	}

	#main-nav {
		flex-direction: column;
		background-color: var(--accent);
		width: 100vw;
		height: 90vh;
		transition: transform 0.3s ease;
		top: 10vh;
		position: absolute;
		left: 0;
		align-items: start;

		transform: translateX(-100%);
		gap: 0;

		border-top: 0.25vh solid var(--light);
	}

	#main-nav.slide-in {
		transform: translateX(0%);
	}


	#main-nav.open {
		display: flex;
	}

	.dropdown {
		height: auto;
		margin: 0;
		text-align: center;

		padding: 0;
		width: 100%;
		background-color: var(--dark);

		border-bottom: 0.25vh solid var(--light);
	}

	.dropdown a {
		font-size: 5vw;
		display: block;
		padding: 2vh 0;
		color: var(--light);

		padding-left: 4vw;
		height: fit-content;	
	}

	.dropdown-content {
		position: static;
		box-shadow: none;
		background-color: var(--background);
		width: 100%;

		display: block;
		text-align: left;
		padding: 0;
	}

	.dropdown-content a {
		font-size: 4.5vw;
		color: var(--light);
		padding: 1.5vh 0;

		padding-left: 8vw;
		border-top: 0.25vh solid var(--light);
	}

	.content,
	footer {
		padding-left: 4vw;
		padding-right: 4vw;
	}

	form {
		padding: 0;
	}

	.margin-left,
	.margin-right {
		display: none;
	}

	.table-wrapper {
		overflow: auto;
	}

	td,
	select {
		width: fit-content;
	}

	.flex {
		flex-direction: column;
		gap: 2vh;
	}

	.grid-four, .grid-two {
		grid-template-columns: 1fr;
		gap: 2vh;
	}

	.main-logo {
		width: 60vw;
	}
}

@media (orientation: landscape) {
	.portrait {
		display: none !important;
	}

	#hamburger {
		display: none;
	}
}