@import url(https://fonts.googleapis.com/css?family=Qwigley);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
/*@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Nova+Mono);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@import url(https://fonts.googleapis.com/css?family=UbuntuMono);
@import url(https://fonts.googleapis.com/css?family=WindSong);
@import url(https://fonts.googleapis.com/css?family=Sacramento);*/

/*html {
     font-size: calc(0.5em + 0.4vw);
}*/

/*html {
     font-size: 16px;
}*/


@property --primary-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #D888E7;  /*  935db3 b06886*/ 
}

@property --secondary-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #E6B3EF;  /*  81b15f C38DA3*/
}


@font-face {
  font-family: 'Montserrat';
  /*font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');*/
  font-display: swap;
}

.main {
   max-width: 100%;
   margin: 0 auto;
   color: #ddd;
   padding: 50px;
}

/* Create three equal columns that floats next to each other */
.column-left {
  float: left;
  width: 25%;
  padding-top: 0%;
}
.column-main {
  float: left;
  width: 74%;
}
.column-center {
  float: left;
  width: 75%;
}
.column-right {
  float: right;
  width: 25%;
  padding-top: 0%;
}

/*
div {
  border: 1px solid white;
}
*/


body {
  background-color: black;
  font-family: Montserrat;
}
h1, h2, h3 {
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}
h1 {
  color: var(--primary-color);
}
/*
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1em;
}
*/


p {
  font-size: 1em;
  float: left;
  /*text-align: center;*/
  text-align:justify;  
  text-justify:inter-word;
  width: 100%;
  margin: 0;
}

.footnote {
  font-size: 0.8em;
  margin-top: 1em;
  text-align: center;
}

.highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 80%, var(--primary-color) 20%);
}

table {
  color: #ddd;
  font-size: 1.2em;
  width: 100%;
  font-family: 'Anonymous Pro';
}

/*table, th, td {
  border: 1px solid white;
}*/

table th{
  width: 30%;
  text-align: right;
}

table td.distance{
  width: 55%;
  text-align: left;
  padding-left: 10px;
}

table td.phase{
  width: 15%;
  text-align: right;
}

tr:nth-child(odd) {
  color: var(--secondary-color);
}



.newblock {
   padding-top:0.5em;
}







.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);
   /*stroke-dasharray: 0.5% 0.5%;
   animation: dash 700s linear infinite;*/
}

@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-Hera-future {
   fill: none;
   stroke: grey;
   stroke-width: 0.3;
   stroke-dasharray: 0.25% 0.25%;
}


.Hera {
  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;
  }
}


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


/*@keyframes button-playing {
  0% {
    stroke-opacity: 1;
    stroke-dasharray: 3% 7%;
    stroke-dashoffset: 0%;
  }
  100% {
    stroke-opacity: 1;
    stroke-dasharray: 3% 7%;
    stroke-dashoffset: 10%;
  }
}*/




.handle {
   outline-style : none;
   fill: white;
   stroke: white;
   animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}



/*
.slider {
   fill: red;
   stroke: blue;
   stroke-width: 2px;
}

.axis {
   fill: red;
   stroke: blue;
   stroke-width: 2px;
}

.track-overlay
*/

.track { /* background bar */
   stroke: none;
}
.track-fill {   /* the part of the bar that is in the past*/
   stroke: var(--secondary-color);
   fill: var(--secondary-color);
   stroke-opacity: 1;
}
.track-inset {  /* the part of the bar that is in the future*/
   stroke: grey;
   stroke-opacity: 1;
}
.axis text,
.slider text {
  font-size: 1em;
  color: white;
  font-family: Montserrat;
}



.EncounterCountdown {
   color: #ddd;
   text-align: center;
   width: 100%;
}






.title {
   /*font-size: 13em;*/
   font-size: 200px;  
   text-align: center;
   font-family: Qwigley; 
   fill: steelblue;
   fill: var(--primary-color);
   text-shadow: 2px -2px white;
   /*stroke: white;
   stroke-width: 1px;
   stroke-dasharray: 10% 30%;
   stroke-dashoffset: 0%;
   animation: stroke-offset 10s infinite linear;*/
}

.infoBox {
   /*fill: #24516e;*/
   fill: white;
   font-size: 16px;     /* 1em */
   font-weight: bolder;
}


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

























.clock {
  width:100%;
  float: left;
  padding: 0;
}

.clock span {
  text-align: center;
  float: left;
  font-size: 1.5em;
  color: #ddd;
}

.clock p {
  text-align: center;
  float: left;
  font-size: 0.8em;
  color: #ddd;
}

span.countdown{
  font-size: 2.5em;
}

.disclaimer p{
   text-align: center;
   font-size: 1em;
}

.disclaimer {
   border-top: 1px solid white; 
   padding-top: 0.5em;
}






a {
  color: var(--secondary-color);
  position: relative;
  text-decoration: none;
  transition: color .5s ease-out;
}

a:hover {
  color: #fff;       /* 005494 */
  right: 0;
  text-decoration: none;
}

a:hover:after {
  border-color: var(--secondary-color); /* d1e5f4 */
  right: 0;
}

a:after {
  z-index: -1;
  border-top: 0.4em solid var(--secondary-color); /* d1e5f4 */
  content: "";
  position: absolute;
    right: 100%;
    bottom: 10%;
    left: 0;
  transition: right .5s cubic-bezier(0,.5,0,1),
              border-color .5s ease-out;
}

a.subscribe {
  color: var(--primary-color);
  text-decoration: none;
}

a.subscribe:hover {
   color: var(--secondary-color);       005494 */
}

a:after {
  border-top: 0em;
}





.column-left div {
  float: left;
  width: 100%;
  text-align: center; 
  margin: 0;
  /*border: 1px solid white;*/
}





@media screen and (max-width:1200px) {
  .column-left, .column-main, .column-center, .column-right {
    width: 100%;
    padding-top: 5%;
  }
  .main {
    margin: 0;
    padding: 0;
  }
  
  .axis text,
  .slider text {
    font-size: 2em;
  }
  /*html {
     font-size: 10px;
  }*/
  /*html {
     font-size: calc(0.5em + 1.4vw);
  }*/
}





/* Date input */

input {
   font-family: 'Anonymous Pro';
   font-size: 1.5em;
   color: #ddd;
   background-color: #000;
   border: 0px;
}

input::-webkit-datetime-edit-fields-wrapper { background: #000; padding: 0;}
input::-webkit-datetime-edit-text { color: var(--primary-color);}
input::-webkit-datetime-edit-month-field { color: #ddd; }
input::-webkit-datetime-edit-day-field { color: #ddd; }
input::-webkit-datetime-edit-year-field { color: #ddd; }
input::-webkit-calendar-picker-indicator { 
  /*background: black;*/
  filter: invert(80%); 
  /*margin-left: -1.3em;*/
}
input::-webkit-calendar-picker-indicator:hover {
  cursor: pointer;
  filter: invert(48%) sepia(30%) saturate(0%) hue-rotate(203deg) brightness(90%) contrast(95%);
}