:root {
	--mainColor: #425d72;
	--darkColor: #214263;
	--darkColorTrans: rgba(33, 66, 99, 0.9);
	--darkColorTrans2: rgba(33, 66, 99, 0.5);

	--lightBlue: #3b7697;
	--lightBlue2: #639ebf;
	--lightAqua: #9cf;

	--gray: #808080;
	--white: #f0f0f0;
	--black: #000;
	--orange: #ff9d2d;
	--yellow: #ffdd66;

	--transShadow: rgba(0, 0, 0, 0.125);
	--transShadow2: rgba(0, 0, 0, 0.25);
	--transShadow3: rgba(0, 0, 0, 0.5);
	--transLight: rgba(255, 255, 255, 0.25);
}
@font-face {
	font-family: 'A';
	src: url(fr.ttf);
	font-weight: normal;
}
@font-face {
	font-family: 'A';
	src: url(fb.ttf);
	font-weight: bold;
}
*, ::after, ::before {
	outline: 0;
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-color: var(--black) var(--gray);
	scrollbar-width: thin;
	scroll-behavior: smooth;
	transition: all 0.125s;
	font-family: 'A', helvetica;
	font-size: inherit;
	word-spacing: 0.25rem;
	line-height: 1.25;
}
:active, :focus {
	outline: 0;
	-webkit-tap-highlight-color: transparent;
}
::selection {
	opacity: 1;
	background: var(--black) !important;
	color: var(--gray);
}
::placeholder {
	color: var(--white);
	opacity: 0.5;
}
::-webkit-scrollbar {
	width: 0.25rem;
	height: 0.25rem;
}
::-webkit-scrollbar-thumb { background: var(--black); }
::-webkit-scrollbar-track { background: var(--gray); }
html, body {
	width: 100%;
	height: 100%;
}
a {
	text-decoration: none;
	color: var(--white);
}
a:hover, a:active, a:focus { color: var(--orange); }
html { background: linear-gradient(to bottom, var(--lightBlue), var(--darkColor)) fixed; }
ol, ul { list-style: none; }
body {
	overscroll-behavior: none;
	text-align: left;
	font-size: 1rem;
	color: var(--white);
	text-shadow: 0 0.05rem 0.05rem var(--transShadow);
}

