html {
/* overflow-y: scroll; */
  margin: 0;
  padding: 0;
  height: 100%;
/*
  background-color: lightblue;
  background-color: ivory;
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
*/
  background-color: black;
}

.hide {
  display: none;
}

.myDIV:hover + .hide {
  display: block;
  color: white;
}

#myDIV, #myDIV1, #myDIV2 {
  width: 100%;
  /*
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  */
  display: none;
  background-color: black;
  margin-top: 20px;
}

body {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 35px;
  /*background-color: lightblue;*/
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  /* border: solid blue; */
  border: hidden;
  border-width: thin;
  font-family: 'Courier New', monospace;
}

footer {
  text-align: center;
  padding: 5px;
  /* background-color: DarkSalmon; */
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
}

#myVideo {
  /* position: fixed; */
  right: 0;
  bottom: 0;
  width: 100%;
  background-size: cover;
}

.content {
  /* position: absolute; */
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  width: 90%;
  /*padding: 20px;*/
  margin-top: 0px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin-left: 5px;
}
.content_ {
  /* position: absolute; */
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  width: 90%;
  /*padding: 20px;*/
  margin-top: 0px;
  margin-bottom: 5px;
  margin-right: 2px;
  margin-left: 2px;
}
* {
   box-sizing: border-box;
}

