.toggle {
    cursor: pointer;
    position: relative;
    z-index: 1100;
    right: 0;
    top: 0;
}

@media only screen and (min-width: 993px) {
	/* Button styling */
	.toggle {
		display: none;
	}
	.close-button{
		display: none;
	}
}

@media only screen and (max-width: 992px) {
	.content-area {
		width: 100%;
	}
	.navigation {
		padding: 0 20px;
	}
	/* Button styling */
	.toggle {
		display: block;
	}
	/* Position the close button in the top right corner of the nav */
	.close-button {
		position: absolute;
		top: 10px;
		right: -42px;
		background-color: #333;
		border: none;
		color: white;
		font-size: 42px;
		cursor: pointer;
		padding: 0px 10px;
		border-radius: 0px 10px 10px 0px;
		z-index: 1101;
	}

	/* Adjust other styling as needed for visibility */
	.close-button:hover {
		color: #ddd;
	}

    /* Hide the navigation off-screen by default */
	.nav {
		position: fixed;
		top: 0;
		left: -100%; /* Start completely off the screen to the left */
		width: 300px; /* Adjust the width of the menu */
		height: 100vh;
		background-color: #333; /* Background color for the overlay menu */
		transition: left 0.3s ease; /* Smooth transition for the slide-in effect */
		z-index: 999999;
		display: flex;
		flex-direction: column;
		padding-top: 60px; /* Adjust to give some spacing */
	}

	/* Open state: slide the nav in from the left */
	.nav.open {
		left: 0;
		padding-top: 90px;
	}

	/* Styling for the navigation links */
	.main-menu .navlinks {
		padding-left: 0;
		list-style: none;
		margin-bottom: 100px;
	}

	/* Menu links appearance */
	.main-menu .navlinks li {
		display: block;
		margin: 15px;
	}

	.main-menu .navlinks li a {
		color: white;
		text-decoration: none;
		padding: 10px 15px;
		display: block;
	}

	/* Optionally, add a slight hover effect for links */
	.main-menu .navlinks li a:hover {
		background-color: #555;
	}

}