style.css

@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display:900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
  font-family: 'nasalizationregular';
  src: url('fonts/webfontkit-nasalization/nasalization-rg-webfont.woff2') format('woff2'),
       url('fonts/webfontkit-nasalization/nasalization-rg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@keyframes cwrotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ccwrotate {
  to {
    transform: rotate(-360deg);
  }
}
/*
@media(prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}
*/
.hidden {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(-3%);
  transition: all 0.5s;
}
.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}
.hidden0 {
  opacity: 0.5;
  transform: scale(0.85);
  transition: all 0.5s;
}
.show0 {
  opacity: 1;
  transform: scale(1);
}
.hidden2 {
  opacity: 0;
  filter: blur(1px);
  transform: translateY(50px);
  transition: all 1s;
}
.show2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.hidden3 {
  opacity: 0;
  filter: blur(1px);
  transform: translateY(-50px);
  transition: all 0.5s;
}
.show3 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.hidden4 {
  opacity: 0;
  filter: blur(1px);
  transform: translatex(-10%);
  transition: all 1s;
}
.show4 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.hidden5 {
  opacity: 0;
  filter: blur(1px);
  transform: translatex(10%);
  transition: all 1s;
}
.show5 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.hiddenInner {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(-50px);
  transition: all 1s;
}
.showInner {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transform: translateX(0);
}
.hiddenOuter {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(50px);
  transition: all 1s;
}
.showOuter {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transform: translateX(0);
}
.hiddenLeft {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(-5%);
  transition: all 0.5s;
}
.showLeft {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}
.hiddenRight {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(5%);
  transition: all 0.5s;
}
.showRight {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/*hamburger navbar thing*/
*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

.navbar input[type="checkbox"],
.navbar .hamburger-lines {
  display: none;
}

.container {
  max-width: 200px;
  width: 90%;
  left: 20px;
}

.navbar {
  position: fixed;
  width: 100%;
  background: transparent;
  color: #fff;
  z-index: 4;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.menu-items {
  order: 2;
  display: flex;
}

.menu-items li,
button {
  list-style: none;
  margin-left: 1.5rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.navbar a {
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.navbar a:hover {
  color: #ffffff;
}

@media (max-width: 1000000000px) {
  .navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
  }

  .navbar-container {
    display: block;
    position: absolute;
    height: 64px;
  }

  .navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 32px;
    width: 30px;
    top: 20px;
    left: 0px;
    z-index: 9;
    opacity: 0;
    cursor: pointer;
  }

  .navbar-container .hamburger-lines {
    height: 18px;
    width: 23.5px;
    position: absolute;
    top: 20px;
    left: -2px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-container .hamburger-lines .line {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 5px;
    background:  #ffac13;
  }

  .navbar-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.3s ease-in-out;
  }

  .navbar-container .hamburger-lines .line2 {
    transition: transform 0.1s ease-in-out;
  }

  .navbar-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.3s ease-in-out;
  }

  .navbar .menu-items {
    z-index: 3;
    background: radial-gradient(ellipse at top, #ff4000 30%, #ffd500 80%), radial-gradient(ellipse at bottom, #ff4000, #ffd500);
    opacity: 1;
    border-right: none 5px #000000;
    border-bottom: none 5px #000000;
    border-radius: 250px;
    box-shadow: 1px 0px 8px #ffdd30;
    height: 500px;
    width: 500px;
    transform: translateX(-250px) translateY(150px);
    display: flex;
    flex-direction: column;
    margin-left: -350px;
    margin-top: calc(-70px);
    padding-left: 335px;
    padding-top: 130px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }

  .navbar .menu-items a {
    margin-bottom: 5px;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 15px;
    font-weight: 700;
  }

  .navbar-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0) translateY(-2px);
    opacity: 1;
    filter: blur(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }
}


/*Body*/
body {
  margin: 0;
  background-color: black;
  overflow-x: hidden;
}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: underline; }

/*Loader*/
.loader-wrapper {
  opacity: 1;
  transition: all 1s;
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f8860d;
  position: relative;
  left: 125px;
  bottom: 20px;
  animation: spin 0.9s linear infinite;
}
#loader-text {
  position: relative;
  display: block;
  width: 250px;
  top: 25px;
  right: 20px;
  opacity: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #f8860d;
  font-weight: 450;
  letter-spacing: 1px;
  transition: all 2s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(60deg);
  }
  50% {
    transform: rotate(180deg);
    border-top-color: transparent;
  }
  75% {
    transform: rotate(300deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*Hero*/
.hero {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  display: flex;
}

.hero #logo {
  --h: 27vw;
  position: relative;
  z-index: 1;
  height: var(--h);
  width: 80vw;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transition: opacity 3s, filter 1s;
  filter: brightness(0.9) hue-rotate(-20deg);
}

.scroll-down {
  height: 40px;
  width: 24px;
  border: 2px solid #f8860d;
  position: relative;
  right: 20px;
  margin-top: 45px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  bottom: 0px;
  border-radius: 50px;
  cursor: pointer;
}
.scroll-down:hover{
  border: 3px solid #ff8400;
}
.scroll-down::before,
.scroll-down::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 8px;
  width: 8px;
  transform: translate(-50%, -100%) rotate(45deg);
  border: 2px solid #f8860d;
  border-top: transparent;
  border-left: transparent;
  animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
  top: 30%;
  animation-delay: 0.3s;
  /* animation: scroll-down 1s ease-in-out infinite; */
}

@keyframes scroll-down {
  0% {
    /* top:20%; */
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 90%;
    opacity: 0;
  }
}

#sun {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  background-color: black;
  text-align: center;
}
#sunimg {
  position: relative;
  width: 100vmax;
  height: 89vmax; 
  opacity: 0;
  object-fit: cover;
  transition: opacity 3s;
}
#featheroverlay {
  position: absolute;
  width: 100vmax;
  height: 90vmax; 
  box-shadow: 40px 40px 50px black inset,-40px -70px 50px black inset;
}
.suntext {
  position: absolute;
  width: 150vw;
  top: 48%;
}
#suntext1 {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  font-weight: 900;
  color: #ffdaaa;
  opacity: 1;
  transition: color 0.5s;
}
#suntext2 {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  letter-spacing: 4px;
  font-weight: 900;
  color: #ffdaaa;
  opacity: 1;
  transition: color 0.5s;
}
#sun a:link {color: rgb(25, 25, 25);}
#sun a:visited {color: rgb(25, 25, 25);}
#sun a:hover {color: rgb(255, 208, 157); text-decoration: none;}
#sun a:active {color: rgb(255, 208, 157); text-decoration: none;}
#sun a{
  color: rgb(39, 0, 0);
  font-size: 1vmax;
  font-weight: 600;
  opacity: 0.7;
}
#sunsource {
  position: absolute;
  bottom: 14vmax;
  left: 70%;
  transform: rotate(-35deg);
}

