/*
$chart-dkBlue: 	#073B4C;
$chart-yellow: 	#ffd166;
$chart-green: 	#06D6A0;
$chart-red: 	#EF476F;
$chart-blue: 	#118AB2;
*/
nav {
  position: fixed;
  z-index: 200000;
  display: flex;
  bottom: -19px;
  right: calc(1vw + 30px); }
  nav .navLine {
    position: absolute;
    top: calc(50% - 2px);
    width: 150vw;
    height: 5px;
    background-color: #fff;
    right: -20vw;
    pointer-events: none;
    z-index: -1;
    box-shadow: 0 -1px 60px rgba(34, 34, 85, 0.4); }
  @media only screen and (max-width: 599.9px) {
    nav {
      bottom: -42px;
      left: 8vw;
      right: unset; } }
  @media only screen and (max-width: 599.9px) and (min-height: 600px) {
    nav {
      bottom: -32px; } }
  @media only screen and (max-width: 599.9px) {
      nav .navLine {
        height: 15px; } }
    @media only screen and (max-width: 599.9px) and (min-height: 600px) {
      nav .navLine {
        bottom: -10px; } }
  @media only screen and (min-width: 600px) and (max-width: 919.9px) {
    nav {
      bottom: -30px;
      right: calc(65px + 40vw); } }
  @media only screen and (min-width: 600px) and (max-width: 919.9px) and (max-width: 767.9px) {
    nav {
      right: calc(65px + 38vw); } }
  @media only screen and (min-width: 600px) and (max-width: 919.9px) {
      nav .navLine {
        display: none;
        right: -39.75vw;
        top: 0;
        height: 14px;
        background-color: #222; }
      nav .navPos .navLine.navLineMobile {
        display: block;
        transform: rotate(0deg) translateY(-7px) skewX(0deg);
        right: 0;
        width: 150vw;
        right: -250px; } }
  @media (min-width: 1300px) {
    nav {
      right: 8%; } }
  @media (min-width: 1800px) {
    nav {
      right: calc(50% - 730px); }
      nav .navLine {
        width: 200vw;
        right: -50vw; } }
  @media only screen and (orientation: landscape) and (min-height: 700px) {
    nav {
      bottom: calc(-25px + 1vh); } }
  @media only screen and (orientation: landscape) and (min-height: 850px) {
    nav {
      bottom: calc(-19px + 1vh); } }
  @media only screen and (min-width: 920px) and (max-width: 1023.99px) {
    nav {
      right: 0.65%; } }
  nav .navPos {
    display: flex;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 130px;
    position: relative; }
    @media (min-width: 600px) and (max-width: 919.9px) {
      nav .navPos {
        left: 40%;
        position: absolute;
        bottom: 0; } }
  @media only screen and (max-width: 374.9px) {
    nav {
      left: 10.5%; } }
  nav a.no-click {
    pointer-events: none !important; }
    nav a.no-click .subStop, nav a.no-click div, nav a.no-click span, nav a.no-click * {
      pointer-events: none !important; }
  nav a {
    font-weight: 600;
    color: #222;
    padding: 10px;
    margin: 10px 10px 10px 5px;
    background-color: #fff;
    border-radius: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    text-align: center;
    cursor: pointer;
    /*

		  	@media screen and (orientation: landscape) and (max-height:500px){
		  		//bottom: -33px;
			  	bottom: -55px;
			  	right: calc(65px + 44vw);
			    //bottom: -60px;
			  	//right: calc(65px + 40vw);

			    left: unset;

		    	.navPos {
				    left: 40%;
				    position: absolute;
				    bottom:3px;

				    a {
					    padding: 3px 3vw 3px 20px;
					    margin: 0 -9.5vw -2.1vh 0;
					    border-radius: 0px;
					    height: 22px;
					    transform: rotate(-55deg) translateY(calc(10.5vw - 130px)) skewX(0deg);
					    width: 10.5vw;
					    
					    span {
						    transform: skewX(0deg) translateX(2px);
						}
				    }
				

			  		.navLine.navLineMobile {
					    //left: -100vw;
					    //top: calc(15px - 5vh);
					    left: -80vw;
		    			//top: calc(30px - 14.5vh);
		    			top: -21px;
					}
				}
			}
		*/ }
    @media only screen and (min-width: 920px) {
      nav a {
        padding: 0px 6px 0px 6px;
        height: 2em;
        min-width: 2em;
        box-sizing: border-box;
        border: solid 2px #fff;
        line-height: 17px;
        font-weight: 600;
        box-shadow: 0 0 10px rgba(34, 34, 85, 0.25);
        background-color: #fff !important; } }
    @media screen and (orientation: landscape) and (max-height: 500px) {
      nav a {
        transform: rotate(-55deg) translateY(calc(10.5vw - 100px)) skewX(0deg); } }
    @media only screen and (min-width: 920px) {
      nav a.show {
        border: solid 2px #222; } }
    nav a.show.level-G {
      transform: translateX(-47px) translateY(-290px); }
    nav a.show.level-1 {
      transform: translateX(53px) translateY(-318px); }
    nav a.show.level-2 {
      transform: translateX(38px) translateY(-130px); }
    nav a.show.level-3 {
      transform: translateX(37px) translateY(-295px); }
    nav a.show.level-4 {
      transform: translateX(45px) translateY(-193px); }
    nav a.show.level-5 {
      transform: translateX(83px) translateY(-329px); }
    @media only screen and (min-width: 920px) {
      nav a {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4px solid #fff;
        transition: height 0.33s cubic-bezier(0.19, -0.33, 1, 1), border-style 0.66s, border-width 0.66s, border-radius 0.33s cubic-bezier(0.19, -0.33, 1, 1); }
        nav a.selected.level-G {
          height: 48px;
          border-radius: 50%;
          border-width: 4px;
          border-style: solid;
          border-color: #044dff; }
        nav a.selected.level-1 {
          height: 51.23px;
          border-radius: 50%;
          border-width: 4px;
          border-style: solid; }
        nav a.level-2 {
          padding: 0px 3px; }
        nav a.selected.level-2 {
          height: 82.27px;
          border-radius: 50%;
          border-width: 4px;
          border-style: solid; }
        nav a.selected.level-3 {
          height: 61.42px;
          border-radius: 50%;
          border-width: 4px;
          border-style: solid; }
        nav a.selected.level-4 {
          height: 40px;
          border-width: 4px;
          border-style: solid; }
        nav a.selected.level-5 {
          border-radius: 50%;
          height: 56.39px;
          border-width: 4px;
          border-style: solid; } }
    @media only screen and (max-width: 919.99px) {
      nav a .subStop {
        transition: border-color 0.5s, background-color 0.5s; }
      nav a:not(.selected) .subStop {
        border-color: #fff;
        background-color: rgba(255, 255, 255, 0); }
      nav a.selected.level-G .subStop {
        border-color: #044dff;
        background-color: #fff; }
      nav a.selected.level-1 .subStop {
        border-color: #222255;
        background-color: #fff; }
      nav a.selected.level-2 .subStop {
        border-color: #ffd400;
        background-color: #fff; }
      nav a.selected.level-3 .subStop {
        border-color: #d400ff;
        background-color: #fff; }
      nav a.selected.level-4 .subStop {
        border-color: #77ff33;
        background-color: #fff; }
      nav a.selected.level-5 .subStop {
        border-color: #7733ff;
        background-color: #fff; } }
    nav a span {
      width: 100%; }
    nav a .leftFix {
      display: none; }
    @media only screen and (max-width: 919.9px) {
      nav a {
        padding: 3px 8vw 3px 50px;
        margin: 0 -12.5vw -2.1vh -40px;
        border-radius: 0px;
        height: 22px;
        transform: rotate(-45deg) translateY(-11vw) skewX(0deg);
        width: 15.5vw;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        tap-highlight-color: rgba(0, 0, 0, 0);
        /*.leftFix {
				display:block;
			    position: absolute;
			    left: -40px;
			    width: 41px;
			    height: 100%;
			    background-color: #fff;
			    top: 0;
			}*/ }
        nav a:active {
          background-color: rgba(255, 255, 255, 0.75) !important; }
        nav a span {
          transform: skewX(0deg) translateX(10px); } }
    @media only screen and (max-width: 919.9px) and (min-width: 600px) {
      nav a span {
        transform: skewX(0deg) translateX(calc(-10px + 2.5vw)); } }
    @media only screen and (max-width: 919.9px) {
        nav a .subStop {
          height: 40px;
          width: 40px;
          position: absolute;
          background: transparent;
          right: -26px;
          top: -8px;
          border-radius: 50%;
          border: 15px solid #fff;
          box-sizing: border-box; } }
    @media only screen and (max-width: 919.9px) and (max-width: 599.9px), only screen and (max-width: 919.9px) and (max-height: 450px) {
      nav a .subStop {
        height: 30px;
        width: 30px;
        right: -22px;
        top: 0;
        border: 10px solid #fff; } }
    @media only screen and (min-width: 600px) and (max-width: 919.9px) {
      nav a {
        padding: 3px 3vw 3px 20px;
        margin: 0 -9.5vw -2.1vh 0;
        border-radius: 0px;
        height: 22px;
        transform: rotate(-55deg) translateY(calc(10.5vw - 110px)) skewX(0deg);
        width: 10.5vw;
        box-shadow: 0 0 10px rgba(34, 34, 85, 0.25); } }
    @media only screen and (max-height: 450px) and (max-width: 919.9px) {
      nav a {
        box-shadow: unset; } }
    @media only screen and (max-width: 599.9px) {
      nav a {
        width: 19.5vw;
        margin: 0 -16.5vw 0 -40px;
        transform: rotate(-50deg) translateY(-8.5vw) translateX(1.5vw) skewX(0deg); } }
  @media only screen and (max-width: 599.9px) and (min-height: 600px) {
    nav a {
      width: 24.5vw;
      margin: 0 -22.5vw 0 -40px; } }
    @media only screen and (max-width: 374.9px) {
      nav a {
        margin: 1vh -17.66vw 1vh -37.6px;
        transform: rotate(-55deg) translateY(-11vw); }
        nav a span {
          transform: translateX(-10%) translateX(1px); } }
  nav .selected-item {
    font-size: 2em;
    line-height: 0.5em;
    color: #f0f; }
  @media screen and (orientation: landscape) and (max-height: 500px) {
    nav {
      bottom: calc(-5.6vh + 6px);
      right: calc(50vw + 28px);
      left: unset; }
      nav .navPos {
        left: 40%;
        position: absolute;
        bottom: 0; }
        nav .navPos a {
          /*
			    padding: 3px 3vw 3px 20px;
			    margin: 0 -9.5vw -2.1vh 0;
			    border-radius: 0px;
			    height: 22px;
			    transform: rotate(-55deg) translateY(calc(10.5vw - 110px)) skewX(0deg);
			    width: 11.5vw;
			    */
          padding: 3px 3vw 3px 20px;
          margin: 0 -18vw -2.1vh 0;
          border-radius: 0px;
          height: 22px;
          transform: rotate(-55deg) translateY(calc(10.5vw - 135px)) skewX(0deg) translateX(-33px);
          width: 20vw; }
        nav .navPos .navLine.navLineMobile {
          left: -80vw;
          top: calc(30px - 14.5vh); } }
  @media screen and (orientation: landscape) and (min-height: 500.01px), screen and (orientation: portrait) and (min-width: 600px) {
    nav:not(.open) a:active {
      background-color: #F9F9F9 !important; } }
  @media screen and (orientation: landscape) and (max-height: 500px), screen and (orientation: portrait) and (max-width: 599.9px) {
    nav:not(.open) {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0); }
      nav:not(.open) a:active {
        background-color: rgba(255, 255, 255, 0) !important; }
        nav:not(.open) a:active .subStop {
          opacity: 0.75; } }
  @media screen and (orientation: landscape) and (max-height: 500px) {
    nav:not(.open) {
      bottom: -60px; } }

.zLine {
  width: 5px;
  background-color: inherit;
  height: 2500px;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: rotateX(120deg);
  transform-origin: 0% 10%;
  backface-visibility: visible; }

.stuck {
  position: fixed;
  top: 0; }

.waypoint-content {
  position: absolute;
  background-color: #f0f;
  height: 25px;
  width: 25px;
  z-index: 100000; }

.moon {
  transform-origin: 50% 50%;
  transform-box: fill-box; }

.moon0 {
  fill: url(#sphere_1_); }

.moon1 {
  fill: url(#dark_1_);
  stroke: url(#dark_1_);
  stroke-width: 1px; }

.moon2 {
  fill: url(#light_1_);
  stroke: url(#light_1_);
  stroke-width: 1px; }

.moon3 {
  fill: url(#glow_2_); }

#content section#fourth svg#moon {
  transform-origin: 50% 0%;
  width: 100vw;
  bottom: 25vh; }
  @media only screen and (min-width: 1500px) {
    #content section#fourth svg#moon {
      max-width: 80vw;
      margin-left: 10vw;
      margin-right: 10vw; } }
  @media (orientation: portrait) and (max-width: 1024px) {
    #content section#fourth svg#moon {
      top: calc(-100vh - 50vw);
      transform: translateY(calc(85vh - 580px));
      transform-origin: 50% 100%;
      bottom: unset;
      height: 100vw; } }

.welcomeContainer {
  width: 80%;
  position: absolute;
  bottom: 92vh;
  height: 0;
  z-index: 500000;
  /* max-width: 1500px; */
  margin-left: 10%;
  margin-top: 0; }
  @media screen and (orientation: landscape) and (max-height: 500px), screen and (orientation: portrait) and (max-width: 599.9px) {
    .welcomeContainer {
      width: 90%;
      margin-left: 5%;
      bottom: 94vh; } }
  @media screen and (orientation: landscape) and (max-height: 500px) {
    .welcomeContainer {
      bottom: 95vh; } }
  .welcomeContainer .typeFix {
    width: 66.67%;
    max-width: 700px;
    margin: auto;
    position: relative; }
    @media screen and (orientation: portrait) and (max-width: 599.9px) {
      .welcomeContainer .typeFix {
        width: 90%; } }
    @media screen and (orientation: landscape) and (max-height: 500px) {
      .welcomeContainer .typeFix {
        width: 55%; } }
  .welcomeContainer .intro-content {
    margin-top: -1.5em;
    transform: rotateX(-90deg); }
    @media screen and (orientation: portrait) and (max-width: 599.9px) {
      .welcomeContainer .intro-content {
        margin-top: -1.5vh;
        font-size: 1.5em; } }
    @media screen and (orientation: landscape) and (max-height: 500px) {
      .welcomeContainer .intro-content {
        margin-top: -2.5vh;
        font-size: 1.3em; } }
    .welcomeContainer .intro-content h1, .welcomeContainer .intro-content h2, .welcomeContainer .intro-content h3, .welcomeContainer .intro-content p {
      text-align: center;
      color: #225; }
    .welcomeContainer .intro-content h2 {
      font-size: calc(0.6em + 0.6vw);
      font-weight: 400;
      background-color: rgba(31, 138, 148, 0.18);
      padding: calc(0.6em + 1vh) calc(1.2em + 1vh);
      border-radius: 25px;
      text-align: center;
      margin: auto;
      width: fit-content;
      margin-top: calc(18vh + 4.55vw + 20px); }
      .welcomeContainer .intro-content h2 br {
        display: none; }
      @media screen and (orientation: portrait) and (max-width: 599.9px) {
        .welcomeContainer .intro-content h2 {
          margin-top: 17.5vh;
          padding: calc(0.4em + 1vh) calc(0.75em + 1vh) calc(0.5em + 1vh) calc(0.75em + 1vh);
          width: 84%;
          font-size: calc(0.25em + 2.85vw); 
          line-height: calc(0.6em + 3.5vw) !important;
        }
          .welcomeContainer .intro-content h2 span{
            transform: translateY(-.75em);
            display: block;
          }
          .welcomeContainer .intro-content h2 br {
            display: inline-block; } 
      }
  .welcomeContainer h1 {
    color: #225;
    position: absolute;
    top: 80%;
    margin: calc(0.5vw + 1vh) 0 0 0;
    transform: translateX(-50%);
    font-weight: 200;
    font-size: calc(0.75em + 0.75vw);
    width: 100%;
    left: 50%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: calc(0.075em + 0.075vw);
    opacity: 0; }
    @media screen and (orientation: portrait) and (max-width: 599.9px) {
      .welcomeContainer h1 {
        font-size: calc(0.25em + 3vw);
        width: 100vw;
        left: -10vw;
        text-align: center;
        transform: translateX(0); } }

#cloudContainer {
  background: transparent;
  position: absolute;
  top: -180vh;
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 5%, black 95%, rgba(0, 0, 0, 0) 100%); }

#auroraContainer {
  background: transparent;
  position: absolute;
  top: -175vh;
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 5%, black 95%, rgba(0, 0, 0, 0) 100%); }
  #auroraContainer canvas {
    filter: blur(8px); }

.art-container {
  position: absolute;
  top: -100vh;
  left: 50vw;
  width: 100vw; }

#ghost-canvas {
  display: none; }

#visible-canvas {
  width: 100%;
  margin-top: 40vh;
  max-width: 900px;
  transform: translateX(-50%) translateY(-50%);
  position: relative; }