// remove default link styling (e.g. underline, blue color, purple color (visited), etc.)
a,
a:link,
a:visited,
a:hover,
a:active,
a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

/* APEX CHARTS */
#apexchartschart-datetime-production-impact .apexcharts-marker {
  cursor: pointer !important;
}

/* (WIP: ANIMATIONS) */
/* SUN ANIMATION (POD BACKGROUND) */
.sun-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
  overflow: hidden;
  background-color: #a6eaff; /* light blue */
  opacity: 40%;
}

.sun {
  /* width: 10rem;
  height: 10rem;
  margin: 3rem auto;
  position: relative;
  background: radial-gradient(transparent 50%, white), radial-gradient(yellow, transparent 70%);
  -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 65%);
  mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 65%);
  border-radius: 50%; */

  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -4rem;
  margin-top: -4rem;
  /* margin: 1rem; */
  background: radial-gradient(transparent 50%, white), radial-gradient(yellow, transparent 70%);
  -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 65%);
  mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 65%);
  border-radius: 50%;

  &::after,
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 65%);
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 65%);
  }

  &::before {
    background: repeating-conic-gradient(from 0deg, yellow 0deg 20deg, transparent 20deg 40deg);
    animation: rotate 720s linear, scale 3s linear infinite;
    /* animation: rotate 1080s linear, scale 4.5s linear infinite; */
    /* animation: rotate 1440s linear, scale 6s linear infinite; */
  }

  &::after {
    background: radial-gradient(yellow, orange 27%, transparent calc(27% + 3px) 100%),
      radial-gradient(gold, transparent 70%),
      repeating-conic-gradient(from 0deg, gold 0deg 5deg, transparent 5deg 10deg);
    transform: rotate(15deg);
    animation: rotate 360s linear;
    /* animation: rotate 540s linear; */
    /* animation: rotate 720s linear; */
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* CLOUD ANIMATION */
.cloud-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  overflow: hidden;
  opacity: 50%;
}

.cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/cloud.png') repeat-x;
  animation: animate 360s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -5440px;
  }
}

/* RAIN ANIMATION */
.rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
}

.rains {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rains span {
  position: absolute;
  width: 1px;
  height: 180px;
  background: #fff;
  opacity: 0.4;
}

span.rain-light {
  opacity: 0.2;
  animation-duration: 15s;
}

span.rain-moderate {
  opacity: 0.2;
  animation-duration: 10s;
}

span.rain-heavy {
  opacity: 0.4;
  animation-duration: 5s;
}

/* Rain initial positions and animations */
.rains span:nth-child(1) {
  left: 5%;
  top: -190px;
  animation: rain-anim 10s infinite;
}
.rains span:nth-child(2) {
  left: 10%;
  top: -180px;
  animation: rain-anim 11s infinite;
}
.rains span:nth-child(3) {
  left: 15%;
  top: -170px;
  animation: rain-anim 8s infinite;
}
.rains span:nth-child(4) {
  left: 20%;
  top: -160px;
  animation: rain-anim 12s infinite;
}
.rains span:nth-child(5) {
  left: 25%;
  top: -150px;
  animation: rain-anim 10s infinite;
}
.rains span:nth-child(6) {
  left: 30%;
  top: -150px;
  animation: rain-anim 11s infinite;
}
.rains span:nth-child(7) {
  left: 35%;
  top: -160px;
  animation: rain-anim 13s infinite;
}
.rains span:nth-child(8) {
  left: 40%;
  top: -170px;
  animation: rain-anim 7s infinite;
}
.rains span:nth-child(9) {
  left: 45%;
  top: -180px;
  animation: rain-anim 9s infinite;
}
.rains span:nth-child(10) {
  left: 50%;
  top: -190px;
  animation: rain-anim 11s infinite;
}
.rains span:nth-child(11) {
  left: 55%;
  top: -190px;
  animation: rain-anim 10s infinite;
}
.rains span:nth-child(12) {
  left: 60%;
  top: -180px;
  animation: rain-anim 6s infinite;
}
.rains span:nth-child(13) {
  left: 65%;
  top: -170px;
  animation: rain-anim 14s infinite;
}
.rains span:nth-child(14) {
  left: 70%;
  top: -160px;
  animation: rain-anim 12s infinite;
}
.rains span:nth-child(15) {
  left: 75%;
  top: -150px;
  animation: rain-anim 10s infinite;
}
.rains span:nth-child(16) {
  left: 80%;
  top: -150px;
  animation: rain-anim 14s infinite;
}
.rains span:nth-child(17) {
  left: 85%;
  top: -160px;
  animation: rain-anim 8s infinite;
}
.rains span:nth-child(18) {
  left: 90%;
  top: -170px;
  animation: rain-anim 9s infinite;
}
.rains span:nth-child(19) {
  left: 95%;
  top: -180px;
  animation: rain-anim 11s infinite;
}
.rains span:nth-child(20) {
  left: 100%;
  top: -190px;
  animation: rain-anim 13s infinite;
}

/* Animation keyframes */
@keyframes rain-anim {
  0% {
    transform: translate(0px, 0px);
  }
  4% {
    transform: translate(0px, 600px);
  }
  5% {
    transform: translate(200px, 0px);
  }
  9% {
    transform: translate(200px, 600px);
  }
  10% {
    transform: translate(-100px, 0px);
  }
  14% {
    transform: translate(-100px, 600px);
  }
  15% {
    transform: translate(-200px, 0px);
  }
  19% {
    transform: translate(-200px, 600px);
  }
  20% {
    transform: translate(100px, 0px);
  }
  24% {
    transform: translate(100px, 600px);
  }
  25% {
    transform: translate(-150px, 0px);
  }
  29% {
    transform: translate(-150px, 600px);
  }
  30% {
    transform: translate(-80px, 0px);
  }
  34% {
    transform: translate(-80px, 600px);
  }
  35% {
    transform: translate(150px, 0px);
  }
  39% {
    transform: translate(150px, 600px);
  }
  40% {
    transform: translate(-60px, 0px);
  }
  44% {
    transform: translate(-60px, 600px);
  }
  45% {
    transform: translate(90px, 0px);
  }
  49% {
    transform: translate(90px, 600px);
  }
  50% {
    transform: translate(60px, 0px);
  }
  54% {
    transform: translate(60px, 600px);
  }
  55% {
    transform: translate(-60px, 0px);
  }
  59% {
    transform: translate(-60px, 600px);
  }
  60% {
    transform: translate(-40px, 0px);
  }
  64% {
    transform: translate(-40px, 600px);
  }
  65% {
    transform: translate(40px, 0px);
  }
  69% {
    transform: translate(40px, 600px);
  }
  70% {
    transform: translate(-20px, 0px);
  }
  74% {
    transform: translate(-20px, 600px);
  }
  75% {
    transform: translate(-110px, 0px);
  }
  79% {
    transform: translate(-110px, 600px);
  }
  80% {
    transform: translate(20px, 0px);
  }
  84% {
    transform: translate(20px, 600px);
  }
  85% {
    transform: translate(-20px, 0px);
  }
  89% {
    transform: translate(-20px, 600px);
  }
  90% {
    transform: translate(50px, 0px);
  }
  99% {
    transform: translate(50px, 600px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}