header {
	padding: 1rem;
	display: flex;
}
h1, .O {
	line-height: 0 !important;
	position: relative;
	font-size: 1.75rem;
	display: flex;
}
h1 > *, .O > * { align-self: center; }
h1 img, .O img {
	height: 3rem;
	filter: drop-shadow(0 0.05rem 0.05rem var(--transShadow));
	margin-right: 1rem;
}
.O:hover, .O:active, .O:focus { color: var(--white); }
#M input, #M label, nav {
	position: fixed;
	right: 0;
	top: 0;
}
#M.M > a {
	background: linear-gradient(to bottom, var(--black), var(--darkColorTrans2));
	display: flex !important;
	padding: 1rem;
	position: fixed;
	top: 0;
	left: -7rem;
	opacity: 0;
	animation: I 0.5s ease-out 0s normal forwards, J 7s ease-in-out 0s alternate infinite;
	border-bottom-right-radius: 2rem;
}
#M.M > a img {
	width: 3rem;
	height: 3rem;
}
h1, #M.M > a { z-index: 3; }
@keyframes I {
	to {
		left: 0;
		opacity: 1;
	}
}
@keyframes J { to { border-radius: 0; } }
@media screen and (max-width: 640px), (max-width: 960px) {
	#M label, #M label b { cursor: pointer; }
	#M input, #M label { display: none; }
	nav, #M ol {
		display: flex;
		flex-flow: row;
	}
	#M ol { align-self: center; }
	#M li:last-child { margin: 0 !important; }
	#M > a { display: none; }
	nav {
		justify-content: center;
		display: block;
		background: var(--darkColorTrans) linear-gradient(to bottom, var(--lightBlue2), transparent);
		width: 5%;
		height: 5vh;
		overflow: hidden;
		z-index: 1;
		display: none;
		animation: E 0.25s ease-in-out 0s normal 1 forwards, G 5s linear 2s alternate infinite;
		border-radius: 50%;
		box-shadow: 0;
	}
	nav, nav li { opacity: 0; }
	nav li { animation: F 0.25s ease-in-out 0.125s normal 1 forwards; }
	nav li:last-child { margin-bottom: 0; }
	nav li a {
		display: block;
		padding: 0.5rem 0 0.25rem 0;
		box-shadow: 0 0 0.5rem var(--transShadow);
	}
	nav li a:hover, nav li a:focus, nav li a:active, nav li a.A, nav li a.B {
		transform: scale(1.125);
		background: linear-gradient(to left, transparent, var(--transShadow2), transparent);
		box-shadow: 0 0 0.5rem var(--lightsTrans);
	}
	nav li a.A { background: linear-gradient(to left, transparent, var(--transLight), transparent); }
	nav li a.A, nav li a.B {
		color: var(--yellow);
		font-weight: bold;
	}
	nav li a::after {
		content: '';
		display: block;
		margin-top: 0.25rem;
		width: 50%;
		height: 0.15rem;
		position: relative;
		transform: rotate3d(0, 0, 1, 90deg);
		left: -25%;
		opacity: 0;
	}
	nav li a:hover::after, nav li a:focus::after, nav li a:active::after, nav li a.A::after {
		filter: drop-shadow(0 0.05rem 0.05rem var(--transShadow));
		background: linear-gradient(to right, var(--orange), transparent);
		transform: rotate3d(0, 0, 0, 0deg);
		left: 0;
		opacity: 1;
		transition: all 0.25s;
		animation: H 0.4s ease-in-out 0.125s alternate infinite;
	}
	@keyframes H {
		to {
			left: 50%;
			background: linear-gradient(to right, transparent, var(--orange));
		}
	}
	@keyframes G {
		to {
			background-color: var(--darkColor);
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
	@keyframes F { to { opacity: 1; } }
	@keyframes E {
		50% {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		75% { box-shadow: 0; }
		to {
			border-radius: 2rem;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			width: 66%;
			height: 100vh;
			opacity: 1;
			box-shadow: 0 0 5rem var(--darkColor);
		}
	}
	nav li a.A::after {
		background: linear-gradient(to right, var(--yellow), transparent);
		animation: N 0.4s ease-in-out 0.125s alternate infinite;
	}
	@keyframes N {
		to {
			left: 50%;
			background: linear-gradient(to right, transparent, var(--yellow));
		}
	}
	#M input, #M label { display: block; }
	#M input { visibility: hidden; }
	#M label {
		z-index: 2;
		padding: 1.675rem 1rem;
	}
	#M.M label {
		border-bottom-left-radius: 2rem;
		background: linear-gradient(to bottom, var(--black), var(--darkColorTrans2));
		animation: J 7s ease-in-out 0s alternate infinite;
	}
	#M label b {
		position: relative;
		display: block;
		width: 1.75rem;
		height: 0.375rem;
		border-radius: 0.25rem;
		background: var(--white);
		filter: drop-shadow(0 0.05rem 0.05rem var(--transShadow));
	}
	#M label b:first-child, #M label b:first-child + b, nav li { margin-bottom: 0.25rem; }
	#M input:checked + label { background: transparent !important; }

	#M input:checked + label b { background: var(--white); }

	#M label:hover b, 
	#M input:checked + label:hover b { background: var(--yellow); }

	#M label:active b, #M label:focus b,
	#M input:checked + label:active b, #M input:checked + label:focus b { background: var(--orange); }

	#M input:checked + label b:first-child {
		transform: rotate(45deg);
		top: 0.625rem;
	}
	#M input:checked + label b:first-child + b { opacity: 0; }
	#M input:checked + label b:last-child {
		top: -0.625rem;
		transform: rotate(-45deg);
	}
	#M input:checked + label + nav { display: block; }
	#M ol {
		flex-flow: column;
		height: 100%;
		justify-content: center;
		text-align: center;
	}
	#M li { margin-right: 0; }
}

@media screen and (max-width: 640px){
	#M > a { display: none; }
	@keyframes G { to { background-color: var(--darkColor); } }
	@keyframes E {
		50% { border-top-right-radius: 0; }
		to {
			width: 100%;
			height: 100vh;
			border-radius: 0;
			opacity: 1;
		}
	}
}

