* {
  box-sizing: content-box;
}

body {
  padding: 0;
  margin: 0;
  transition: background-color 2s, filter 2s;
  /* filter: invert(0); */
}

body.dark {
  background-color: #333;
}

#canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -99;
  opacity: 0;
  transition: opacity 1s;
}

#canvas.raining {
  opacity: 1;
  transition: opacity 1s;
}

.darkmode {
  background-color: black
    /*rgb(20, 20, 25)*/
  ;
  filter: invert();
}

.remote {
  padding: 10px;
  position: fixed;
  /* border: 1px solid; */
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.remote button {
  box-sizing: border-box;
  width: 200px;
  padding: 5px 10px;
  margin-top: 8px;
  border: 2px solid #333;
  background-color: white;
}
.remote>button {
  margin-left:-300px;
  transition: margin-left .6s;
}

#minimize>button {
  background-color: #333;
  color:white;
  transition: filter 2s;
}

.remote>button.show {
  margin-left:0;
  transition: margin-left .6s, filter 2s;
}

.remote button:hover {
  cursor: pointer;
}
.remote button:active {
  background-color: rgb(232, 232, 232);
}


.dot {
  position: fixed;
  top: 50vh;
  left: 50vw;
  width: 50px;
  height: 50px;
  background-color: #333;
  transition: transform 1s ease-in-out, height 2s ease-in-out,  filter 2s;
}
.dot audio {
  display: none;
}
.dot .umbrella {
  position:absolute;
  left:50%;
  width: 10px;
  transform: translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
  transition: width .2s, transform .3s;
}
.umbrella.openUmbrella {
  width: 200px;
  transform: translate(-50%, -80%);
}
.dot .background {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%) 0 0/100% 200%;
  animation: rainbow 7s linear infinite;
  opacity: 0;
  transition: opacity .5s;
}

.background.rainbow {
  opacity: 1;
}

@keyframes rainbow {
  to {
    background-position: 0 -200%
  }
}

.bigger {
  transform: scale(300%);
}

.round {
  border-radius: 500px;
}



/* ---------- Container for the orbiting circles animation ---------- */
.circle-orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 300px;
  width: 300px;
  transform: translate(-50%, -50%) scale(0);

  transition: transform .5s;
}

.satellites {
  transition: transform .5s;
  transform: translate(-50%, -50%) scale(120%);
}

/* ---------- Inner orbit - This is the circles closest to the central point ---------- */
#inner-orbit {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  border: 1px dashed #333;
  border-radius: 100%;
  -webkit-animation: spin-right 10s linear infinite;
  animation: spin-right 10s linear infinite;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-cirlces {
  position: absolute;
  top: 62px;
  left: -6px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: #333;
}

/* ---------- Middle orbit - This is the circles second closest to the central point ---------- */
#middle-orbit {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 225px;
  height: 225px;
  border: 1px dashed #333;
  border-radius: 100%;
  -webkit-animation: spin-right 15s linear infinite;
  animation: spin-right 15s linear infinite;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.middle-orbit-cirlces {
  position: absolute;
  top: 25px;
  left: 17px;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: #333;
}

/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border: 1px dashed #333;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}

/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-cirlces {
  position: absolute;
  top: -17px;
  left: 125px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: #333;
}

/* ---------- Animation ---------- */
@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.dot.draggable:hover {
  cursor: grab;
}

.dot.draggable:active {
  cursor: grabbing;
}

.blurrylight {
  filter: blur(8px);
}
.blurrydark {
  filter: invert() blur(8px);
}

#removeDots {
  display: none;
}