@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);

/*** Globe: Unkown Artist
Clip: Samsara Film Track: Shpongle
Solar System: Unknown Artist
Particle: Sladjan Ilic ***/

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  animation: slide 90s alternate infinite;
}

@keyframes slide {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes typewriter {
  0% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

@keyframes moveAndTilt {
  0% {
      transform: translateX(-150px) rotate(0deg); /* Start off-screen on the left */
  }
  50% {
      transform: translateX(50vw) rotate(40deg); /* Move to the right edge and tilt */
  } 
  100% {
      transform: translateX(100vw) rotate(20deg); /* Move to the right edge and tilt */
  }
}

.page {
  color: rgba(21, 184, 132, 0.873); /* Change this to your desired color */
  font-family: "Homenaje", sans-serif;
  font-size: 48px; /* Adjust the font size as needed */
  position: fixed;
  display: flex; /* Use flexbox to align spans horizontally */
  justify-content: center; /* Center the text horizontally */
  perspective: 1000px; /* Apply perspective to create a 3D effect */
  z-index:2;
}

.page span {
  opacity: 0; /* Initially hidden */
  display: inline-block; /* Make span inline-block to apply transformations */
  animation: typewriter 2s ease-in-out infinite; /* Animation duration, easing, and setting it to run infinitely */
}

.page span:nth-child(1) { animation-delay: 0s; }
.page span:nth-child(2) { animation-delay: 0.3s; }
.page span:nth-child(3) { animation-delay: 0.6s; }
.page span:nth-child(4) { animation-delay: 0.9s; }
.page span:nth-child(5) { animation-delay: 1.2s; }
.page span:nth-child(6) { animation-delay: 1.5s; }
.page span:nth-child(7) { animation-delay: 1.8s; }
.page span:nth-child(8) { animation-delay: 2.1s; }
.page span:nth-child(9) { animation-delay: 2.4s; }
.page span:nth-child(10) { animation-delay: 2.7s; }

#chartdiv {
  width: 100%;
  height: 1500px;
  max-width:150%;
  background-color:rgba(0, 0, 0, 0.123);
}

.date {
  display:block;
  color: #303030;
  margin:10px;
  font-size: 20px;
}

.title{
  color: #1377BD;
  font-size: 16px;
  margin: 4px;
  font-weight:500;
}

.title:hover {
  text-decoration: none !important;
}

.content{
  display:block;
  color: #303030;
  margin:4px;
  font-weight:300;
}

.container{
  max-width:100%;
  height: auto;
}

.icon-title{
    display: flex;
    align-items: center;
}

.list {
  list-style-type:none;
}

.item {
    margin-top:10px;
    margin-bottom:10px;
}

@keyframes orbit {
  from {
      transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
      transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

.iframe-container {
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
}

.container-kal{
  max-width: 100;
  animation: fadeOut 10s infinite;
  z-index: 100;
}

#myFrame {
  width: 100%;
  height: 500px;
  border: 2px solid #000;
}

*, 
    *:before, 
    *:after { 
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
    } 

    .pendulum-base { 
        width: 900px; 
        height: 100px; 
        margin: auto; 
        border-top: 6px solid #66d63e; 
        position: absolute;
        top: 10px;
        right: 100px;
    } 

    .pendulum { 
        position: absolute; 
        right: 50%; 
        transform: translate(-50%) rotate(20deg); 
        width: 2px; 
        height: 150px; 
        background: #b5ff9a; 
        animation: moveIt 1.5s ease-in-out infinite; 
        transform-origin: 50% 0; 
    } 

    .pendulum:nth-of-type(2) { 
        height: 160px; 
        animation-duration: 1.52s; 
    } 

    .pendulum:nth-of-type(3) { 
        height: 170px; 
        animation-duration: 1.54s; 
    } 

    .pendulum:nth-of-type(4) { 
        height: 180px; 
        animation-duration: 1.56s; 
    } 

    .pendulum:nth-of-type(5) { 
        height: 190px; 
        animation-duration: 1.58s; 
    } 

    .pendulum:nth-of-type(6) { 
        height: 200px; 
        animation-duration: 1.6s; 
    } 

    .pendulum:nth-of-type(7) { 
        height: 210px; 
        animation-duration: 1.62s; 
    } 

    .pendulum:nth-of-type(8) { 
        height: 220px; 
        animation-duration: 1.64s; 
    } 

    .pendulum:nth-of-type(9) { 
        height: 230px; 
        animation-duration: 1.66s; 
    } 

    .pendulum:nth-of-type(10) { 
        animation-duration: 1.68s; 
        height: 240px; 
    } 

    .pendulum:nth-of-type(11) { 
        animation-duration: 1.7s; 
        height: 250px; 
    } 

    .pendulum:nth-of-type(12) { 
        height: 260px; 
        animation-duration: 1.72s; 
    } 

    .pendulum:nth-of-type(13) { 
        height: 270px; 
        animation-duration: 1.74s; 
    } 

    .pendulum:nth-of-type(14) { 
        height: 280px; 
        animation-duration: 1.76s; 
    } 

    .pendulum:nth-of-type(15) { 
        height: 290px; 
        animation-duration: 1.78s; 
    } 

    @keyframes moveIt { 
        0%, 
        100% { 
            transform: translate(-50%) rotate(25deg); 
        } 

        50% { 
            transform: translate(-50%) rotate(-25deg); 
        } 
    } 

    .pendulum:before { 
        content: ""; 
        position: absolute; 
        border-radius: 50%; 
        transform: translate(-50%); 
        left: 50%; 
        top: 100%; 
        width: 15px; 
        height: 15px; 
        background:  
          radial-gradient(circle at 70% 35%,  
            white, #66d63e 30%, #40a31d 50%); 
    } 

    .pendulum:after { 
        content: ""; 
        position: absolute; 
        left: 50%; 
        transform: translate(-50%); 
        top: 115%; 
        border-radius: 50%; 
        filter: blur(5px); 
        width: 25px; 
        height: 3px; 
        background: rgba(0, 0, 0, 0.3); 
    }
    .image-container {
      position: relative;
      width: 100%;
      height: 100px; /* Adjust this to the height you want */
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    }  
    
    .image-container img {
      width: 100px; /* Starting width of the images */
      transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      animation: rotate 10s linear infinite;
    }
    

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    :root {
      --pov: 66deg;
      --bg-color: #111;
      --day-duration: 8s;
      --sunlight-offset: -2.5s;
      --orbit-sphere-color: hsla(253, 89%, 18%, 0.6);
      --orbit-line-color: hsl(120, 3%, 13%);
      --orbit-line-thickness: .15rem;
      --orbit-plane-color: radial-gradient(
        circle at center,
        hsla(250, 70%, 75%, .05),
        hsla(250, 70%, 75%, .2)
      );
      --moon-orbit-size: 113dvmin;
      --mercury-orbit-size: 126dvmin;
      --venus-orbit-size: 139dvmin;
      --sun-orbit-size: 152dvmin;
      --mars-orbit-size: 165dvmin;
      --jupiter-orbit-size: 178dvmin;
      --saturn-orbit-size: 191dvmin;
     
    }

    @keyframes self-rotate {
      from {
        transform: rotateY(0deg);
      }
      to {
        transform: rotateY(360deg);
      }
    }
    
    
    .universe {
      height: 100%;
      perspective: 50000px;
      translate: 0 -5%;
      position: relative;
      /* animation: self-rotate 4s linear infinite; */
      /* transform-style: preserve-3d; */
    }

/* orbit line */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 30dvmin);
  height: var(--size, 30dvmin);
  border-radius: 50%;
  background: var(--orbit-plane-color);
  box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
  transform-style: preserve-3d;
  rotate: x var(--pov);
  translate: -50% -40%;
  opacity: 0;
  animation: orbit-appear 10.5s var(--enter-delay, .1s) forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes orbit-appear {
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

/* orbit semi-sphere */
.orbit::after {
  --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
  content: "";
  position: absolute;
  top: -75%;
  left: calc(-1 * var(--orbit-line-thickness));
  width: calc(100% + var(--orbit-line-thickness) * 2);
  height: 250%;
  background: radial-gradient(
    circle var(--cutout) at center,
    #0000 99.9%,
    var(--orbit-sphere-color)
  );
  border-radius: 50%;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.orbit.moon {
  --size: var(--moon-orbit-size);
  --enter-delay: 1s;
}

.orbit.mercury {
  --size: var(--mercury-orbit-size);
  --enter-delay: 2.5s;
}

.orbit.venus {
  --size: var(--venus-orbit-size);
  --enter-delay: 4s;
  animation-duration: 60s;
}

.orbit.sun {
  --size: var(--sun-orbit-size);
  --enter-delay: 5.5s;
}

.orbit.mars {
  --size: var(--mars-orbit-size);
  --enter-delay: 7s;
}

.orbit.jupiter {
  --size: var(--jupiter-orbit-size);
  --enter-delay: 8.5s;
}

.orbit.saturn {
  --size: var(--saturn-orbit-size);
  --enter-delay: 10s;
}

.body, .body-container {
  --circular-ease: cubic-bezier(.37, 0, .63, 1);
  --circle-delay: calc(var(--day-duration) / 3.97);
  --reveal-delay: 1s;
  content: "";
  position: absolute;
  left: calc(50% + var(--astronomical-unit));
  top: 0;
  opacity: 0;
  translate: -50% calc(-50% - (50% * sin(var(--pov))));
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at center,
    var(--color-1, darkgray),
    var(--color-2, #333) 70%
  );
  background-size: 300%;
  background-position: center;
  border-radius: 50%;
  animation:
    body-reveal
      1.5s var(--reveal-delay) forwards,
    body-index
      var(--day-duration) -1s infinite,
    body-shine
      var(--day-duration)
      var(--shine-delay, 0s)
      linear infinite,
    body-move-x
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay))
      infinite var(--circular-ease),
    body-move-y
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay) - var(--circle-delay))
      infinite var(--circular-ease);
}