@media screen and (min-width: 961px){
	#M > input, #M label { display: none; }
	#M > a { display: none !important; }

	#M.M nav ol {
		background: linear-gradient(to bottom, var(--black), var(--darkColorTrans2));
		border-bottom-left-radius: 2rem;

	}
	#M.M nav a.A { color: var(--yellow); }
	#M.M nav a.A::after { background: var(--yellow); }

	#M nav ol {
		padding: 1rem 0.25rem;
		display: flex;
		height: 5rem;
		overflow: hidden;
		justify-content: flex-end;
		animation: J 7s ease-in-out 0s alternate infinite;
	}
	#M nav li {
		align-self: center;
		font-weight: bold;
	}
	#M nav a {
		display: inline-block;
		padding: 0 0.75rem;
		position: relative;
	}
	#M nav a.A {
		color: var(--yellow);
		top: 0.15rem;
	}
	#M nav a.A::after {
		content: '';
		display: block;
		height: 0.15rem;
		margin-top: 0.15rem;
		background: var(--yellow);
	}
}

.L, .R {
	display: block;
	overflow: hidden;
	position: absolute;
	height: 75vh;
	background-image: linear-gradient(0deg, transparent 50%, var(--lightAqua) 50%);
	background-size: 0.75rem 0.75rem;
	opacity: 0.3;
}

@media screen and (min-width: 961px){
	.L, .R {
		opacity: 0.35;
		background-size: 0.9rem 0.9rem;
	}
}
@media screen and (max-width: 640px){
	.L, .R {
		opacity: 0.25;
		background-size: 0.6rem 0.6rem;
	}
}

.L:nth-child(even) { width: 0.075rem; }
.L:nth-child(odd) { width: 0.125rem; }
.R:nth-child(even) { width: 0.1rem; }
.R:nth-child(odd) { width: 0.15rem; }

.L {
	left: 0;
	top: -75vh;
}
.L:nth-child(1) { left: 4vw; animation: K 1s linear 0.1s alternate infinite; }
.L:nth-child(2) { left: 8vw; animation: M 1.5s linear 0s alternate infinite; }
.L:nth-child(3) { left: 12vw; animation: K 1s linear 0.4s alternate infinite; }
.L:nth-child(4) { left: 16vw; animation: M 1.5s linear 0.05s alternate infinite; }
.L:nth-child(5) { left: 20vw; animation: K 1s linear 0.7s alternate infinite; }
.L:nth-child(6) { left: 24vw; animation: M 1.5s linear 0.1s alternate infinite; }
.L:nth-child(7) { left: 28vw; animation: K 1s linear 1s alternate infinite; }
.L:nth-child(8) { left: 32vw; animation: M 1.5s linear 0.15s alternate infinite; }
.L:nth-child(9) { left: 36vw; animation: K 1s linear 1.3s alternate infinite; }
.L:nth-child(10) { left: 40vw; animation: M 1.5s linear 0.2s alternate infinite; }
.L:nth-child(11) { left: 44vw; animation: K 1s linear 1.6s alternate infinite; }
.L:nth-child(12) { left: 48vw; animation: M 1.5s linear 0.25s alternate infinite; }
.L:nth-child(13) { left: 52vw; animation: K 1s linear 1.9s alternate infinite; }
.L:nth-child(14) { left: 56vw; animation: M 1.5s linear 0.3s alternate infinite; }
.L:nth-child(15) { left: 60vw; animation: K 1s linear 2.2s alternate infinite; }
.L:nth-child(16) { left: 64vw; animation: M 1.5s linear 0.35s alternate infinite; }
.L:nth-child(17) { left: 68vw; animation: K 1s linear 2.5s alternate infinite; }
.L:nth-child(18) { left: 72vw; animation: M 1.5s linear 0.4s alternate infinite; }
.L:nth-child(19) { left: 76vw; animation: K 1s linear 2.8s alternate infinite; }
.L:nth-child(20) { left: 80vw; animation: M 1.5s linear 0.45s alternate infinite; }
.L:nth-child(21) { left: 84vw; animation: K 1s linear 3.1s alternate infinite; }
.L:nth-child(22) { left: 88vw; animation: M 1.5s linear 0.5s alternate infinite; }
.L:nth-child(23) { left: 92vw; animation: K 1s linear 3.4s alternate infinite; }
.L:nth-child(24) { left: 96vw; animation: M 1.5s linear 0.55s alternate infinite; }

