:root{
	--color-1: #333; 
	--text-color: #f0f0f0;
	--accent-color: #006aff; 
}

nav {
    position: fixed; /* Fixes the navigation bar to the top of the viewport */
    top: 0; /* Positions the top of the navigation bar at the top of the viewport */
    left: 0; /* Ensures the navigation bar spans from the left edge of the viewport */
    width: 100%; /* Makes the navigation bar span the full width of the viewport */
    height: 80px; /* Sets the height of the navigation bar */
	background-color: var(--color-1); 
	display: flex; 
	justify-content: flex-end; 
	align-items: center; 
    z-index: 1000; /* Ensures the navigation bar stays on top of other content */
}

.links-container{
	height: 100%;
	width: 100%; 
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	justify-content: center; 
}

nav a {
	height: 100%;
	padding: 0 20px; 
	display: flex; 
	align-items: center; 
	text-decoration: none; 
	color: var(--text-color); }

nav a:hover {
	background-color: var(--accent-color);
}

nav .home-link{
/*	margin-right: auto; */
	color: rgba(169,255,104,1);
	
	
}

nav .logo {
    position: absolute; /* You only need one 'position' property */
    left: 10px;
    top: 20px;

    /* Set the desired dimensions for the container */
    width: 200px; /* or adjust to whatever width you prefer */
    height: 40px; /* or adjust to whatever height you prefer */

    background-image: url("../imgs/imgLogo.png");
    background-size: contain; /* Ensures the logo fits within the width/height while maintaining aspect ratio */
    background-repeat: no-repeat; /* Prevents the logo from repeating */
    background-position: center; /* Centers the logo within the container */

    /* Optional: To ensure the container is responsive */
    max-width: 100%; /* Ensure it doesn't exceed the parent container's width */
    max-height: 100%; /* Ensure it doesn't exceed the parent container's height */
}


#sidebar-active{
	display: none; 
}

.open-sidebar-button{
	display: none; 

}

.close-sidebar-button{
	display: none; 

}

.menu-text {
	display: none; /* Hide by default */
}

.logo-mobile {
	display: none; 
}

#overlay {
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: none;
}

@media(max-width: 850px){
	nav .home-link{
	/*	margin-right: auto; */
		color: green; 
		transition: 0.75s cubic-bezier(.36, -0.01, 0, .77); 
	}
	
	nav .logo {
		position: fixed;
		width:40px;
		height: 40px; 
		position: absolute;
		background-image: url("Spotify_logo_with_text.svg.webp");
		background-size: cover;
		color: white; 
		margin: 10px; 
		display: none; 
		
	}
	
	.logo-mobile {
		display: block; 	
		padding: 20px 0; 
		width:40px;
		height: max; 
		position: absolute;
		left: 50%;
		background-color: #333; 
		text-align: center;
		margin-left: -20px;
		background-image: url("../imgs/favicon.png");
		background-size: cover;
		color: none; 
	}
	
	nav .logo:hover {
		background-color: grey; 
	}
	
	.links-container{
		flex-direction: column; 
		align-items: flex-end;  /* voor het teken om de nav te openen en te sluiiten */
		justify-content: flex-start; /* Om de items van de lijst bovenin te krijgen */
		
		position: fixed; 
        top: 0; /* Keep the container at the top of the viewport */
		right: -300px; 
		z-index: 10; 
		width: 300px; 
		
		background-color: var(--color-1);
		box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.25); 	
		overflow-x: hidden;
		transition: 0.5s;

        padding-top: 80px; /* Push the nav items 80px down from the top */
	}
	
	nav a{
		box-sizing: border-box; 
		height: auto; 
		width: 100%; 
		padding: 20px 30px; 
		justify-content: start; 
		transition: 1s;
		opacity: 0; /* Initially hidden */
		transform: translateX(200px); /* Initial position outside the container */
	}
	
	.open-sidebar-button{
		top: 20px; 
		right: 20px; 
		display: block;  
		color: white; 
		font-size: 30px;
		position: fixed; 
	}
	
	.close-sidebar-button{
        top: 20px;
        right: 20px; /* Adjust as needed */
        display: none; /* Hide by default */
        color: white;
        font-size: 30px;
        position: fixed;
        z-index: 15;
	}
	
    .menu-text {
        display: none; /* Hide by default */
        position: absolute;
        top: 25px;
        left: 30px; /* 20px from the left side of the links-container */
        color: white;
        font-size: 20px; /* Adjust as needed */
        font-weight: bold;
        z-index: 15;
    }

	.links-container a:nth-child(4) {
		transition-delay: 0.05s; /* Delay for the 3rd child item */
	}

	.links-container a:nth-child(5) {
		transition-delay: 0.10s; /* Delay for the 4th child item */
	}

	.links-container a:nth-child(6) {
		transition-delay: 0.15s; /* Delay for the 5th child item */
	}

	.links-container a:nth-child(7) {
		transition-delay: 0.20s; /* Delay for the 6th child item */
	}
	.links-container a:nth-child(8) {
		transition-delay: 0.25s; /* Delay for the 7th child item */
	}
	
    #sidebar-active:checked ~ .links-container .menu-text {
        display: block; /* Show when sidebar is active */
    }

    #sidebar-active:checked ~ .links-container .close-sidebar-button {
        display: block; /* Show close button when sidebar is active */
    }
	

	#sidebar-active:checked ~ .links-container a {
		opacity: 1; /* Show the links */
		transform: translateX(0); /* Move links back to their original position */
	}
	


	
	#sidebar-active:checked ~ .links-container{
		width: 300px;
		right: 0; /* Slide in from the right */
	}
	
	#sidebar-active:checked ~ #overlay{
    display: block;
	}
	
	#sidebar-active:not(:checked) ~ .links-container {
		transition-delay: 0.35s; /* Delay the container transition */
		width: -300px; /* Slide out to the left after child items disappear */
	}
	
	#sidebar-active:not(:checked) ~ .links-container a {
		opacity: 0; /* Hide the links */
		transform: translateX(200px); /* Move links back outside the container */
	}
}