.navig {
	display: inline-block;
	width: 100%;
	box-shadow: 0px 0px 0.312vw var(--biloubgc33);
	background: linear-gradient(135deg, var(--biloubgct) 0%, var(--biloubgc33) 31.25vw);
	transition-property: background-color;
	transition-timing-function: var(--biloueazout);
	transition-duration: 0.3s;
	position: relative;
    text-align: center;
}
.navig, .navig > * {
    box-sizing: border-box;
}
.navig .infos {
	position: absolute;
	text-align: start;
	width: 100%;
	top: 0;
}
.navig .infos span {
	display: inline-block;
	background: linear-gradient(var(--biloubgc80), var(--biloudark));
	padding: .1vw .4vw;
	margin: .1vw;
	border: solid var(--biloulight) 1px;
	color: var(--biloulightgreen);
	border-radius: .5vw;
	font-size: .8em;
}
.navig .infos span:last-of-type {
	margin-left: auto;
}
.navig > p {
    width: 100%;
	color: var(--bilouhighlight);
	font-family: serif;
	padding: 0 0.5vw;
	margin: 0;
	margin-bottom: 1em;
	font-size: 1.1em;
    margin-top: 1.5vw;
}
.navig time {
	position: absolute;
	display: block;
	z-index: 100;
	font-size: small;
	color: var(--biloulightgreen);
	opacity: .5;
    top: 7.5vw;
    right: 0.58vw;
	transition-property: top;
	transition-timing-function: var(--biloueazout);
	transition-duration: 0.3s;
}
.navig > h2 {
	color: var(--biloulight);
    text-shadow: var(--biloutextborder);
    width: 100%;
	transition-property: color, transform;
	transition-timing-function: var(--biloueazout), var(--biloustic);
	transition-duration: 0.3s;
	line-height: 1.5em;
	margin: .5vw 0;
	font-size: 2.5em;
}
.navig_icon {
    width: 4em;
	position: relative;
    margin: -2vw;
	transition-property: left, transform;
    transition-timing-function: var(--biloustic);
	transition-duration: 0.3s;
	z-index: 100;
	user-select: none;
    bottom: 1em;
	filter: drop-shadow(0 0 0.2rem var(--biloubgc80));
}
.navig.simple {
    padding: 0.5vw 2vw;
}
.navig.simple .navig_icon {
    width: 4em;
    margin: 2.5em -3em -2em;
}
.navig.simple time {
	top: 0;
}
html:not(.can-touch) .navig:hover {
    background-color: var(--biloubgc33);
}
html:not(.can-touch) .navig:hover > h2 {
    color: var(--biloulightgreen);
    transform: scale(1.05);
}
html:not(.can-touch) .navig:hover > .preview_images {
    height: 9.5vw;
    margin-bottom: -.5vw;
}
html:not(.can-touch) .navig:not(.simple):hover > time {
    top: 9.5rem;
}
html:not(.can-touch) .navig:hover > .navig_icon {
	transform: rotate(10deg) scale(1.1);
}
html:not(.can-touch) .navig:nth-child(odd):hover > .navig_icon {
	transform: rotate(-10deg) scale(1.1);
}
html:not(.can-touch) .navig.simple:hover > .navig_icon {
	transform: rotate(10deg) scale(1.05);
}
html:not(.can-touch) .navig.simple:nth-child(odd):hover > .navig_icon {
	transform: rotate(-10deg) scale(1.05);
}
.preview_images {
	width: 100%;
	height: 9vw;
	display: grid;
	grid-template: 'a';
	transition-property: width, height, margin;
	transition-timing-function: var(--biloueazout);
	transition-duration: 0.3s;
	background-image: url('data:image/svg+xml,<svg width="20px" height="20px" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="rgba(22, 21, 28, .33)"><rect width="10" height="10"/><rect x="10" y="10" width="10" height="10"/></svg>');
	background-attachment: fixed;
	background-size: 2vw;
	mask-image: linear-gradient(to top left, transparent 0%, black 80%);
}
.preview_images > div {
	box-shadow: 0px 0px 1px var(--biloubgc80);
	background-size: cover;
	background-position: 50% 25%;
	background-position: center;
	background-repeat: no-repeat;
}
.preview_images > div:nth-child(1) {
	grid-area: a;
}
.preview_images > div:nth-child(2) {
	grid-area: b;
}
.preview_images > div:nth-child(3) {
	grid-area: c;
}
.preview_images > div:nth-child(4) {
	grid-area: d;
}
.preview_images > div:nth-child(5) {
	grid-area: e;
}
.preview_images > div:nth-child(6) {
	grid-area: f;
}
.preview_images:has(> :last-child:nth-child(2)) {
	grid-template:'a b' / 2fr 1fr;
}
.preview_images:has(> :last-child:nth-child(3)) {
	grid-template: 'a b''a c';
}
.preview_images:has(> :last-child:nth-child(4)) {
	grid-template:'a b b''a c d' / 2fr 1fr 1fr;
}
.preview_images:has(> :last-child:nth-child(5)) {
	grid-template:'a b d''a c d''a c e';
}
.preview_images:has(> :last-child:nth-child(6)) {
	grid-template:'a a d''a a d''a a e''b c e''b c f''b c f';
}
#navig_footer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
#navig_footer::before {
	content: '';
	display: block;
	background-image: url('data:image/svg+xml,<svg width="2048" height="2048" version="1.1" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="m1342.4 1069.5c-11.332 54.239-75.581 268.26-330.3 297.58-254.72 29.318-386.13-358.59-269.77-521.78 116.27-163.26 272.61-212.39 391.24-77.692 118.63 134.69 112.41 450.02-136.26 427.97-248.71-22.081-209.46-207.93-147.58-246.62 61.889-38.743 121.4-83.182 154.44-21.791 77.807 144.51-178.7 6.0065-153.36 128.28 27.416 132.23 388.76 32.975 305.89-122.68-91.148-171.21-240.32-209.54-343.58-112.83-104.19 97.554-87.304 233.62-67.678 301.61 19.626 67.99 117.39 208.96 358.39 143.5 240.99-65.523 182.26-308.46 182.41-350.75 39.226 30.008 67.568 101.19 56.244 155.4z"/><circle cx="997.9" cy="577.84" r="61.132"/><path d="m511.4 1062.7 121.29 107.6-618.18-116.06 643.26-123.32z"/><path d="m1395.2 1058.5 76.962 48.963 575.88-58.031-552-101.55z"/><path d="m1083.2 1443.5-44.53 565.8-119.89-556.13 106.19-55.613z"/><path d="m1095.3 527.11-130.22-519.86-80.138 516.8 123.55-42.812z"/></svg>');
    width: 5vw;
    height: 6.67vw;
    margin: auto;
    background-size: 5vw;
    grid-column: 1 / 3;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .3;
}
#navig_footer > :first-child {
	grid-column: 1 / 3;
}
#main_nav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: .5vw;
  	grid-gap: .5vw;
}
#main_nav .navig {
	border-radius: .5vw;
}
#main_nav .preview_images {
	border-top-left-radius: .5vw;
	border-top-right-radius: .5vw;
}
/* #main_nav:has(> :last-child:nth-child(-n + 3)) :last-child {
	grid-column: 1 / 3;
} */
#main_nav:has(> :last-child:nth-child(-n + 4)) {
	grid-template-columns: 1fr 1fr;
}
#main_nav:has(> :last-child:nth-child(-n + 2)) {
	grid-template-columns: 1fr;
}
@media (max-width: 1024px) {
	#main_nav {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	#main_nav {
		grid-template-columns: 1fr;
	}
	#navig_footer {
		display: block;
	}
    .preview_images {
        height: 20vw;
    }    
}
@media (max-width: 520px) {
	#main_nav {
		grid-template-columns: 1fr;
	}
	#navig_footer {
		display: block;
	}
    .preview_images {
        height: 20vw;
    }    
}
@media (max-width: 420px) {
	#main_nav {
		grid-template-columns: 1fr;
	}
	#navig_footer {
		display: block;
	}
    .preview_images {
        height: 20vw;
    }    
}

@media (max-aspect-ratio:0.8) {
	#main_nav {
		min-height: 160vw;
	}

	#login > form {
		max-width: 45vw;
		min-height: 140vw;
		margin-top: 1vw;
	}
}

@media (max-aspect-ratio:0.8) and (min-aspect-ratio:0.66){
	#main_nav {
		min-height: 80vw;
	}
}

@media (max-height:840px) and (max-aspect-ratio:0.66){
	#main_nav {
		min-height: 150vw;
	}
}

@media (max-height:720px) and (max-aspect-ratio:0.66){
	#main_nav {
		min-height: 120vw;
	}
}