#rotatingcircles{
  display: block;
}
#circles{
  --x: 19vw;
  position: relative;
  bottom: 3vw;
  justify-content: center;
}

.circlecw{
  position: relative;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  animation: cwrotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -20s);
  animation-iteration-count: 8;
  animation-fill-mode: both;
}
.circleccw{
  position: relative;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  animation: ccwrotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -20s);
  animation-iteration-count: 8;
  animation-fill-mode: both;
}
#circle1{
  position: relative;
  z-index: 1;
  height: var(--x);
  display: flex;
  justify-content: center;
  background-color: transparent;
  margin-bottom: 1vw;
  filter: brightness(1.1) saturate(1.2) contrast(1);
}
#dimg1{
  position: absolute;
  opacity: 1;
  width: var(--x);
  height: var(--x);
}
#circles h1{
  padding-top: calc((var(--x) - 2vw) * 0.5);
  position: absolute;
  color: rgb(255, 199, 139);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw;
  font-weight: 600;
}

#circle2{
  --x2: calc(var(--x) * 0.75);
  position: relative;
  height: var(--x2);
  display: flex;
  justify-content: center;
  background-color: transparent;
  margin-bottom: 1vw;
  filter: brightness(1.1) saturate(1.2) contrast(1);
}
#dimg2{
  position: absolute;
  opacity: 1;
  width: var(--x2);
  height: var(--x2);
}
#circles h2{
  padding-top: calc((var(--x2) - 2vw) * 0.5);
  position: absolute;
  color: rgb(255, 199, 139);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw;
  font-weight: 600;
}

#circle3{
  --x3: calc(var(--x) * 0.55);
  position: relative;
  height: var(--x3);
  display: flex;
  justify-content: center;
  background-color: transparent;
  margin-bottom: 1vw;
  filter: brightness(1.2) saturate(1.1) contrast(1);
}
#dimg3{
  position: absolute;
  opacity: 1;
  width: var(--x3);
  height: var(--x3);
}
#circles h3{
  margin-top: calc((var(--x3) - 2.5vw) * 0.5);
  position: absolute;
  color: rgb(255, 199, 139);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw;
  font-weight: 600;
}

#circle4{
  --x4: calc(var(--x) * 0.42);
  position: relative;
  height: var(--x4);
  display: flex;
  justify-content: center;
  background-color: transparent;
  margin-bottom: 1vw;
  filter: brightness(1.3) saturate(1) contrast(1);
}
#dimg4{
  position: absolute;
  opacity: 1;
  width: var(--x4);
  height: var(--x4);
}
#circles h4{
  padding-top: calc((var(--x4) - 2vw) * 0.5);
  position: absolute;
  color: rgb(255, 199, 139);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw;
  font-weight: 600;
}

#circle5{
  --x5: calc(var(--x) * 0.5);
  position: relative;
  height: var(--x5);
  display: flex;
  justify-content: center;
  background-color: transparent;
  padding-bottom: 90px;
  margin-bottom: 1vw;
}
#dimg5{
  position: absolute;
  opacity: 1;
  width: var(--x5);
  height: var(--x5);
}
#circles h5{
  padding-top: calc((var(--x5) - 2vw) * 0.5);
  position: absolute;
  color: rgb(255, 199, 139);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2vw;
  font-weight: 600;
}

.modelcontainer a:link {color: #ffae17;}
.modelcontainer a:visited {color: #ffae17;}
.modelcontainer a:hover {color: #ffae17e5;}
.modelcontainer a:active {color: #ffae17e5;}
.modelcontainer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  border-top: solid 8px #ffae17;
  border-radius: 0vw;
  background-color: #ebebeb;
  justify-content: center;
  padding-top: 0px;
  margin-bottom: 0px;
}
.orangegradient1 { /* used for aurora */
  background-color: #ff8b17;
  background-image: linear-gradient(180deg, #ffae17 0%, #ff8b17 80%);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
.orangegradient2 { /* used for aurora */
  background-color: #ff8b17;
  background-image: linear-gradient(180deg, #ff8b17 0%, #ff6c17 80%);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
.orangegradient3 { /* used for aurora */
  background-color: #ff8b17;
  background-image: linear-gradient(180deg, #ff6c17 0%, #ff4d17 80%, #ff4d17 100%);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
.modelcontainer h1 {
  color: #ff8b17;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 165px;
  font-weight: 900;
  letter-spacing: 0px;
  margin-bottom: 20px;
  line-height: 120px;
}
.modelcontainer h2 {
  color: black;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  margin-top: 70px;
  font-size: 20px;
  font-weight: 450;
  letter-spacing: 2.11vw;
  line-height: 40px;
  padding-bottom: 30px;
}
.modelcontainer h3 {
  color: #ff390d;
  text-align: center;
  font-family: 'nasalizationregular';
  font-size: 43px;
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 50px;
  padding-top: 0px;
  padding-bottom: 8px;
}
.modelcontainer h5 {
  color: rgb(0, 14, 54);
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 450;
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
}
#pspaccolades {
  color: #ff4117;
  position: relative;
  text-align: center;
  margin-left: 20%;
  margin-right: 20%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0px;
  padding-top: 0px;
  padding-bottom: 10px;
}
#disclaimer {
  color: rgb(0, 14, 54);
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 12px;
  padding-top: 50px;
  padding-bottom: 80px;
  padding-left: 28%;
  padding-right: 28%;
}

canvas {
  display:block;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid white;
  max-width: 80%;
  max-height: 80%;
}

.vl {
  position: absolute;
  left: 20px;
  height: 1750px;
  border-left: 3px solid #F86800;
}
#thecorona {
  background: linear-gradient(180deg, #ff3e17 0%, #f88d00 33%, #f88d00 40%,#f88000 60%, #ff5e00 90%);
  border-top: solid 80px #ff3e17;
  border-bottom: solid 80px #ff5e00;
}
#corona {
  width: 100%;
  background-color: black;
  border-radius: 75px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  padding-bottom: 80px;
  position: sticky;
  color: #ff3e17;
  text-align: center;
  justify-content: center;
}
#corona h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 90px;
  font-weight: 800;
  letter-spacing: 1px;
  padding-top: 5px;
  line-height: 40pt;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
#corona h2 {
  color:#ff512f;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 5px;
  padding-bottom: 20px;
}
#corona h3 {
  color:#ff512f;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0px;
}
#corona p {
  color: #ff9950;
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0px;
}
#hinthint {
  color: #ff9950;
  position: relative;
  z-index: 2;
  bottom: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0px;
}
#vidPlayImg {
  position: relative;
  bottom: 5px;
  z-index: 1;
  display: block;
  width: 360px;
  height: 360px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}
#coronavid {
  position: relative;
  bottom: 5px;
  z-index: 1;
  display: none;
  width: 360px;
  height: 360px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}