@keyframes body-reveal {
  to {
    top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    opacity: 1;
  }
}

@keyframes body-index {
  25%, 66% {
    z-index: var(--inverse-index);
  }
  67% {
    z-index: 0;
  }
}

@keyframes body-shine {
  to {
    background-position-x: -100%;
  }
}

@keyframes body-move-x {
  50% {
    left: calc(50% - var(--astronomical-unit));
  }
}

@keyframes body-move-y {
  50% {
    top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
  }
}

.body.earth {
  --size: 4dvmin;
  --color-1: skyblue;
  --color-2: mediumblue;
  --astronomical-unit: 0%;
  --inverse-index: 8;
  --shine-delay: calc(
    var(--sunlight-offset) +
    var(--variation-delay, 0s) -
    var(--reveal-delay)
  );
  animation:
    body-reveal 1s var(--reveal-delay) forwards,
    body-index var(--day-duration) -1s infinite,
    body-shine
      var(--day-duration)
      var(--shine-delay)
      linear infinite;
}

@keyframes float-y {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5dvmin); /* move up */
  }
  100% {
    transform: translateY(0); /* back to original */
  }
}


@keyframes erraticOrbit {
  0% {
    transform: rotate(0deg) translateX(10dvmin) rotate(0deg);
  }
  25% {
    transform: rotate(90deg) translateX(8dvmin) rotate(-90deg);
  }
  50% {
    transform: rotate(180deg) translateX(12dvmin) rotate(-180deg);
  }
  75% {
    transform: rotate(270deg) translateX(9dvmin) rotate(-270deg);
  }
  100% {
    transform: rotate(360deg) translateX(10dvmin) rotate(-360deg);
  }
}

