/*
Here are only the media settings for the navigation/articles
The rest of the settings are in the other files.
*/

/*** Mobile ***/



.article_flex {
	display: block;
	margin: 0pc auto 50px auto;
	max-width: 70%;
}

.flex_wrapper:has(.article_flex) {
	display: block;
}

#logo_btn {
	margin: auto auto auto 0px;
	z-index: 10;
}

.nav_btn_wrapper {
	position: absolute;
	left: 20px;
	margin: 0px;
	padding: 80px 10px 10px 10px;
	width: 200px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s, visibility 0.15s;
}

.nav_menu:has(#logo_btn:hover) .nav_btn_wrapper,
.nav_btn_wrapper:hover {
	opacity: 1;	
	visibility: visible;
	transition: opacity 0.15s, visibility 0.15s;
}

.section_container.flex_wrapper {
	display: block;
}


/*** Desktop ***/


@media (min-width: 1025px) {

	.article_flex {
		display: flex;
		margin: 0px 10px;
	}

	#logo_btn {
		margin: auto 15px auto 0px;
		padding: 25px;

		background-size: 40px;
	}
	.flex_wrapper:has(.article_flex) {
		display: flex;
	}
	.section_container.flex_wrapper {
		display: flex;
	}
	.nav_btn_wrapper {
		position: static;
		display: block;
		padding: 10px;
		margin: 0px;
		width: auto;
	}
	.nav_btn_wrapper li a{
		min-width: 100px;
		width: fit-content;
	}

	.nav_menu {
		background-color: var(--rose);
		box-shadow: var(--rose) 0px 0px 10px 10px;
	}

	.main_content {
		padding-top: 160px;
	}
	.nav_menu li{
		margin: unset;
	}

	.nav_btn_wrapper {
		visibility: visible;
		opacity: 1;
	}

}