#waithowbig{
  color: #ff6a00;
  position: relative;
  z-index: 2;
  padding-top: 25px;
  margin-left: 5%;
  margin-right: 5%;
  bottom: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0px;
}
#verybig{
  color: #ff9950;
  position: relative;
  z-index: 2;
  padding-top: 25px;
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 900;
}
#elfvandisplay {
  justify-content: center;
  padding-top: 20px;
  width: 100%;
  height: 360px;
  margin-bottom: 1px;
}
#elfvandisplay h5 {
  position: relative;
  z-index: 3;
  color: #ffe7d7;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 0px;
  transform: rotate(-90deg);
}
#elfvandisplay h5 span{
  background-color: #00000027;
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  opacity: 0.8;
}
#elfvandisplay h6 {
  position: relative;
  bottom: 68px;
  left: 192px;
  z-index: 3;
  color: #ff6a00;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0px;
}
#alfvenpointer {
  width: 60px;  
  margin-left: auto;
  margin-right: auto;
  position: relative; 
  bottom: 92px;
  left: 162px;
  z-index: 3; 
  transform: rotate(45deg);
  background:#ff6a00; 
  height: 1px; 
  border-style:none;
}
#coronalabel {
  bottom: 220px;
  right: 145px;
  background-size: 30px 10px;
}
#windlabel {
  bottom: 241px;
  right: 240px;
}
#elfvan {
  position: relative;
  z-index: 3;
  left: 200px;
  bottom: 355px;
  transform: rotate(90deg);
  width: 100px;
  height: 100px;
}
#elfsun{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 400px;
}
#coronagradient {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  bottom: 485px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #ffa600 5%, #000000 72%);
  opacity: 0.7;
}
#alfventext {
  display: block;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.bluegradient { /* used for aurora */
  background-color: #78ebf3;
  background-image: linear-gradient(80deg, #8cfffd 0%, #3888ff 36%, #a6fffe 67%, #0043a8 95%);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
#auroracontainer {
  --w: 400px;
  --h: calc(var(--w)*212/550);
  width: 100%;
  height: var(--h);
  margin: 5px;
}
#aurora {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: var(--h);
}
#auroraoverlay {
  --h2: calc(var(--w)*223/550);
  position: relative;
  bottom: calc(var(--h2) + 4px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: var(--h2);
  box-shadow: calc(var(--w)/40*3) calc(var(--w)/8) calc(var(--w)/8) black inset, calc(var(--w)/40*-6) calc(var(--w) / -8) calc(var(--w)/8) black inset;
}
#cmecontainer {
  --w: 360px;
  --h: calc(var(--w)*202/360);
  width: var(--w);
  height: var(--h);
  position: relative;
  right: 30px;
}
#cme {
  width: var(--w);
  height: var(--h);
}
#cmeoverlay {
  --h2: calc(var(--w)*206/360);
  position: relative;
  bottom: calc(var(--h2) + 5px);
  margin-left: auto;
  margin-right: auto;
  width: calc(var(--w) + 3px);
  height: var(--h2);
  box-shadow: calc(var(--w)/18) calc(var(--w)/36*5) calc(var(--w)/36*5) black inset,calc(var(--w)/-12) calc(var(--w)/-12) calc(var(--w)/9) black inset;
}
#carringtoncontainer {
  --w: 330px;
  --h: calc(var(--w)*186/330);
  width: var(--w);
  height: var(--h);
  position: relative;
  right: 5px;
}
#carrington {
  width: var(--w);
  height: var(--h);
}
#carringtonoverlay {
  --h2: calc(var(--w)*190/330);
  position: relative;
  bottom: calc(var(--h2) + 5px);
  margin-left: auto;
  margin-right: auto;
  width: calc(var(--w) + 3px);
  height: var(--h2);
  box-shadow: 15px 15px 20px black inset,-15px -15px 20px black inset;
}

#instruments {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, #0f263c 10%, #004c8f 95%);
  background-color: #0f263c;
  border-bottom: solid 4px #fff0d7;
  border-radius: 0vw;
  padding-top: 80px;
  text-align: center;
  padding-bottom: 50px;
}
#instruments h1 {
  position: relative;
  left: 18px;
  font-size: 55px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 1000;
  letter-spacing: 3.5vw;
  line-height: 60pt;  
}
#instruments h2 {
  color: #fff0d7; 
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.3vw;
}
#instruments p {
  color:  #fff0d7;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
}
#instrumlist {
  display: inline-block;
  text-align: center;
  color: white;
  margin-top: 45px;
  margin-bottom: 30px;
}
#PSPinstruments {
  position: relative;
  margin-top: 15px;
  width: 300px;
  height: 200px;
  border: 4px dashed #fff0d7;
  filter: saturate(0.3);
}
#waitwuthuh{
  color: #fff0d7;
  position: relative;
  z-index: 2;
  margin-top: 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0px;
}

.exhibitnum {
  z-index: 2;
  width: 80%;
  display: inline-block;
  border-left: dashed 1px rgba(255, 255, 255, 0.7);
  border-right: dashed 1px rgba(255, 255, 255, 0.7);
  color: white; 
  font-size: 15px; 
  font-family: Times New Roman;
  font-weight: 300;
  padding-top: 12vw;
  padding-bottom: 12vw;
}