.body.moon {
  --size: 2dvmin;
  --color-1: #eee;
  --color-2: #333;
  --astronomical-unit: calc(var(--moon-orbit-size) / 2);
  --inverse-index: 7;
  --shine-delay: calc(
    var(--sunlight-offset) +
    var(--variation-delay, 0s) -
    var(--reveal-delay)
  );
}

.body.mercury {
  --size: 2dvmin;
  --color-1: #fea;
  --color-2: #530;
  --astronomical-unit: calc(var(--mercury-orbit-size) / 2);
  --inverse-index: 6;
  --orbit-offset: 4s;
  --variation-delay: -1s;
  --shine-delay: calc(
    var(--sunlight-offset) +
    var(--variation-delay, 0s) -
    var(--reveal-delay)
  );
}

.body.venus {
  --size: 4dvmin;
  --color-1: #fea;
  --color-2: #650;
  --astronomical-unit: calc(var(--venus-orbit-size) / 2);
  --inverse-index: 5;
  --variation-delay: -3s;
  --shine-delay: -2.5s;
}

.body.sun {
  --size: 6dvmin;
  --color-1: yellow;
  --color-2: orangered;
  --astronomical-unit: calc(var(--sun-orbit-size) / 2);
  --inverse-index: 4;
  --variation-delay: -2.5s;
  box-shadow: 0 0 2rem orange;
  /* all animations except shine */
  animation:
    body-reveal
      1.5s var(--reveal-delay) forwards,
    body-index
      var(--day-duration) -1s infinite,
    body-move-x
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay))
      infinite var(--circular-ease),
    body-move-y
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay) - var(--circle-delay))
      infinite var(--circular-ease);
}

