@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One|Roboto+Mono:400,700&display=swap');
 :root {
	 --color-primary: #18181a;
	 --color-secondary: #75757c;
	 --color-dark: #364c62;
	 --color-light: #f5f5f5;
	 --color-darkBG: #10162e;
	 --font-family-primary: 'Roboto Mono', monospace;
	 --font-family-secondary: 'Rubik Mono One', sans-serif;
	 --td: 150ms;
	 --te: cubic-bezier(0.215, 0.61, 0.355, 1);
}
 html, body {
	 height: 100%;
}


/* DarkModeSwitcher */

#switcher {
	--displacement: -0.1rem;
	--tremble: -10deg;
	--trembleF: 5deg;
	--iPos: 50%;
	--bPos: -75%;
	--fPos: -50%;
	--time: 430ms;
  }
  .dark-mode {
	background-color: rgba(251, 250, 250, 0.915);
	color: var(--color-dark);
  }
  .dark-mode-button {
	background: rgb(20, 16, 149);
	color: var(--color-dark);
  }
  /* body {
	display: grid;
	height: 100vh;
	margin: 0;
	background: #212121;
  } */
  .switch {
	margin: auto;
	background-color: rgb(184, 176, 255);
  }
  #ok {
	width: 50px;
	background-color: var(--color-darkBG);
	border-radius: 60%;
  }
  .switch__wrapper {
	position: fixed;
	/* background: red; */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 2rem;
	border: 2px solid rgba(194, 196, 205, 0);
	padding-top: 1rem;
	/* padding-left: 1rem; */
	border-radius: 99rem;
	transform-origin: left center;
	animation: checked__wrapper var(--time) ease-in forwards;
	mix-blend-mode: lighten;
  }
  .switch__wrapper::before, .switch__wrapper::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 50%;
	border: 1px solid #ffffff;
	border-radius: inherit;
	transform-origin: inherit;
	animation: inherit;
	mix-blend-mode: inherit;
  }
  .switch__wrapper::before {
	--tremble: -12deg;
	--trembleF: -7deg;
	border-color: rgb(26, 43, 104);
	animation-delay: 50ms;
  }
  .switch__wrapper::after {
	--tremble: -8deg;
	--trembleF: -4deg;
	border-color: rgb(107, 106, 106);
	animation-delay: 75ms;
  }
  .switch__toggle {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 99rem;
	box-shadow: inset 0 0 0 2px #45457b8a;
	transform-origin: inherit;
	animation: checked__toggle var(--time) ease-in forwards;
  }
  input:active + .switch__wrapper .switch__toggle {
	width: 1.6rem;
  }
  input:checked + .switch__wrapper {
	transform-origin: right center;
	animation-name: checked__wrapper--r;
  }
  input:checked + .switch__wrapper .switch__toggle {
	background: rgb(63, 67, 75);
	animation-name: checked__toggle--r;
  }
  @keyframes checked__wrapper {
	0%, 45%, 100% {
	  transform: rotateY(0deg);
	}
	48% {
	  transform: translateX(var(--displacement));
	  filter: blur(0);
	}
	55% {
	  transform: rotateZ(var(--tremble));
	  filter: blur(1px);
	}
	65% {
	  transform: rotateZ(var(--trembleF));
	}
  }
  @keyframes checked__wrapper--r {
	0%, 45%, 100% {
	  transform: rotateY(0deg);
	}
	48% {
	  transform: translateX(calc(-1 * var(--displacement)));
	  filter: blur(0);
	}
	55% {
	  transform: rotateZ(calc(-1 * var(--tremble)));
	  filter: blur(1px);
	}
	65% {
	  transform: rotateZ(calc(-1 * var(--trembleF)));
	}
  }
  @keyframes checked__toggle {
	0% {
	  background: #1e1c60;
	  transform: translateX(var(--iPos)) scale(1.25, 1);
	}
	45% {
	  background: #224875;
	  transform: translateX(var(--bPos)) scale(1, 1);
	}
	50% {
	  background: transparent;
	  transform: translateX(var(--bPos)) scale(0.5, 1.1);
	}
	65% {
	  transform: translateX(var(--bPos)) scale(1, 1);
	}
	100% {
	  transform: translateX(var(--fPos));
	}
  }
  @keyframes checked__toggle--r {
	0% {
	  background: transparent;
	  transform: translateX(calc(-1 * var(--iPos))) scale(1.25, 1);
	}
	45% {
	  background: transparent;
	  transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
	}
	50% {
	  background: #454f9c;
	  transform: translateX(calc(-1 * var(--bPos))) scale(0.5, 1.1);
	}
	65% {
	  transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
	}
	100% {
	  background: #122b4a;
	  transform: translateX(calc(-1 * var(--fPos)));
	}
  }
  