#wispr a:link {color: rgb(2, 150, 236);}
#wispr a:visited {color: rgb(2, 150, 236);}
#wispr a:hover {color: rgb(70, 187, 255);}
#wispr a:active {color: rgb(70, 187, 255);}
#wispr {
  text-align: center;
  justify-content: center;
  width: 100%;
}
#thewispr {
  background-color: black;
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: solid 4px #5bacf3;
  border-radius: 5vw;
  padding-top: 5vw;
  padding-bottom: 0vw;
}
#wispr h1{
  position: relative;
  top: 10px;
  color: rgb(0, 162, 255);
  font-size: 110px;
  font-weight: 800;
  letter-spacing: 0px;
  line-height: 100px;
  padding-bottom: 40px;
}
#wispr h2{
  position:relative; 
  bottom:25px; 
  color:rgba(59, 183, 255, 0.754); 
  font-size: 14px; 
  font-weight: 400; 
  letter-spacing: 5px;
  line-height: 21px;
  margin-left: 15%;
  margin-right: 15%;
}
#camera {
  position: relative;
  bottom: 15px;
  right: 5px;
  width: 100%;
  height: 180px;
  background-color: transparent;
  justify-content: center;
  display: block;
  text-align: center;
  color: rgb(0, 147, 239);
}
#camimg {
  position: relative;
  display: block;
  z-index: 2;
  width: 360px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("public/WISPR_Camera_OFF_5.1.2.png");
  background-size: 359px 180px;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
}
#camimg:hover {
  position: relative;
  display: block;
  z-index: 2;
  width: 360px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background-repeat:no-repeat;
  background-image: url("public/WISPR_Camera_ON_5.1.1.png");
  background-size: 359px 180px;
  background-position: center;
  object-fit: contain;
}
.button {
  position: relative;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 74px;
  margin-left: auto;
  margin-right: auto;
  border-color: transparent transparent transparent rgb(255, 122, 0);
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 37px 0 37px 60px;
}
.button.paused {
  border-color: rgb(255, 122, 0);
  border-style: double;
  border-width: 0px 0px 0px 60px;
}
.button:hover {
  border-color: transparent transparent transparent rgb(255, 145, 42);
}
#speedsection {
  opacity: 0;
  transition: 200ms all ease;
}
#speedbuttons {
  background-color: white;
  height: 0px;
  justify-content: center;
}
#speeddisplay {
  position: relative;
  font-size: 15px;
  font-family: "Courier New", monospace;
  z-index: 6;
  top: 17px;
  color:#ffe7d7;
}
.fasterbutton {
  position: absolute;
  z-index: 6;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  opacity: 1;
  background: transparent;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  border-color: transparent transparent transparent  rgb(255, 122, 0);
  transition: 200ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 9px 0 9px 15px;
}
.fasterbutton:hover {
  border-color: transparent transparent transparent #ffe7d7;
}
#wisprfasterbutton1 {
  left: 50%;
  bottom: -4px;
}
#wisprfasterbutton2 {
  left: 50%;
  bottom: -4px;
}
.slowerbutton {
  position: absolute;
  z-index: 6;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  opacity: 1;
  background: transparent;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  border-color: transparent transparent transparent  rgb(255, 122, 0);
  transition: 200ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  transform: rotate(180deg);
}
.slowerbutton:hover {
  border-color: transparent transparent transparent #ffe7d7;
}
#wisprslowerbutton1 {
  right: 50%;
  bottom: -4px;
}
#wisprslowerbutton2 {
  right: 50%;
  bottom: -4px;
}
.slidecontainer {
  justify-content: center;
  z-index: 5;
  position: relative;
  width: 100%; /* Width of the outside container */
}
/* The slider */
#sliderrr {
  position: relative;
  bottom: 3px;
  width: 140px;
  height: 7px;
  border-radius: 2px; 
  margin-top: 24px;
  margin-bottom: 18px; 
}
.slider {
  z-index: 3;
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background: rgb(239, 239, 239);
  outline: none; /* Remove outline */
  opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  border-radius: 30%; 
  background: rgb(255, 121, 0);
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  border-radius: 30%; 
  background: rgb(255, 111, 0); 
  cursor: pointer; /* Cursor on hover */
}

#wisprdisplay{
  margin-bottom: 0px;
  justify-content: center;
}
#wisprdisplay a:link {color: rgb(173, 84, 0);}
#wisprdisplay a:visited {color: rgb(173, 84, 0);}
#wisprdisplay a:hover {color: rgb(255, 123, 0);}
#wisprdisplay a:active {color: rgb(255, 123, 0);}

.innerdiv{
  position: relative;
  bottom: 150px;
  left: 7%;
  width: 250px;
  float: left;
}
#innerlabel{
  text-align: left;
  position: relative;
  left: 4px;
  bottom: 5px;
  z-index: 2;
  color: #0085FF;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}
#innerimg{
  position: relative;
  z-index: 2;
  width: 240px;
  height: 256px;
  border: 4px dashed #0085FF;
}
.outerdiv{
  position: relative;
  bottom: 150px;
  right: 7%;
  width: 250px;
  float: right;
}
#outerlabel{
  text-align: right;
  position: relative;
  right: 4px;
  bottom: 5px;
  color: #0057BD;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}
#outerimg{
  position: relative;
  z-index: 2;
  width: 240px;
  height: 256px;
  border: 4px dashed #0057BD;
}
#laginfo{
  z-index: 7;
  text-align: left;
  position: relative;
  left: 5px;
  bottom: 3px;
  color: #0057BD;
  font-size: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
}
#laginfo:hover{
  color: #0077ff;
  cursor: pointer;
}

#locplot{
  position: relative;
  z-index: 1;
  display: flex;
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 4px solid rgb(255, 122, 0);
}
#psploc {
  position: relative;
  z-index: 4;
  width: 16px;
  height: 16px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.triangle {
  position: relative;
  bottom: 240px;
  z-index: 4;
  width: 0;
	height: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 16px solid #FF7913;
  transition: all 0.5s;
}

#fov1 {
  position: relative;
  z-index: 2;
  bottom: 50px;
  right: 52px;
  width: 120px;
  height: 120px;
  opacity: 0;
  filter: blur(4px);
  border-radius: 50%;
  transform: rotate(58.5deg);
  background: linear-gradient(40deg, #0085FF 45.626%, transparent 45.626%); /*linear-gradient(40deg, #0085FF 45.626%, transparent 45.626%)*/
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: all 0.5s;
}
#fov2 {
  position: relative;
  z-index: 2;
  bottom: 170px;
  right: 52px;
  width: 120px;
  height: 120px;
  opacity: 0;
  filter: blur(4px);
  border-radius: 50%;
  transform: rotate(98.5deg); /* 58.5 + 40 = 98.5deg */
  background: linear-gradient(58deg, #0057BD 61.54%, transparent 61.54%);
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: all 0.5s;
}
.sunicon {
  position: relative;
  z-index: 3;
  background-color: rgb(255, 208, 0);
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}
#sunicon1 {
  height: 8px;
  width: 8px;
  box-shadow: 0px 0px 80px 30px #ffa600c9;
  bottom: 300px;
  right: 12px;
}
.selector {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  z-index: 3;
  appearance: none;
  padding: 2px 5px 2px 7px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-weight: 500;
  background: url(public/select.png) no-repeat 89% center;
  background-color: black;
  background-size: 10px 5px;
  color: #ff9800;
  border-radius: 7px;
  border: 2px solid rgb(255, 122, 0);
}
#orbit_num {
  position: relative;
  bottom: 587px;
  left: 192px;
  width: 80px;
}
#positiondisplay {
  z-index: 3;
  position: relative;
  transform: scale(1);
}
#positiondisplay h3 {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0px;
}
.textcontainer {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 0px;
  height: 30px;
}
#datetxt{
  text-align: left;
  z-index: 3;
  position: relative;
  bottom: 485px;
  right: 232px;
  color: rgb(255, 122, 0);
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}
#disttxt {
  font-size: 12px;
  z-index: 3;
  position: relative;
  text-align: center;
  left: 56px;
  bottom: 312px;
}
#AUinfo {
  font-size: 11px;
  z-index: 3;
  text-align: center;
  position: relative;
  right: 119px;
  bottom: 94px;
}
#wisprsource {
  font-size: 11px;
  z-index: 3;
  text-align: center;
  position: relative;
  left: 216px;
  bottom: 114px;
}