.body.sun::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from 45deg at center,
    #fd03 0deg 5deg,
    transparent 7deg 17deg,
    #fa03 19deg 24deg,
    transparent 26deg 36deg
  );
  mix-blend-mode: overlay;
  filter: blur(.1rem);
  border-radius: 50%;
}

.body.mars {
  --size: 3dvmin;
  --color-1: darkorange;
  --color-2: #750;
  --astronomical-unit: calc(var(--mars-orbit-size) / 2);
  --inverse-index: 3;
  --variation-delay: -7s;
  --shine-delay: -3.5s;
}

.body.jupiter {
  --size: 5dvmin;
  --color-1: #fea;
  --color-2: #321;
  --astronomical-unit: calc(var(--jupiter-orbit-size) / 2);
  --inverse-index: 2;
  --variation-delay: -6s;
  --shine-delay: -3s;
}

.body-container.saturn {
  --size: 5dvmin;
  --color-1: #fea;
  --color-2: #531;
  --astronomical-unit: calc(var(--saturn-orbit-size) / 2);
  --inverse-index: 1;
  --variation-delay: -1.5s;
  --shine-delay: -6s;
  --ring-a-size: 180%;
  --ring-a-color: var(--color-1);
  --ring-b-size: 200%;
  --ring-b-color: var(--color-1);
}

/* Duplicated planet body inside container to obscure rings */
.body-container.saturn .body-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
}

/*
 * Split each ring in half,
 * so that one half can be obscured by the planet body
 * Fixing the z-index problem with pseudo-elements
 */
.body-container.saturn::before,
.body-container.saturn::after,
.body-container.saturn .ring-far {
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: x var(--pov);
  border-radius: 50%;
}

.body-container.saturn::before,
.body-container.saturn::after {
  content: "";
  z-index: 1;
  translate: -50% -50%;
  clip-path: polygon(
    0 100%,
    100% 100%,
    100% 50%,
    0 50%
  );
}

.body-container.saturn .ring-far {
  translate: -50% -49%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    0 50%
  );
}

.body-container.saturn::before,
.body-container.saturn .ring-far.a {
  width: var(--ring-a-size);
  height: var(--ring-a-size);
  background: radial-gradient(
    circle calc(var(--size) / 1.5) at center,
    #0000 99.9%,
    var(--ring-a-color)
  );
}

.body-container.saturn::after,
.body-container.saturn .ring-far.b {
  width: var(--ring-b-size);
  height: var(--ring-b-size);
  background: radial-gradient(
    circle calc(var(--size) / 1.05) at center,
    #0000 99.9%,
    var(--ring-b-color)
  );
}

.body-container.saturn .shadow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  background: radial-gradient(
    ellipse calc(var(--size) / 1.4) calc(var(--size) / 1.4 * 3) at center,
    #0000 18%,
    #000 18.1%
  );
  width: 100%;
  height: 75%;
  transform-style: preserve-3d;
  transform-origin: left center;
  rotate: x var(--pov);
  translate: 0 -50%;
  border-radius: 30%;
  border-top-right-radius: 50% 90%;
  border-bottom-right-radius: 50% 90%;
  clip-path: polygon(
    50% 0,
    100% 0,
    100% 100%,
    50% 100%
  );
  animation:
    saturn-shadow
    var(--day-duration) .3s linear infinite;
}

@keyframes saturn-shadow {
  from, 40%, to {
    opacity: 0.8;
  }
  50%, 90% {
    opacity: 0.7;
  }
  to {
    transform: rotateZ(-1turn);
  }
  7.8%, 43.5% {
    z-index: 0;
  }
  43.6% {
    z-index: 2;
  }
}