a {
  /* color: #ff6060; */
  color: yellow; 
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

details > summary {
  /* padding: 1px; */
  /* width: 250px; */
  /* height: 100vh; */
  width: 100vw;
  margin: auto;
  /* background-color: #eeeeee; */
  /* background-color: lightblue; */
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  border: none;
  cursor: crosshair;
}

details > p {
  /* background-color: #eeeeee; */
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  /* background-color: lightblue; */
  padding: 1px;
  max-width: 100vw ; /* 500px;*/
  margin: auto;
  /*
  left-margin: 4;
  right-margin: 4;
  */
  box-shadow: 0px 0px 0px #bbbbbb;
  font-family: 'Courier New', monospace;
  /* font-size: 12pt; */
}

table, th, td {
  /*border: 1px solid black;*/
  border-collapse: collapse;
  font-size: 13px;
  color: black; 
  /*height: 100vh; */
  width: 100%;
  /* padding: 4px; */
  /*
  margin: auto;
  left-margin: 4;
  right-margin: 4;
  */
}

/* th, td { padding: 5px; text-align: left; } */

#blue
  {
    background-color: blue;
  }
#orange
  {
    background-color: orange;
  }
#lgreen
  {
    background-color: #90EE90;
  }
#green
  {
    background-color: green; 
  }
#yellow
  {
    background-color: yellow;
  }
#magenta
  {
    background-color: magenta;
  }


/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 50%;
  height: 300px; /* only for demonstration, should be removed */
  /* background: #ccc; */
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  /* background-color: #f1f1f1; */
  background: rgba(0, 0, 0, 0.05);
  color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
/* @media (max-width: 600px) { */
@media {
  nav, article {
    width: 100%;
    height: auto;
  }
.main-wrapper {
  display: flex;
  /* position: absolute; */
  transform-style: preserve-3d;
  perspective: 400px;
/*
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
*/
  align-items: center;
  justify-content: center;
}

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  -webkit-animation: rotate3d 10s linear infinite;
          animation: rotate3d 10s linear infinite;
}

.plane {
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.spoke {
  transform-origin: 0 0;
  transform-style: preserve-3d;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 0px;
}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  left: -3px;
  top: 100%;
  transform: rotateX(90deg);
}

.spoke.spoke-1 {
  transform: rotateZ(10deg);
}
.spoke.spoke-2 {
  transform: rotateZ(20deg);
}
.spoke.spoke-3 {
  transform: rotateZ(30deg);
}
.spoke.spoke-4 {
  transform: rotateZ(40deg);
}
.spoke.spoke-5 {
  transform: rotateZ(50deg);
}
.spoke.spoke-6 {
  transform: rotateZ(60deg);
}
.spoke.spoke-7 {
  transform: rotateZ(70deg);
}
.spoke.spoke-8 {
  transform: rotateZ(80deg);
}
.spoke.spoke-9 {
  transform: rotateZ(90deg);
}
.spoke.spoke-10 {
  transform: rotateZ(100deg);
}
.spoke.spoke-11 {
  transform: rotateZ(110deg);
}
.spoke.spoke-12 {
  transform: rotateZ(120deg);
}
.spoke.spoke-13 {
  transform: rotateZ(130deg);
}
.spoke.spoke-14 {
  transform: rotateZ(140deg);
}
.spoke.spoke-15 {
  transform: rotateZ(150deg);
}
.spoke.spoke-16 {
  transform: rotateZ(160deg);
}
.spoke.spoke-17 {
  transform: rotateZ(170deg);
}
.spoke.spoke-18 {
  transform: rotateZ(180deg);
}
.spoke.spoke-19 {
  transform: rotateZ(190deg);
}
.spoke.spoke-20 {
  transform: rotateZ(200deg);
}
.spoke.spoke-21 {
  transform: rotateZ(210deg);
}
.spoke.spoke-22 {
  transform: rotateZ(220deg);
}
.spoke.spoke-23 {
  transform: rotateZ(230deg);
}
.spoke.spoke-24 {
  transform: rotateZ(240deg);
}
.spoke.spoke-25 {
  transform: rotateZ(250deg);
}
.spoke.spoke-26 {
  transform: rotateZ(260deg);
}
.spoke.spoke-27 {
  transform: rotateZ(270deg);
}
.spoke.spoke-28 {
  transform: rotateZ(280deg);
}
.spoke.spoke-29 {
  transform: rotateZ(290deg);
}
.spoke.spoke-30 {
  transform: rotateZ(300deg);
}
.spoke.spoke-31 {
  transform: rotateZ(310deg);
}
.spoke.spoke-32 {
  transform: rotateZ(320deg);
}
.spoke.spoke-33 {
  transform: rotateZ(330deg);
}
.spoke.spoke-34 {
  transform: rotateZ(340deg);
}
.spoke.spoke-35 {
  transform: rotateZ(350deg);
}
.plane.plane-1 {
  transform: rotateY(15deg);
}
.plane.plane-2 {
  transform: rotateY(30deg);
}
.plane.plane-3 {
  transform: rotateY(45deg);
}
.plane.plane-4 {
  transform: rotateY(60deg);
}
.plane.plane-5 {
  transform: rotateY(75deg);
}
.plane.plane-6 {
  transform: rotateY(90deg);
}
.plane.plane-7 {
  transform: rotateY(105deg);
}
.plane.plane-8 {
  transform: rotateY(120deg);
}
.plane.plane-9 {
  transform: rotateY(135deg);
}
.plane.plane-10 {
  transform: rotateY(150deg);
}
.plane.plane-11 {
  transform: rotateY(165deg);
}
.spoke-0 .dot,
.spoke-36 .dot {
  -webkit-animation: pulsate 0.5s infinite 0s alternate both;
          animation: pulsate 0.5s infinite 0s alternate both;
  background-color: #ff9955;
}
.spoke-1 .dot,
.spoke-35 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.05555556s alternate both;
          animation: pulsate 0.5s infinite 0.05555556s alternate both;
  background-color: #ffb555;
}
.spoke-2 .dot,
.spoke-34 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.11111111s alternate both;
          animation: pulsate 0.5s infinite 0.11111111s alternate both;
  background-color: #ffd255;
}
.spoke-3 .dot,
.spoke-33 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.16666667s alternate both;
          animation: pulsate 0.5s infinite 0.16666667s alternate both;
  background-color: #ffee55;
}
.spoke-4 .dot,
.spoke-32 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.22222222s alternate both;
          animation: pulsate 0.5s infinite 0.22222222s alternate both;
  background-color: #f4ff55;
}
.spoke-5 .dot,
.spoke-31 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.27777778s alternate both;
          animation: pulsate 0.5s infinite 0.27777778s alternate both;
  background-color: #d7ff55;
}
.spoke-6 .dot,
.spoke-30 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.33333333s alternate both;
          animation: pulsate 0.5s infinite 0.33333333s alternate both;
  background-color: #bbff55;
}
.spoke-7 .dot,
.spoke-29 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.38888889s alternate both;
          animation: pulsate 0.5s infinite 0.38888889s alternate both;
  background-color: #9fff55;
}
.spoke-8 .dot,
.spoke-28 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.44444444s alternate both;
          animation: pulsate 0.5s infinite 0.44444444s alternate both;
  background-color: #82ff55;
}
.spoke-9 .dot,
.spoke-27 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.5s alternate both;
          animation: pulsate 0.5s infinite 0.5s alternate both;
  background-color: #66ff55;
}
.spoke-10 .dot,
.spoke-26 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.55555556s alternate both;
          animation: pulsate 0.5s infinite 0.55555556s alternate both;
  background-color: #55ff60;
}
.spoke-11 .dot,
.spoke-25 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.61111111s alternate both;
          animation: pulsate 0.5s infinite 0.61111111s alternate both;
  background-color: #55ff7d;
}
.spoke-12 .dot,
.spoke-24 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.66666667s alternate both;
          animation: pulsate 0.5s infinite 0.66666667s alternate both;
  background-color: #55ff99;
}
.spoke-13 .dot,
.spoke-23 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.72222222s alternate both;
          animation: pulsate 0.5s infinite 0.72222222s alternate both;
  background-color: #55ffb5;
}
.spoke-14 .dot,
.spoke-22 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.77777778s alternate both;
          animation: pulsate 0.5s infinite 0.77777778s alternate both;
  background-color: #55ffd2;
}
.spoke-15 .dot,
.spoke-21 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.83333333s alternate both;
          animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}
.spoke-16 .dot,
.spoke-20 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.88888889s alternate both;
          animation: pulsate 0.5s infinite 0.88888889s alternate both;
  background-color: #55f4ff;
}
.spoke-17 .dot,
.spoke-19 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.94444444s alternate both;
          animation: pulsate 0.5s infinite 0.94444444s alternate both;
  background-color: #55d7ff;
}
.spoke-18 .dot,
.spoke-18 .dot {
  -webkit-animation: pulsate 0.5s infinite 1s alternate both;
          animation: pulsate 0.5s infinite 1s alternate both;
  background-color: #55bbff;
}
@-webkit-keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

@keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}