@media
{

	header *
		{
			z-index: 10;
		}
	.hamburger_link
		{
			position: fixed;
			top: 2vw;
			right: 15vw;
			padding: 0.5vw;
			z-index: 10; /* the header z-index gets overwritten by a style option, where I write: a {all: unset; }*/
		}
	#hamburger_icon
		{
			height: 1.6vw;
		}


	nav
		{
			position: fixed;
			width: 30vw;
			height: 100vh;
			left: -80vw;
			top: 0;
			background-color: rgba(0,0,0,0.8);
			transition: 0.7s ease;
			gap: 2vw;
		}

	nav a
		{
			width: 100%;
			justify-content: flex-start;
			font-size: 1.5vw;
			padding-left: 2vw;
			color: var(--yellow);
		}


}

@media (max-width: 1400px)
	{
	.hamburger_link
		{
			top: 2vw;
			right: 5vw;
			padding: 2vw;
		}
	#hamburger_icon
		{
			height: 2.5vw;
		}

		nav a
		{
			font-size: 2.5vw;
		}
	}


@media (max-width: 800px)
	{

	.hamburger_link
		{
			top: 7vw;
			right: 7vw;
			padding: 5vw;
		}
	#hamburger_icon
		{
			height: 6.5vw;
		}

		nav
		{
			left: -80vw;
			gap: 9vw;
			width: 80vw;
		}
		nav a
		{
			font-size: 4.5vw;
			padding-left: 5vw;
		}

	}