*, *::before, *::after { /* set to all elements */
	margin: 0; /* to remove default auto margin 10px */
	padding: 0; /* to remove default auto padding */
	box-sizing: border-box; /* make sure width & height follows size of container instead of text */
}
body {
	background: linear-gradient(white, lightgray);
	max-width: 100vw;
	width: 100%;
	min-height: 100vh;
}

.logo-header {
	/*display: none;*/
	position: absolute;
	top: calc(50vh - 100px);
	left: calc(50vw - 100px);
	/*margin: 50vw 50vh;*/
	width: 200px;
	z-index: 100;
}


/* --------------------------------------------------- Container A --------------------------------------------------- */
	.containerA {
		position: relative;
		/*position: relative; top: calc(100vh/2 - 100px); left: calc(100vw/2 - 500px);*/
		/*margin: calc(100vh * 0.5 - 100px) auto;*/
		margin: auto;
		background-color: blue;
		width: min(100%,500px);
		height: 50px;
		display: flex;
		overflow: hidden;
	}
	.item {
		display: flex;
		justify-content: center;
		align-items: center;

		position: relative;
		background-color: red;
		width: 100%; height: 100%;
		border: 1px solid black;
		flex: 1;
		transition: flex 0.1s;
	}
	.item:hover, .item:visited {
		background-color: rebeccapurple;
		flex: 2;
		color: white\;
	}
	a.link-item {
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
	}


/* --------------------------------------------------- Container B (Responsive Basic Box) --------------------------------------------------- */
	.containerB {
		background-color: skyblue;
		width: 500px;

		position: relative;
		margin: auto;
		top: 25px;

		display: flex;
		flex-wrap: wrap;
	}
	.itemB {
		background-color: cadetblue;
		border: 1px solid black;
		min-height: 100px;
	}
	.itemB-1 {
		width: calc(500px * 0.7);
		background-color: deepskyblue;
	}
	.itemB-2 {
		width: calc(500px* 0.3);
	}


.hamburger, .hamburger input {
	margin: auto;
	appearance: none;
	background-color: red;
	width: 50px; height: 50px;
}
.hamburger input:checked {
	background-color: blue;
}
.sidebar {
	background-color: hotpink;
	width: 100px;
}
.hamburger:has(input:checked) + .sidebar{
	/*display: none;*/
	translate: 0;
	display: none;
}

.containerC {
	background-color: steelblue;
	width: 100px;
	height: 50px;
	margin: auto;
}
.hideC {
	background-color: blue;
	width: 800px;
	height: 50px;
	margin: auto;
	display: none;
}
.containerC:hover + .hideC, .hideC:hover {
	display: block;
}


.containerD {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 200px;
	background: linear-gradient(180deg, rgba(255, 192, 30, 1) 60%, rgba(255, 175, 58, 1) 100%);
	&::before {
		content: "";
		position: absolute;
		top: 0; bottom: 0; right: 0; left: 0;
		background-repeat: repeat;
		background-image: url('assets/pattern_motif_header.png');
		mix-blend-mode: overlay;
		opacity: 0.2;
		background-size: cover;
	}
}
a.textDlink {
	position: relative;
	color: red;
	font-size: 3em;
	padding: 20px;
	text-decoration: none;
}
a.textDlink:hover {
	color: white;
}










/* MOBILE RESPONSIVE ------------------------------------------------------------------------------------------ */
@media screen and (max-width: 500px) {
	/* ContainerA --------------------------------------------------------------------------------- */
		.containerA {
			width: 100%;
		}

	/* ContainerB --------------------------------------------------------------------------------- */
		.containerB {
			width: 100%;
		}
		.itemB {
			width: 100%;
			flex-grow: 1;
		}
		.itemB-1 {
			order: 2;
		}
}