/* This stylesheet is for the orbital chart of "Where is Lucy?" by Raphael Marschall  */

@import url(https://fonts.googleapis.com/css?family=Qwigley);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

@font-face {
  font-family: 'Montserrat';
  font-display: swap;
}

.column-chart {
  float: left;
  width: 100%;
}

/*body {
  background-color: black;
}*/


p.tooltiptext {
  font-size: 25px;
  margin: 0;
}


.planet {
   fill: black;
   stroke-width: 1;
}

.orbit {
   fill: none;
   stroke-width: 1;
   stroke-linecap: round;
}


.orbit-trojan {
   fill: none;
   stroke: grey;
   stroke-width: 1;
   stroke-linecap: round);
}

@keyframes dash {
  to {
    stroke-dashoffset: -1000;
  }
}


.orbit-hue {
   fill: none;
   stroke-width: 6;
   stroke-linecap: round;
   stroke-opacity: 30%;
}

.orbit-highlight {
   animation: pulse-orbit 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}


.orbit-hue-pulse {
   fill: none;
   stroke-width: 6;
   stroke-linecap: round;
   stroke-opacity: 30%;
   animation: pulse-orbit 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-orbit {
  0% {
    stroke-width: 6;
    stroke-opacity: 50%;
  }
  80% {
    stroke-opacity: 0;
  }
  100% {
    stroke-width: 20;
    stroke-opacity: 0;
  }
}


.infoButtonPulse {
   animation: infoPulse 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes infoPulse {
  0% {
    stroke-width: 1;
    stroke-opacity: 1;
  }
  90% {
    stroke-opacity: 0;
  }
  100% {
    stroke-width: 15;
    stroke-opacity: 0;
  }
}



.orbit-lucy-future {
   fill: none;
   stroke: grey;
   stroke-width: 0.3;
   stroke-dasharray: 0.25% 0.25%;
}


.lucy {
  fill: white;
  /*animation: pulse-dot 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;*/
  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    stroke-width: 0;
    stroke-opacity: 1;
  }
  80% {
    stroke-opacity: 0;
  }
  100% {
    stroke-width: 8;
    stroke-opacity: 0;
  }
}

@keyframes button-hover {
  0% {
    stroke-opacity: 1;
  }
  5% {
    stroke-opacity: 0;
    fill-opacity: 0.7;
  }
  100% {
    stroke-opacity: 0;
    fill-opacity: 0.7;
  }
}




.title {
   font-size: 30px;  
   text-align: center;
   font-family: 'Goldman', cursive; 
   fill: #e3bf7c;
   /* font-family: Qwigley; 
   font-size: 45px;  
   fill: steelblue; 
   text-shadow: 2px -2px white; */
}

.infoBox {
   fill: white;
   font-family: Montserrat;
   font-size: 16px;     /* 1em */
   font-weight: bolder;
}


@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}