#wisprinfo {
  position: relative;
  bottom: 80px;
  width: 50%; 
  margin-left: auto; 
  margin-right: auto;
}
#wisprinfo p {
  color: #5bacf3;
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
}

#sweap {
  text-align: center;
  justify-content: center;
  width: 100%;
}
#thesweap {
  position: relative;
  width: 90%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5vw;
  padding-bottom: 5vw;
  border: solid 4px rgb(217, 54, 0); 
  border-radius: 5vw;
}
#sweap h1{
  position: relative;
  top: 10px;
  color: rgb(217, 54, 0);
  font-size: 115px;
  font-weight: 800;
  letter-spacing: 0px;
  line-height: 100px;
  padding-bottom: 40px;
}
#sweap h2{
  position:relative; 
  bottom:25px; 
  color:rgb(217, 54, 0); 
  font-size: 14px; 
  font-weight: 400; 
  letter-spacing: 5px;
  line-height: 21px;
  margin-left: 15%;
  margin-right: 15%;
}
#sweapinstruments {
  position: relative;
  top: 5px;
  right: 5px;
  width: 100%;
  height: 180px;
  background-color: transparent;
  justify-content: center;
  display: block;
}
#sweapinstrumentsimg {
  width: 320px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("public/SWEAP_instruments_OFF.jpg");
  background-size: 359px 180px;
  background-position: center;
  background-repeat: no-repeat;
}
#sweapinstrumentsimg:hover {
  width: 320px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("public/SWEAP_instruments_ON.jpg");
  background-size: 359px 180px;
  background-position: center;
}

#sweapdisplay{
  margin-bottom: 0px;
  justify-content: center;
}
.sweap-grid {
  display: grid;
  grid-template-columns: 300px 100px 300px;
  justify-content: center;
  gap: 40px;
  background-color: transparent;
  padding: 30px;
}
#sweapdisplay a:link {color: rgb(167, 81, 0);text-decoration: none;}
#sweapdisplay a:visited {color: rgb(167, 81, 0);text-decoration: none;}
#sweapdisplay a:hover {color: rgb(255, 123, 0);text-decoration: none;}
#sweapdisplay a:active {color: rgb(255, 123, 0);text-decoration: none;}

#instrumentdisplay {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(255, 122, 0);
}
#instrumentdisplay p {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgb(173, 84, 0);
  font-weight: 600;
  letter-spacing: 0px;
  text-align: center;
}
#moreinfo {
  position: relative;
  text-align: right;
  bottom: 69px;
  left: 139px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
}
#sweapdisplay span {
  background-color: #00000027;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}
#sweapunits {
  position: relative;
  bottom: 30px;
  left: 260px;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgb(255, 123, 0);
  font-weight: 800;
  letter-spacing: 0.5px;
}
#sweapunits:hover {
  color: rgb(255, 147, 45);
  cursor: pointer;
}
#unitsline {
  position: relative;
  bottom: 30px;
  border: none;
  height: 1px;
  background: rgb(255, 123, 0);
}
#instrumentdisplay h4 {
  position: relative;
  display: none;
  bottom: 25px;
  right: 6px;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: rgb(255, 123, 0);
  font-weight: 500;
  margin-bottom: 2px;
  opacity: 0.8;
  animation: all 1s ease-in-out;
}
.sweapunit {
  animation: all 1s ease-in-out;
}
#instrumentdisplay h4:hover {
  transform: translateX(-2px);
  opacity: 1;
  cursor: pointer;
}
#sweapdescription {
  position: relative;
  bottom: 45px;
  margin: 12px;
}
#sweapinstrument {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 75%;
  justify-content: center;
  display: block;
  text-align: left;
  background-image: url("public/SPC_instrument.jpg");
  background-size: 210px 210px;
  background-position: center;
  background-repeat: no-repeat;
}
#sweap_selector {
  position: relative;
  top: 8px;
  left: 8px;
  width: 96px;
}

#positiondisplay2 {
  --l: 300px;
  position: relative;
  height: var(--l);
  transform: scale(1);
  margin-left: auto;
  margin-right: auto;
}
#positiondisplay2 h3 {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
}
#datecontainer2 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#datetxt2{
  text-align: left;
  z-index: 3;
  position: relative;
  bottom: 292px;
  right: 139px;
  color: rgb(255, 122, 0);
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}
#timetxt{
  text-align: left;
  inline-size: 200px; 
  z-index: 3;
  position: relative;
  bottom: 292px;
  right: 139px;
  color: rgb(255, 122, 0);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0px;
}
#orbit_num2 {
  position: relative;
  bottom: 387px;
  left: 100px;
  width: 80px;
}
#locplot2{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  display: flex;
  width: var(--l);
  height: var(--l);
  border: 1px solid rgb(255, 122, 0);
}
#psploc2 {
  position: relative;
  z-index: 4;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.triangle2 {
  position: relative;
  z-index: 4;
  width: 0;
	height: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 16px solid #FF7913;
  transition: all 0.5s;
}
#sunicon2 {
  height: 4.8px;
  width: 4.8px;
  box-shadow: 0px 0px 48px 18px #ffa600c9;
  bottom: 208px;
  left: 9px;
}
#disttxt2 {
  font-size: 10px;
  z-index: 3;
  position: relative;
  text-align: left;
  inline-size: 200px; 
  right: 140px;
  bottom: 81px;
}
#pspspeed {
  font-size: 10px;
  z-index: 3;
  position: relative;
  text-align: left;
  inline-size: 200px; 
  right: 140px;
  bottom: 81px;
}
#sweapsource {
  font-size: 11px;
  z-index: 3;
  text-align: center;
  position: relative;
  left: 119px;
  bottom: 102px;
}

#sweapcontrols {
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  justify-content: center;
  display: inline-block;
}
#speedsection2 {
  opacity: 0;
  transition: 200ms all ease;
}
#speedbuttons2 {
  background-color: white;
  height: 0px;
  justify-content: center;
}
#speeddisplay2 {
  position: relative;
  font-size: 12px;
  font-family: "Courier New", monospace;
  z-index: 6;
  top: -2px;
  color: #ffe7d7;
}
#sweapfasterbutton1 {
  left: 50%;
  bottom: 3px;
}
#sweapfasterbutton2 {
  left: 50%;
  bottom: 3px;
}
#sweapslowerbutton1 {
  right: 50%;
  bottom: 3px;
}
#sweapslowerbutton2 {
  right: 50%;
  bottom: 3px;
}
#playbutton2 {
  position: relative;
  margin-top: 10px;
  bottom: 20px;
}
#sliderrr2 {
  position: relative;
  bottom: 0px;
  width: 100px;
  height: 7px;
  border-radius: 1px;  
}
#theslider2 {
  position: relative;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