@media screen and (max-width: 640px){
	.L:nth-child(1), /*.L:nth-child(3), */.L:nth-child(5), /*.L:nth-child(7),*/
	.L:nth-child(9), /*.L:nth-child(11), */.L:nth-child(13), /*.L:nth-child(15),*/
	.L:nth-child(17), /*.L:nth-child(19), */.L:nth-child(21), /*L:nth-child(23)*/
	/*.L:nth-child(2), */.L:nth-child(4), /*.L:nth-child(6), */.L:nth-child(8),
	/*.L:nth-child(10), */.L:nth-child(12), /*.L:nth-child(14), */.L:nth-child(16),
	/*.L:nth-child(18), */.L:nth-child(20), /*.L:nth-child(22), */.L:nth-child(24){
		display: none;
	}
}

.R {
	top: -75vh;
	right: 0;
}
.R:nth-child(25) { right: 2vw; animation: M 1.5s linear 0.1s alternate infinite; }
.R:nth-child(26) { right: 6vw; animation: L 1.75s linear 0s alternate infinite; }
.R:nth-child(27) { right: 10vw; animation: M 1.5s linear 0.4s alternate infinite; }
.R:nth-child(28) { right: 14vw; animation: L 1.75s linear 0.1s alternate infinite; }
.R:nth-child(29) { right: 18vw; animation: M 1.5s linear 0.7s alternate infinite; }
.R:nth-child(30) { right: 22vw; animation: L 1.75s linear 0.2s alternate infinite; }
.R:nth-child(31) { right: 26vw; animation: M 1.5s linear 1s alternate infinite; }
.R:nth-child(32) { right: 30vw; animation: L 1.75s linear 0.3s alternate infinite; }
.R:nth-child(33) { right: 34vw; animation: M 1.5s linear 1.3s alternate infinite; }
.R:nth-child(34) { right: 38vw; animation: L 1.75s linear 0.4s alternate infinite; }
.R:nth-child(35) { right: 42vw; animation: M 1.5s linear 1.6s alternate infinite; }
.R:nth-child(36) { right: 46vw; animation: L 1.75s linear 0.5s alternate infinite; }
.R:nth-child(37) { right: 50vw; animation: M 1.5s linear 1.9s alternate infinite; }
.R:nth-child(38) { right: 54vw; animation: L 1.75s linear 0.6s alternate infinite; }
.R:nth-child(39) { right: 58vw; animation: M 1.5s linear 2.2s alternate infinite; }
.R:nth-child(40) { right: 62vw; animation: L 1.75s linear 0.7s alternate infinite; }
.R:nth-child(41) { right: 66vw; animation: M 1.5s linear 2.5s alternate infinite; }
.R:nth-child(42) { right: 70vw; animation: L 1.75s linear 0.8s alternate infinite; }
.R:nth-child(43) { right: 74vw; animation: M 1.5s linear 2.8s alternate infinite; }
.R:nth-child(44) { right: 78vw; animation: L 1.75s linear 0.9s alternate infinite; }
.R:nth-child(45) { right: 82vw; animation: M 1.5s linear 3.1s alternate infinite; }
.R:nth-child(46) { right: 86vw; animation: L 1.75s linear 1s alternate infinite; }
.R:nth-child(47) { right: 90vw; animation: M 1.5s linear 3.4s alternate infinite; }
.R:nth-child(48) { right: 94vw; animation: L 1.75s linear 1.1s alternate infinite; }
.R:nth-child(49) { right: 98vw; animation: M 1.5s linear 3.7s alternate infinite; }

@media screen and (max-width: 640px){
	.R:nth-child(25), /*.R:nth-child(27), */.R:nth-child(29), /*.R:nth-child(31),*/
	.R:nth-child(33), /*.R:nth-child(35), */.R:nth-child(37), /*.R:nth-child(39),*/
	.R:nth-child(41), /*.R:nth-child(43), */.R:nth-child(45), /*L:nth-child(47)*/
	.R:nth-child(49),
	/*.R:nth-child(26), */.R:nth-child(28), /*.R:nth-child(30), */.R:nth-child(32),
	/*.R:nth-child(34), */.R:nth-child(36), /*.R:nth-child(38), */.R:nth-child(40),
	/*.R:nth-child(42), */.R:nth-child(44), /*.R:nth-child(46), */.R:nth-child(48){
		display: none;
	}
}

@keyframes K {
	66% { height: 25vh; }
	to {
		top: 100vh;
		opacity: 0;
	}
}
@keyframes L {
	to {
		top: 125vh;
		opacity: 0;
	}
}
@keyframes M {
	66% { height: 100vh; }
	to {
		top: 150vh;
		opacity: 0;
	}
}