/* ENDOFDARKMODE */






:link{
color: #173e64;
}


 body {
	 color: var(--color-dark);
	 font-family: var(--font-family-primary);
	 overflow-x: hidden;
	 position: relative;
	 scrollbar-width: none;
	 background-color: #05070d;
	 /* scroll-behavior:smooth; */
}

#style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #050505;
}
/* SCROLL */
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /*  Firefox */
} 





h1 {
	 font-size: calc(1.5rem + 4vmin);
	 font-weight: 700;
	 margin-bottom: 2rem;
}
 p {
	 line-height: 1.4;
}
 a {
	 font-weight: 700;
}
 .page-container {
	 display: flex;
	 flex-direction: column;
	 min-height: 100vh;
	 justify-content: center;
	 margin: 0 auto;
	 max-width: 45rem;
	 padding: 1rem;
}
 .page-container > * + * {
	 margin-top: 1.5rem;
}
 .nav-main {
	 align-items: center;
	 display: flex;
	 height: 125%;
	 justify-content: center;
	 left: -100%;
	 top: -10%;
	 position: fixed;
	 transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2);
	 width: 100%;
}
 .nav-main::before, .nav-main::after {
	 content: '';
	 background-color: var(--color-primary);
	 height: 50%;
	 left: 0;
	 position: absolute;
	 transform: translateX(-110%);
	 transform-origin: 0 50%;
	 transition: transform calc(var(--td) * 2) var(--td) var(--te);
	 width: 100%;
	 z-index: -100;
}
 .nav-main::before {
	 top: 0;
}
 .nav-main::after {
	 bottom: 0;
}
 .nav-main .menu__item {
	 opacity: 0;
	 transform: translateX(-1rem);
	 transition: opacity var(--td) var(--te), transform var(--td) var(--te);
}
 [id="main-navigation-toggle"] {
	 opacity: 0;
	 position: fixed;
	 top: -100%;
}
 [id="main-navigation-toggle"] ~ label {
	 cursor: pointer;
	 position: fixed;
	 right: 1rem;
	 top: 1rem;
	 z-index: 100;
}
 [id="main-navigation-toggle"] ~ label span {
	 display: block;
	 height: 2rem;
	 padding: 0.5rem;
	 position: relative;
	 transition: transform calc(var(--td) * 3) var(--te);
	 width: 2rem;
}
 [id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after {
	 background-color: var(--color-dark);
	 bottom: 0;
	 content: '';
	 height: 4px;
	 left: 0;
	 margin: auto;
	 position: absolute;
	 right: 0;
	 transition: transform calc(var(--td) * 3) var(--te);
	 top: 0;
	 width: calc(100% - 1rem);
}
 [id="main-navigation-toggle"] ~ label span::before {
	 transform: rotate(0) translateY(-100%);
}
 [id="main-navigation-toggle"] ~ label span::after {
	 transform: rotate(0) translateY(100%);
}
 [id="main-navigation-toggle"]:checked ~ label span {
	 transform: rotate(1turn);
}
 [id="main-navigation-toggle"]:checked ~ label span::before {
	 transform: rotate(45deg);
}
 [id="main-navigation-toggle"]:checked ~ label span::after {
	 transform: rotate(-45deg);
}
 [id="main-navigation-toggle"]:checked ~ .nav-main {
	 left: 0;
	 transition: transform 0s;
}
 [id="main-navigation-toggle"]:checked ~ .nav-main::before, [id="main-navigation-toggle"]:checked ~ .nav-main::after {
	 transform: translateX(0);
	 transition-delay: 0s;
}
 [id="main-navigation-toggle"]:checked ~ .nav-main::after {
	 transition-delay: calc(var(--td) / 2);
}
 [id="main-navigation-toggle"]:checked ~ .nav-main .menu__item {
	 opacity: 1;
	 transform: translateX(0);
	 transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
}
 [id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(1) {
	 transition-delay: calc(var(--td) * 2 * (1 * 0.25));
	 z-index: -1;
}
 [id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(2) {
	 transition-delay: calc(var(--td) * 2 * (2 * 0.25));
	 z-index: -2;
}
 [id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(3) {
	 transition-delay: calc(var(--td) * 2 * (3 * 0.25));
	 z-index: -3;
}
 [id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(4) {
	 transition-delay: calc(var(--td) * 2 * (4 * 0.25));
	 z-index: -4;
}
 [id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(5) {
	 transition-delay: calc(var(--td) * 2 * (5 * 0.25));
	 z-index: -5;
}
 .menu {
	 position: relative;
	 text-align: center;
	 z-index: 1;
}
 .menu > .menu__item {
	 font-family: var(--font-family-secondary);
	 font-size: 10vmin;
}
 .submenu {
	 left: 0;
	 opacity: 0;
	 position: absolute;
	 transform: translateY(-10%);
	 top: 100%;
	 width: 100%;
	 visibility: hidden;
	 z-index: 2;
}
 .submenu .menu__item {
	 font-family: var(--font-family-primary);
	 font-size: 3.5vmin;
	 width: 100%;
}
 .submenu .menu__link {
	 color: var(--color-secondary);
	 text-shadow: 1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary);
}
 .submenu .menu__link::before, .submenu .menu__link::after {
	 display: none;
}
 .menu__item {
	 display: block;
	 position: relative;
}
 .menu__item:hover .menu__link::before, .menu__item:hover .menu__link::after {
	 animation: blink 1s var(--td) steps(1, end) forwards infinite;
	 transform: translateX(calc(100% - 0.5rem));
	 transition-duration: calc(var(--td) * 3);
}
 .menu__item:hover .menu__link::after {
	 transition-delay: calc(var(--td) / 2);
}
 .menu__item:hover .submenu {
	 opacity: 1;
	 transform: translateY(0);
	 transition: transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3);
	 visibility: visible;
}
 .menu__link {
	 color: var(--color-dark);
	 display: inline-block;
	 font-weight: normal;
	 overflow: hidden;
	 padding: 0.5rem 1rem 0.125rem;
	 position: relative;
	 text-decoration: none;
	 transition: color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te);
	 z-index: 1;
}
 .menu__link::before, .menu__link::after {
	 content: '';
	 background-color: var(--color-light);
	 height: 50%;
	 left: 0;
	 position: absolute;
	 transform: translateX(-110%);
	 transform-origin: 0 50%;
	 transition: transform 0s var(--te);
	 width: 100%;
	 z-index: -1;
}
 .menu__link::before {
	 top: 0;
}
 .menu__link::after {
	 bottom: 0;
}
 .menu:not(:focus-within):not(:hover) .menu__item .menu__link {
	 opacity: 1;
	 transform: translate(0, 0);
}
 .menu__item {
	 --pull: 30%;
}
 .menu__item .menu__link {
	 opacity: 0.25;
	 transition-duration: calc(var(--td) * 3);
	 transform: translate(0, calc(var(--pull) * -1));
}
 .menu__item .submenu .menu__link {
	 opacity: 1;
}
 .menu__item:hover > .menu__link {
	 color: var(--color-secondary);
	 opacity: 1;
	 transform: translate(0, 0);
}
 .menu__item:hover > .menu__link:hover {
	 color: var(--color-light);
	 transition-delay: 0s;
}
 .menu__item:hover ~ .menu__item > .menu__link {
	 transition-duration: calc(var(--td) * 3);
	 transform: translate(0, var(--pull));
}
 @keyframes blink {
	 50%, 100% {
		 opacity: 0;
	}
}