#canvascontainer {
  display: grid;
  grid-template-columns: 100% 1%;
  margin: 0;
  padding: 0;
}
#THESWEAPCANVAS {
  margin-top: 0px;
  padding: 0;
  background-color: black;
}
#fullscreenbuttoncontainer {
  height: 0px;
}
#fullscreenbutton {
  width: 20px;
  height: 20px;
  position: relative;
  right: 300px;
  top: 100px;
  transform: scale(1);
  opacity: 0.8;
  animation: all 3s ease-in-out;
}
#fullscreenbutton:hover {
  opacity: 1;
  transform: scale(1.03);
}
#sweapcanvas a:link {color: rgb(255, 64, 0);}
#sweapcanvas a:visited {color: rgb(255, 64, 0);}
#sweapcanvas a:hover {color: rgb(255, 202, 185); text-decoration: none;}
#sweapcanvas a:active {color: rgb(255, 202, 185); text-decoration: none;}

#whatisflux {
  position: relative;
  display: none;
  font-size: 14px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  z-index: 6;
  opacity: 1;
  top: 3px;
  color: rgb(231, 58, 0);
}
#whatisflux:hover {
  color: rgb(255, 126, 71);
  cursor: pointer;
}
#fluxinfo {
  position: relative;
  display: none;
  font-size: 12px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  z-index: 6;
  opacity: 1;
  top: 3px;
  color: rgb(207, 52, 0);
}
#fluxinfo:hover {
  color: rgb(255, 104, 54);
  cursor: pointer;
}

#sweapinfo a:link {color: rgb(255, 106, 56);;}
#sweapinfo a:visited {color: rgb(255, 106, 56);}
#sweapinfo a:hover {color: rgb(255, 162, 116);}
#sweapinfo a:active {color: rgb(255, 162, 116);}
#sweapinfo {
  position: relative; 
  width: 70%; 
  margin-left: auto; 
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 20px;
}
#sweapinfo p {
  color: rgb(255, 106, 56);
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
}

/* ISOIS */
#isois a:link {color: rgba(255, 166, 0, 1);}
#isois a:visited {color: rgba(255, 166, 0, 1);}
#isois a:hover {color: rgb(255, 196, 85);}
#isois a:active {color: rgb(255, 196, 85);}
#isois {
  text-align: center;
  justify-content: center;
  width: 100%;
}
#theisois {
  position: relative;
  width: 90%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5vw;
  padding-bottom: 5vw;
  border: solid 4px rgb(255, 166, 0);
  border-radius: 5vw;
}
#isois h1{
  position: relative;
  top: 10px;
  color: rgb(255, 166, 0);
  font-size: 115px;
  font-weight: 800;
  letter-spacing: 0px;
  line-height: 100px;
  padding-bottom: 40px;
}
#isois h2{
  position:relative; 
  bottom: 25px; 
  color: rgb(255, 179, 0); 
  font-size: 14px; 
  font-weight: 400; 
  letter-spacing: 5px;
  line-height: 21px;
  margin-left: 15%;
  margin-right: 15%;
}
#isoisinstruments {
  position: relative;
  top: 18px;
  right: 5px;
  width: 100%;
  height: 240px;
  background-color: transparent;
  justify-content: center;
  display: block;
}
#isoisinstrumentsimg {
  width: 467px;
  height: 240px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("public/ISOIS_instruments_OFF.jpg");
  background-size: 440px 240px;
  background-position: center;
  background-repeat: no-repeat;
}
#isoisinstrumentsimg:hover {
  width: 467px;
  height: 240px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("public/ISOIS_instruments_ON.jpg");
  background-size: 440px 240px;
  background-position: center;
}
#isoisvid {
  position: relative;
  border: solid 1px rgb(255, 166, 0);
  width: 525px;
  height: 275px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  background-color: transparent;
  justify-content: center;
  display: block;
}
#isoisvidsource {
  position: relative;
  height: 0px;
  left: 244px;
  top: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
}

#isoisdisplay{
  margin-bottom: 0px;
  justify-content: center;
}
.isois-grid {
  display: grid;
  grid-template-columns: 300px 100px 300px;
  justify-content: center;
  gap: 40px;
  background-color: transparent;
  padding: 30px;
}
#isoisdisplay a:link {color: rgb(167, 81, 0);text-decoration: none;}
#isoisdisplay a:visited {color: rgb(167, 81, 0);text-decoration: none;}
#isoisdisplay a:hover {color: rgb(255, 123, 0);text-decoration: none;}
#isoisdisplay a:active {color: rgb(255, 123, 0);text-decoration: none;}

#instrumentdisplay {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(255, 122, 0);
}
#instrumentdisplay p {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgb(173, 84, 0);
  font-weight: 600;
  letter-spacing: 0px;
  text-align: center;
}
#isoisdisplay span {
  background-color: #00000027;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}
#isoisunits {
  position: relative;
  bottom: 30px;
  left: 260px;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgb(255, 123, 0);
  font-weight: 800;
  letter-spacing: 0.5px;
}
#isoisunits:hover {
  color: rgb(255, 147, 45);
  cursor: pointer;
}
#unitsline {
  position: relative;
  bottom: 30px;
  border: none;
  height: 1px;
  background: rgb(255, 123, 0);
}
#instrumentdisplay h4 {
  position: relative;
  display: none;
  bottom: 25px;
  right: 6px;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: rgb(255, 123, 0);
  font-weight: 500;
  margin-bottom: 2px;
  opacity: 0.8;
  animation: all 1s ease-in-out;
}
.isoisunit {
  animation: all 1s ease-in-out;
}
#instrumentdisplay h4:hover {
  transform: translateX(-2px);
  opacity: 1;
  cursor: pointer;
}
#isoisdescription {
  position: relative;
  bottom: 45px;
  margin: 12px;
}
#isoisinstrument {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 75%;
  justify-content: center;
  display: block;
  text-align: left;
  background-image: url("public/SPC_instrument.jpg");
  background-size: 210px 210px;
  background-position: center;
  background-repeat: no-repeat;
}
#isois_selector {
  position: relative;
  top: 8px;
  left: 8px;
  width: 96px;
}

