:root {
	--global-nav-height: 53px;
	--global-nav-icon-width: calc(var(--global-nav-height) - 26px);
	--global-nav-bg-color-1: rgba(0,0,0,1);
	--global-nav-bg-color-2: rgba(0,0,0,0.7);
	--global-nav-fg-color: rgba(255,255,255,1);
	--global-nav-blur: 15px;
	--global-nav-saturate: 1;
	--global-nav-hamburger-width: 35px;
	--global-nav-hamburger-delay: 0.2s;
	--article-nav-height: 39px;
	--article-nav-margin: 10px;
	--article-grid-view-gap: 4px;
}

html, body, ul {
	margin: 0px;
	padding: 0px;
}

html {
	font-family: sans-serif, Verdana, Geneva, Tahoma;
	overflow-x: hidden;
}

a {
	color: var(--global-nav-fg-color);
	text-decoration: none;
}

.stretcher {
	width: 100%;
	height: var(--global-nav-height);
	background-color: var(--global-nav-bg-color-1);
}

ul, ul li {
	list-style-type: none;
}

nav.full-view, div.stretcher.full-view {
	display: none;
}

ul.global-nav {
	width: 100%;
	height: var(--global-nav-height);
	/* position: fixed; */
	top: 0px;
	z-index: 100;
	background-color: var(--global-nav-bg-color-1);
	display: flex;
	justify-content: space-between;
	color: var(--global-nav-fg-color);
}

ul.global-nav li {
	display: block;
	display: flex;
	justify-content: center;
	align-items: center;
	/* color: #fff4b3; */
	/* color: #a5d7eb; */
}

ul.global-nav img.logo {
	width: var(--global-nav-icon-width);
	margin-right: 10px;
	/* filter: invert(100%); */
}

ul.global-nav img.logo.alone {
	margin: auto !important;
}

ul.global-nav li:first-child, ul.global-nav li:last-child {
	width: var(--global-nav-height);
}

.nav-hamburger {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: var(--global-nav-hamburger-width);
	height: var(--global-nav-hamburger-width);
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	background: none;
}
  
.nav-hamburger:focus {
	outline: none;
}

.nav-hamburger span {
	display: block;
	position: absolute;
	top: calc(var(--global-nav-hamburger-width) * 0.45833333);
	left: calc(var(--global-nav-hamburger-width) * 0.1875);
	right: calc(var(--global-nav-hamburger-width) * 0.1875);
	height: calc(var(--global-nav-hamburger-width) * 0.08);
	background: var(--global-nav-fg-color);
}
  
.nav-hamburger span::before,
.nav-hamburger span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: calc(var(--global-nav-hamburger-width) * 0.08);
	background-color: var(--global-nav-fg-color);
	content: "";
}
  
.nav-hamburger span::before {
	top: calc((-1) * var(--global-nav-hamburger-width) * 0.2083333333);
}
  
.nav-hamburger span::after {
	bottom: calc((-1) * var(--global-nav-hamburger-width) * 0.2083333333);
}
  
.nav-hamburger-x span::before,
.nav-hamburger-x span::after {
	transition-duration: var(--global-nav-hamburger-delay), var(--global-nav-hamburger-delay);
	transition-delay: var(--global-nav-hamburger-delay), 0s;
  }
  
.nav-hamburger-x span::before {
	transition-property: top, transform;
}
  
.nav-hamburger-x span::after {
	transition-property: bottom, transform;
}
  
.nav-hamburger-x.is-active span {
	background: none;
}
  
.nav-hamburger-x.is-active span::before {
	top: 0;
	transform: rotate(45deg);
}
  
.nav-hamburger-x.is-active span::after {
	bottom: 0;
	transform: rotate(-45deg);
}
  
.nav-hamburger-x.is-active span::before,
.nav-hamburger-x.is-active span::after {
	transition-delay: 0s, var(--global-nav-hamburger-delay);
}

div.nav-container {
	position: fixed;
	top: var(--global-nav-height);
	z-index: 90;
	background-color: var(--global-nav-bg-color-1);
	color: var(--global-nav-fg-color);
	overflow-y: auto;
}

ul.global-nav.nav-open {
	border-bottom: 2px solid green;
	border-image: linear-gradient(to right, #0b4506 10%, #957f00 50%, #00aaed 90%) 1;
}

ul.article-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 10px;
}

ul.article-nav li {
	margin: var(--article-nav-margin) 0px;
	text-indent: 20%;
	font-size: 12px;
	white-space: nowrap;
}

ul.article-nav li.an-main {
	font-size: 15px;
	font-weight: bold;
	text-indent: unset;
	text-align: center;
}

ul.article-nav li.an-main {
	grid-column: span 2;
}

@supports (
	(-webkit-backdrop-filter: saturate() blur()) or
	(backdrop-filter: saturate() blur())
	) {
		ul.global-nav {
			background-color: var(--global-nav-bg-color-2);
			backdrop-filter: saturate(var(--global-nav-saturate)) blur(var(--global-nav-blur));
			-webkit-backdrop-filter: saturate(var(--global-nav-saturate)) blur(var(--global-nav-blur));
		}
	}
	
@media (min-width: 767px) {
	ul.article-nav li {
		font-size: 18px;
		margin: var(--article-nav-margin) 0px;
	}

	ul.article-nav li.an-main {
		font-size: 22px;
	}
}

@media (min-width: 1023px) {
	html, body {
		overflow-y: unset !important;
	}

	ul.article-nav {
		grid-template-columns: repeat(3, 1fr);
	}

	ul.article-nav li.an-main {
		grid-column: span 3;
	}
}