:root{
	color-scheme:light;
}
HTML, 
BODY{
	margin:0;
	min-height:100vh;
}

BODY{
	font-size:20px;
	color:var(--default-text-color,#011C26);
	background-color:var(--default-background-color,#FFFFFF);
	font-family:system-ui,sans-serif;
	font-weight:normal;
	font-weight:400;
	text-shadow:0px 1px 1px rgba(0,0,0,0.02);
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;		
}
@media (max-width:750px) and (min-width:0px){BODY{font-size:18px;}}
@media (max-width:1100px) and (min-width:751px){BODY{font-size:19px;}}	

A{
	text-decoration:underline;
	outline:none;
	border:0;
	-webkit-appearance:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);	
	transition:all 300ms ease;
}
A:link, A:active, A:visited{color:#0157D0;}
A:hover{color:#0045A6;}


.composition{
	box-sizing:border-box;
	position:relative;
}
.composition.clip{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	overflow:hidden;
}

.main-navigation{
	box-sizing:border-box;
	position:fixed;
	top:30px;
	right:50px;
	right: max(50px,calc( ( 100vw - 1600px ) / 2 + 50px ) );
	width:50px;
	height:50px;
	border:2px solid var(--menu-color-border,#011C26);
	z-index:100002;
	border-radius:30px;
	cursor:pointer;
	transition:border-color 300ms ease,box-shadow 300ms ease;
	overflow:hidden;
	background-color:var(--menu-color-background,transparent);
	backdrop-filter:blur(4px);
	outline:none;
	-webkit-appearance:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);		
}
@media (min-width:0px) and (max-width:600px){.main-navigation{right:23px;}}

.main-navigation::before,
.main-navigation::after{
	content:'';
	position:absolute;
	left:0;
	width:24px;
	height:3px;
	background-color:var(--menu-color-border,#011C26);
	transition:all 300ms ease;
	transform-origin:center;
}
.main-navigation::before{transform:translate(11px,18px);}
.main-navigation::after{transform:translate(11px,26px);}

.main-navigation:active,
.main-navigation.displayed{
	border-color:var(--menu-color-border-hover,#73B8BF);
	box-shadow:0 0 40px 0 var(--menu-color-border-hover,#73B8BF);
}
.main-navigation:active::before,
.main-navigation:active::after,
.main-navigation.displayed::before,
.main-navigation.displayed::after{
	background-color:var(--menu-color-border-hover,#73B8BF);
}
@media (hover:hover){
	.main-navigation:hover{
		border-color:var(--menu-color-border-hover,#73B8BF);
		box-shadow:0 0 40px 0 var(--menu-color-border-hover,#73B8BF);
	}
	.main-navigation:hover::before,
	.main-navigation:hover::after{
		background-color:var(--menu-color-border-hover,#73B8BF);
	}
}

.main-navigation.displayed::before{transform:translate(11px,21px) rotate(45deg);}
.main-navigation.displayed::after{transform:translate(11px,21px) rotate(-45deg);}

.main-navigation-container{
	box-sizing:border-box;
	position:fixed;
	top:0;
	right:auto;
	bottom:0;
	left:-100%;
	width:60%;
	z-index:100001;
	overflow:hidden;
	transition:all 300ms ease;
}
.main-navigation-container.displayed{
	right:0;
	left:auto;
}
@media (min-width:0px) and (max-width:600px){
	.main-navigation-container{width:90%;}
}
.main-navigation-container>DIV{
	box-sizing:border-box;
	width:200%;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	justify-items:stretch;
	gap:0;
	min-height:100%;
	transition:all 300ms ease;
	transform:translate(20%,0);
	background-color:var(--menu-color-panel-background,#011C26);	
}
.main-navigation-container.displayed>DIV{transform:translate(0,0);}
.main-navigation-container.next>DIV{transform:translate(-50%,0);}
.main-navigation-container>DIV>DIV{
	box-sizing:border-box;
	min-height:100%;
	padding:80px 40px 40px 40px;
}
.main-navigation-container A{
	position:relative;
	display:flex;
	align-self:stretch;
	gap:0 10px;
	padding:20px 0;
	margin:0 0 1px 0;
	text-decoration:none;
	color:var(--menu-link-color,#FFFFFF);
	border-radius:0;
}
.main-navigation-container A::before{
	content:'';
	position:absolute;
	bottom:0;left:0;right:0;
	width:30px;
	height:5px;
	border-radius:6px 0;
	background-color:var(--menu-link-border-color,#FFFFFF);
	transition:all 300ms ease;
}
.main-navigation-container A:hover{
	color:var(--menu-link-color-hover,#011C26);
	background-color:var(--menu-link-hover-background,#FFFFFF);
	box-shadow:-10px 0 0 0 var(--menu-link-hover-background,#FFFFFF);
}
.main-navigation-container A:hover::before{transform:translate(-10px,0px);}
.main-navigation-container A.next::after,
.main-navigation-container A.previous::after{
	content:'';
	width:30px;
	background-color:var(--menu-link-color,#FFFFFF);
}
.main-navigation-container A.next:hover::after,
.main-navigation-container A.previous:hover::after{
	background-color:var(--menu-link-color-hover,#011C26);
}
.main-navigation-container A.next::after{clip-path:polygon(30% 20%,50% 20%,70% 50%,50% 80%,30% 80%,50% 50%);}
.main-navigation-container A.previous::after{
	order:-1;
	clip-path:polygon(70% 20%,50% 20%,30% 50%,50% 80%,70% 80%,50% 50%);	
}