#positiondisplay2 {
  --l: 300px;
  position: relative;
  height: var(--l);
  transform: scale(1);
  margin-left: auto;
  margin-right: auto;
}
#positiondisplay2 h3 {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
}
#datecontainer2 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#datetxt2{
  text-align: left;
  z-index: 3;
  position: relative;
  bottom: 292px;
  right: 139px;
  color: rgb(255, 122, 0);
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}
#timetxt{
  text-align: left;
  inline-size: 200px; 
  z-index: 3;
  position: relative;
  bottom: 292px;
  right: 139px;
  color: rgb(255, 122, 0);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0px;
}
#orbit_num2 {
  position: relative;
  bottom: 387px;
  left: 100px;
  width: 80px;
}
#locplot2{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  display: flex;
  width: var(--l);
  height: var(--l);
  border: 1px solid rgb(255, 122, 0);
}
#psploc2 {
  position: relative;
  z-index: 4;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.triangle2 {
  position: relative;
  z-index: 4;
  width: 0;
	height: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 16px solid #FF7913;
  transition: all 0.5s;
}
#sunicon2 {
  height: 4.8px;
  width: 4.8px;
  box-shadow: 0px 0px 48px 18px #ffa600c9;
  bottom: 208px;
  left: 9px;
}
#disttxt2 {
  font-size: 10px;
  z-index: 3;
  position: relative;
  text-align: left;
  inline-size: 200px; 
  right: 140px;
  bottom: 81px;
}
#pspspeed {
  font-size: 10px;
  z-index: 3;
  position: relative;
  text-align: left;
  inline-size: 200px; 
  right: 140px;
  bottom: 81px;
}
#isoissource {
  font-size: 11px;
  z-index: 3;
  text-align: center;
  position: relative;
  left: 119px;
  bottom: 102px;
}

#isoiscontrols {
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  justify-content: center;
  display: inline-block;
}
#speedsection2 {
  opacity: 0;
  transition: 200ms all ease;
}
#speedbuttons2 {
  background-color: white;
  height: 0px;
  justify-content: center;
}
#speeddisplay2 {
  position: relative;
  font-size: 12px;
  font-family: "Courier New", monospace;
  z-index: 6;
  top: -2px;
  color: #ffe7d7;
}
#isoisfasterbutton1 {
  left: 50%;
  bottom: 3px;
}
#isoisfasterbutton2 {
  left: 50%;
  bottom: 3px;
}
#isoisslowerbutton1 {
  right: 50%;
  bottom: 3px;
}
#isoisslowerbutton2 {
  right: 50%;
  bottom: 3px;
}
#playbutton2 {
  position: relative;
  margin-top: 10px;
  bottom: 20px;
}
#sliderrr2 {
  position: relative;
  bottom: 0px;
  width: 100px;
  height: 7px;
  border-radius: 1px;  
}
#theslider2 {
  position: relative;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

#canvascontainer {
  display: grid;
  grid-template-columns: 100% 1%;
  margin: 0;
  padding: 0;
}
#THEISOISCANVAS {
  margin-top: 0px;
  padding: 0;
  background-color: black;
}
#fullscreenbuttoncontainer {
  height: 0px;
}
#fullscreenbutton {
  width: 20px;
  height: 20px;
  position: relative;
  right: 300px;
  top: 100px;
  transform: scale(1);
  opacity: 0.8;
  animation: all 3s ease-in-out;
}
#fullscreenbutton:hover {
  opacity: 1;
  transform: scale(1.03);
}
#isoisinfo a:link {color: rgb(255, 194, 80);}
#isoisinfo a:visited {color: rgb(255, 194, 80);}
#isoisinfo a:hover {color: rgb(255, 238, 207);}
#isoisinfo a:active {color: rgb(255, 238, 207);}
#isoisinfo {
  position: relative; 
  width: 50%; 
  margin-left: auto; 
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 20px;
}
#isoisinfo p {
  color: rgb(255, 194, 80);
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
}

/* FIELDS */
#fields {
  text-align: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 150px;
}
#thefields {
  position: relative;
  width: 90%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5vw;
  padding-bottom: 5vw;
  border: solid 4px rgb(0, 217, 177);
  border-radius: 5vw;
}
#fields h1{
  position: relative;
  top: 10px;
  color: rgb(0, 217, 177);
  font-size: 115px;
  font-weight: 800;
  letter-spacing: 0px;
  line-height: 100px;
  padding-bottom: 40px;
}
#fields h2{
  position:relative; 
  bottom: 25px; 
  color: rgb(0, 217, 177); 
  font-size: 14px; 
  font-weight: 400; 
  letter-spacing: 8px;
  line-height: 21px;
  margin-left: 15%;
  margin-right: 15%;
}
#fieldsinstruments {
  position: relative;
  top: 5px;
  right: 5px;
  width: 100%;
  height: 240px;
  background-color: transparent;
  justify-content: center;
  display: block;
}
#fieldsinstrumentsimg {
  width: 100%;
  height: 240px;
  background-image: url("public/FIELDS_instruments_OFF.jpg");
  background-size: 440px 240px;
  background-position: center;
  background-repeat: no-repeat;
}
#fieldsinstrumentsimg:hover {
  width: 100%;
  background-repeat:no-repeat;
  height: 240px;
  background-image: url("public/FIELDS_instruments_ON.jpg");
  background-size: 440px 240px;
  background-position: center;
}

#fieldsdisplay{
  margin-bottom: 0px;
  justify-content: center;
}
.fields-grid {
  display: grid;
  grid-template-columns: 300px 100px 300px;
  justify-content: center;
  gap: 40px;
  background-color: transparent;
  padding: 30px;
}
#fieldsdisplay a:link {color: rgb(240, 240, 240);text-decoration: none;}
#fieldsdisplay a:visited {color: rgb(240, 240, 240);text-decoration: none;}
#fieldsdisplay a:hover {color: #19FFD5;text-decoration: none;}
#fieldsdisplay a:active {color: #19FFD5;text-decoration: none;}

#instrumentdisplay4 {
  width: 300px;
  height: 300px;
  border: 1px solid #19FFD5;
}
#instrumentdisplay4 p {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: white;
  font-weight: 600;
  letter-spacing: 0px;
  text-align: center;
}
#fieldsdisplay span {
  background-color: #00000027;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}
#fieldsunits {
  position: relative;
  bottom: 30px;
  left: 260px;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #0ce7bf;
  font-weight: 800;
  letter-spacing: 0.5px;
}
#fieldsunits:hover {
  color: #00ffd0;
  cursor: pointer;
}
#unitsline4 {
  position: relative;
  bottom: 30px;
  border: none;
  height: 1px;
  background: #19FFD5;
}
#instrumentdisplay4 h4 {
  position: relative;
  display: none;
  bottom: 25px;
  right: 6px;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: #19FFD5;
  font-weight: 500;
  margin-bottom: 2px;
  opacity: 0.8;
  animation: all 1s ease-in-out;
}
.fieldsunit {
  animation: all 1s ease-in-out;
}
#instrumentdisplay4 h4:hover {
  transform: translateX(-2px);
  opacity: 1;
  cursor: pointer;
}
#fieldsdescription {
  position: relative;
  line-height: 15px;
  bottom: 36px;
  margin: 12px;
}
#fieldsinstrument {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 37%;
  justify-content: center;
  display: block;
  text-align: left;
  filter: saturate(0%) brightness(1.4) ;
  background-image: url("public/magnet.png");
  background-size: 25px 25px;
  background-position: center;
  background-repeat: no-repeat;
}
#fields_selector {
  position: relative;
  color: #19FFD5;
  border: 2px solid #19FFD5;
  background: url(public/select_blue.png) no-repeat 89% center;
  background-color: black;
  background-size: 10px 5px;
  top: 8px;
  left: 8px;
  width: 100px;
}

#positiondisplay4 {
  --l: 300px;
  position: relative;
  height: var(--l);
  transform: scale(1);
  margin-left: auto;
  margin-right: auto;
}
#positiondisplay4 h3 {
  color: rgb(240, 240, 240);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
}
#datecontainer4 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#datetxt4{
  text-align: left;
  z-index: 3;
  position: relative;
  bottom: 292px;
  right: 139px;
  color: rgb(240, 240, 240);
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}
#timetxt4{
  text-align: left;
  inline-size: 200px; 
  z-index: 3;
  position: relative;
  bottom: 292px;
  right: 139px;
  color: rgb(240, 240, 240);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0px;
}
#orbit_num4 {
  position: relative;
  color: #19FFD5;
  border: 2px solid #19FFD5;
  background: url(public/select_blue.png) no-repeat 89% center;
  background-color: black;
  background-size: 10px 5px;
  bottom: 390px;
  left: 100px;
  width: 80px;
}
#locplot4{
  position: relative;
  filter: hue-rotate(135deg);
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  display: flex;
  width: var(--l);
  height: var(--l);
  border: 1px solid rgb(255, 122, 0);
}
#psploc4 {
  position: relative;
  z-index: 4;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.triangle4 {
  position: relative;
  z-index: 4;
  width: 0;
	height: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 16px solid #19FFD5;
  transition: all 0.5s;
  opacity: 1;
}
#rline4 {
  position: relative;
  display: block;
  left: 55px;
  bottom: 7.5px;
  height: 2px;
  width: 100px;
  transform: rotate(180deg);
  background: white;
  opacity: 0.9;
}
#tline4 {
  position: relative;
  display: block;
  left: 140px;
  bottom: 20px;
  height: 2px;
  width: 20px;
  transform: rotate(90deg);
  background: white;
  opacity: 0.9;
}
#sunicon4 {
  height: 4.8px;
  width: 4.8px;
  background-color: white;
  box-shadow: 0px 0px 48px 18px rgb(209, 209, 209);
  bottom: 211px;
  left: 9px;
}
#disttxt4 {
  font-size: 10px;
  z-index: 3;
  position: relative;
  text-align: left;
  inline-size: 200px; 
  right: 140px;
  bottom: 85px;
}
#pspspeed4 {
  font-size: 10px;
  z-index: 3;
  position: relative;
  text-align: left;
  inline-size: 200px; 
  right: 140px;
  bottom: 84px;
}
#fieldssource {
  font-size: 11px;
  z-index: 3;
  text-align: center;
  position: relative;
  left: 119px;
  bottom: 105px;
}

#fieldscontrols {
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  justify-content: center;
  display: inline-block;
}
#speedsection4 {
  opacity: 0;
  transition: 200ms all ease;
}
#speedbuttons4 {
  background-color: white;
  height: 0px;
  justify-content: center;
}
#speeddisplay4 {
  position: relative;
  font-size: 12px;
  font-family: "Courier New", monospace;
  z-index: 6;
  top: -2px;
  color: rgb(240, 240, 240);
}
#fieldsfasterbutton1 {
  left: 50%;
  bottom: 3px;
}
#fieldsfasterbutton2 {
  left: 50%;
  bottom: 3px;
}
#fieldsslowerbutton1 {
  right: 50%;
  bottom: 3px;
}
#fieldsslowerbutton2 {
  right: 50%;
  bottom: 3px;
}
#playbutton4 {
  position: relative;
  margin-top: 10px;
  bottom: 20px;
}
#sliderrr4 {
  position: relative;
  bottom: 0px;
  width: 100px;
  height: 7px;
  border-radius: 1px;  
}
#theslider4 {
  position: relative;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

#canvascontainer {
  display: grid;
  grid-template-columns: 100% 1%;
  margin: 0;
  padding: 0;
}
#THEFIELDSCANVAS {
  margin-top: 0px;
  padding: 0;
  background-color: black;
}


#fieldsinfo a:link {color: rgb(255, 106, 56);;}
#fieldsinfo a:visited {color: rgb(255, 106, 56);}
#fieldsinfo a:hover {color: rgb(255, 162, 116);}
#fieldsinfo a:active {color: rgb(255, 162, 116);}
#fieldsinfo {
  position: relative; 
  width: 70%; 
  margin-left: auto; 
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 20px;
}
#fieldsinfo p {
  color: white;
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
}

#acknowledgments a:link {color: rgb(173, 84, 0);}
#acknowledgments a:visited {color: rgb(173, 84, 0);}
#acknowledgments a:hover {color: rgb(255, 123, 0);}
#acknowledgments a:active {color: rgb(255, 123, 0);}
#acknowledgments {
  background-color: #181818;
  padding-top: 60px;
  padding-bottom: 80px;
  margin-top: 50px;
  border-top: 1px dashed #ff8400;
}
#acknowledgments h1 {
  position: relative;
  text-align: left;
  color: #ff8400;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-left: 6%;
  margin-bottom: 3px;
}
#bottomline {
  position: relative;
  height: 1.5px;
  width: 88%;
  margin-left: auto;
  margin-right: auto;
  border: none;
  background: #ff8400;
}
#sdoacknowledgments {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-top: 15px;
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 10px;
}
#pspacknowledgments {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-top: 15px;
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 10px;
}
#wispracknowledgments {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-top: 15px;
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 10px;
}
#sweapacknowledgments {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 10px;
}
#fieldsacknowledgments {
  color: rgb(173, 84, 0);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6%;
  margin-right: 6%;
}

#github a:link {color: rgb(89, 89, 89); font-family: "Lucida Console", monospace;}
#github a:visited {color: rgb(89, 89, 89);}
#github a:hover {color: rgb(216, 216, 216);}
#github a:active {color: rgb(216, 216, 216);}
#github {
  background-color: #181818;
  position: relative;
  text-align: center;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 50px;
}
#github .p{
  font-family: "Lucida Console", "Courier New", monospace;
}

#fixedoverlay {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%; 
  box-shadow: 10px 30px 55px black inset, -10px -30px 55px black inset;
}