p a {color:var(--text-color);}


  @media screen and (max-width: 700px) {
  .date-info h2 {
    font-size: 1.3em;
  
  }
  .earth-icon {
    font-size: 1.5em;
    padding:5px 0px 5px 5px;
    display: none;
  }
  .planet-info {
    font-size: 0.7em;
    font-family: 'Mulish', sans-serif;
    color: grey;
    height: fit-content;
    padding-top: 10px;
    width:100%;
    line-height: 1.5;}
  }

  
  @media screen and (min-width: 700px) {
    .date-info h2 {
      font-size: 1.1em;
    
    }
    .earth-icon {
      padding:15px 0px 15px 15px;
      /*font-size: 3.4em;*/
    }
    .planet-info {
    font-size: 0.8em;
    font-family: 'Mulish', sans-serif;
    color: grey;
    height: fit-content;
    padding-top: 10px;
    width:100%;
    padding-right: 25px;

    }
  }
/* --------------------------------------------------------------------------


2. Document Setup


-------------------------------------------------------------------------- */


html {
  height: 100%;
  }
  
  
  body {
    z-index: 0;
    width: 100%;
    height:100%;
    background-color: var(--general-background);
    margin: 0px;
  }
  



svg {
  pointer-events: all;
}


/*------------------------------------


3. Header


------------------------------------*/



.top-menu {
  transition: 0.4s;
  z-index: 20;
height: fit-content;
width: 100%;
top: 0;
display: flex;
flex-direction: row;
 
}

.reset-button {
  z-index: 20;
      padding: 20px;
      margin-left:15px;
      position: absolute;
      background-color: #80808078;
      border-radius: 10px;
      padding: 5px 10px;
      border: none;
      margin-top: 12px;
      cursor: pointer;
      display: none;
      color: var(--general-background);
  
}

  @media screen and (min-width: 701px) {
#header {  
  height: 2px;
}
}

@media screen and (max-width: 700px) {
#header {  

  height: 36px;
}
}


/*
.top-menu-login-button {

  position:absolute;
  left:0;
 margin-top: 22px;
 margin-left: 22px;


  font-family:'Mulish';
  background: none;
  border:0.5px;
  border-style:solid;

  border-radius:5px;
  align-content: center;
  font-size: 0.9em;
  padding: 3px 14px 3px 14px;
  margin-right:10px;
  cursor: pointer;
  color: var(--header-accent);
  border-color: var(--header-accent);
  border-width: 0.5px;
}

.top-menu-login-button:hover {
  color: var(--top-header);
  background-color: var(--header-accent);
}

@media screen and (max-width: 700px) {
.top-menu-login-button {
  display:none;
}
}
*/

.top-search-button  {
  border: none; 
margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
}


.top-menu-button  {
  border: none; 
  margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
}


.top-help-button  {
  border: none; 
  margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
}


.top-add-button  {
  border: none; 
  margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
}
/*
.top-close-button  {
  border: none; 
  margin-right:10px;
  cursor:pointer;
  height:30px;
  width:30px;
}


.top-close-button:hover  {
  border: none; 
  margin-right:10px;
  cursor:pointer;
  height:30px;
  width:30px;
}

.top-close-button:hover  {
  border: none; 
  margin-right:10px;
  cursor:pointer;
  height:30px;
  width:30px;
}

*/
.earthcycles-logo {
  margin:0 auto 0 auto;
  padding:15px 15px 35px 15px;
  width: 225px;
  height: 225px;
  border: none; 
}


.main-menu-button {
  position:absolute;
  left:0;
  margin-top: 22px;
  margin-left:25px;
  border: none; 
  margin-right:10px;
  cursor:pointer;
  height:30px;
  width:30px;
}


.main-menu-button:hover  {
  border: none; 
  margin-right:10px;
  cursor:pointer;
  height:30px;
  width:30px;
}



#EarthCycles {
  position: absolute;
  z-index: 10;
  top: 0;
}


.date-info {
  height:fit-content; 
  font-family:'Mulish', sans-serif; 
  color: grey; 
  padding: 0px 5px 15px 15px;
}

/* -------------------------------------------------------------------------- */

/*	6. User Settings Overlay Curtain 

    Comes in from the right after clicking +- button.

/* -------------------------------------------------------------------------- */

#right-settings-overlay {
  background-color: var(--side-overlays) /*var(--overlays-and-headers:)*/; 
  color:  var(--text-color); /*var(--text-color)*/ ;
  z-index: 56;
}


/* Table of Contents Menu (background) */
.overlay-settings {
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  right: 0;
  top: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */
.overlay-content-settings {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "Mulish";
  /*font-size: smaller;*/
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;  
  margin: auto;
}


@media screen and (max-width: 700px) {
  .overlay-content-settings {
    width: 77%;
    font-size: 0.9em;
    /*margin-top: 6%;*/
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .overlay-content-settings {
    width: 65%;
    font-size: 0.9em;
    /*margin-top: 2%;*/
}
}

@media screen and (min-width: 1325px) {
    .overlay-content-settings {
      width: 69%;
      margin: auto;
    }
}

.settings-label {
  font-family: 'Mulish';
  font-size: 1.2em;
  margin: 18px 0px 8px 0px;
}

.language-box {
  display: flex;
  margin: 10px auto 10px auto;
  justify-content: center;
  padding: 5px 30px 5px 30px;
  background: var(--slide-highlight);
  border-radius: 55px;
  width: fit-content;
}

.language-selector {
  font-family: 'Mulish';
  padding: 10px 20px 10px 20px;
  background: var(--side-overlays);
  border-radius: 10px;
  margin: 10px;
 /* filter: invert(100);*/
  font-size: 1.1em;
  cursor: pointer;
  color: var(--text-color);
  /*border-color:var(--header-accent);*/
  border-width:0.5px;

}

.language-selector:hover {
  background: var(--header-accent);
  border-width:1px;
  color:var(--top-header);
}

.language-selector a {
  color: var(--side-overlays);
}



/*Carbon Badge */

#wcb.wcb-d #wcb_a {
  color: #2e2e2e !important;
background: #27ad37 !important;
border-color: #00a112 !important;
}

#wcb #wcb_a,
#wcb #wcb_g {
  border: 0.2em solid #2cb03c !important;
}

#wcb.wcb-d #wcb_2 {
  color: grey !important;
}


/*Right Close Button*/

#right-close-button {
  position: absolute;
  right: 0px;
  transition: 0.3s;
  height: 75px;
  width:75px;
  padding-right: 30px;
  padding-top: 30px;
  right: 0px;
  top: 0px;
}


.x-button {
    background: url('svgs/right-x.svg') no-repeat;
    padding: 10px;
    background-size: contain;
    width: 75px;
    height: 75px;
    border:none;
}

.x-button:hover {
    background: url('svgs/x-over.svg') no-repeat;
    padding: 10px;
    background-size: contain;

}



.menu-page-item {
  padding:10px;
  font-family:'Mulish';
  font-size:1.4em;
  color:var(--text-color);
  border-bottom:1px solid var(--subdued-text);
  cursor: pointer;

}


.menu-page-item:hover {
 
  border-bottom:2px solid var(--text-color);
  color: var(--header-accent);
  
}

.menu-page-item a {  text-decoration: none;
color: var(--subdued-text);
}

.menu-page-item a:hover {  text-decoration: none;
  color: var(--h1);
  }


  /*working?!*/
[part="darkLabel"], [part="lightLabel"], [part="toggleLabel"] {

  font-size: 22px !important;
}


/*-----------------------------------------


MONTHS


-----------------------------------------*/

/*Months*/
svg path#january,
svg path#february,
svg path#march,
svg path#april,
svg path#may,
svg path#june,
svg path#july,
svg path#august,
svg path#september,
svg path#october,
svg path#november,
svg path#december {
  opacity: 0.75;
  transition: 0.3s;
  cursor:pointer;
}


/*to be updated once date's have their highlight flagger.*/
.date_event {
  opacity: 0.8 !important;
}

.date_event:hover {
  opacity: 1;
}


@media (min-width: 769px) {

  svg path[id*="-day"]:hover {
    fill-opacity: 0.6;
  }
  svg path[id*="-day"]:active {
    fill-opacity: 1;
  }

svg path#january:hover,
svg path#february:hover,
svg path#march:hover,
svg path#april:hover,
svg path#may:hover,
svg path#june:hover,
svg path#july:hover,
svg path#august:hover,
svg path#september:hover,
svg path#october:hover,
svg path#november:hover,
svg path#december:hover {
  opacity: 0.5;
  transition: 0.4s;
  cursor: pointer;
}

svg path#january.final,
svg path#february.final,
svg path#march.final,
svg path#april.final,
svg path#may.final,
svg path#june.final,
svg path#july.final,
svg path#august.final,
svg path#september.final,
svg path#october.final,
svg path#november.final,
svg path#december.final  {
  opacity: 1;
  cursor: pointer;
  transition: 0s; /* Set the transition duration to 0 seconds */
}}


@media (hover: none) { 
  
  /* Add a transition to the paths */
  path[id*='-day'] {
    transition: fill-opacity 0.75s;
  }

  /* Set the active state of the paths */
  path[id*='-day'].active {
    fill-opacity: 0.6;
  }

  /* Set the final state of the paths */
  path[id*='-day'].final {
    fill-opacity: 1 !important;
  }




svg path#january.active,
svg path#february.active,
svg path#march.active,
svg path#april.active,
svg path#may.active,
svg path#june.active,
svg path#july.active,
svg path#august.active,
svg path#september.active,
svg path#october.active,
svg path#november.active,
svg path#december.active {
  fill-opacity: 0.5;
}

svg path#january.final,
svg path#february.final,
svg path#march.final,
svg path#april.final,
svg path#may.final,
svg path#june.final,
svg path#july.final,
svg path#august.final,
svg path#september.final,
svg path#october.final,
svg path#november.final,
svg path#december.final  {
  fill-opacity: 1;
  cursor: pointer;
  transition: 0s; /* Set the transition duration to 0 seconds */

}
}


 /* CSS for screens above 768px (desktop) */


/*January*/
svg path[id*="-1-20"] {
  fill: #7939d9ff;
  fill-opacity: 0.3;
  cursor: pointer;
}

/*February*/
svg path[id*="-2-20"] {
  fill: #ff00d9;
  fill-opacity: 0.3;
  cursor: pointer;
}

/*March*/
svg path[id*="-3-20"] {
  fill: #d40000ff;  
  cursor: pointer;
  fill-opacity: 0.3;
}

/*April*/
svg path[id*="-4-20"] {
  fill: #ff6403;
  cursor: pointer;
  fill-opacity: 0.3;
}


/*May*/
svg path[id*="-5-20"] {
  fill: rgb(255, 128, 1);
  cursor: pointer;
  fill-opacity: 0.3;

}

/*June*/
svg path[id*="-6-20"] {
  fill: rgb(255, 209, 25);
  cursor: pointer;
  fill-opacity: 0.3;

}

/*July*/
svg path[id*="-7-20"] {
  fill: rgb(251, 251, 0);
  cursor: pointer;
  fill-opacity: 0.3;

}



/*August*/
svg path[id*="-8-20"] {
  fill: #c9fa08;
  cursor: pointer;
  fill-opacity: 0.3;

}

/*September*/
svg path[id*="-9-20"] {
  fill: #00e513ff;
  cursor: pointer;
  fill-opacity: 0.3;

}

/*October*/ 
svg path[id*="-10-20"] {
  fill:  rgb(0, 230, 169);
  cursor: pointer;
  fill-opacity: 0.3;

}

/*November*/ 
svg path[id*="-11-20"] {
  fill: #0cabf5;
  cursor: pointer;
  fill-opacity: 0.3;

}


/* December */
svg path[id*="-12-20"] {
  fill: #3d3de9;
  cursor: pointer;
  fill-opacity: 0.3;

} 


/* BASIC COLOR MONTH STYLING */

.january {
  color: #7939d9ff;
}

.february {
  color: #ff00d9;
}

.march {
  color: #d40000ff;
}

.april {
  color: #ff6403;
}

.may {
  color: rgb(255, 128, 1);
}

.june {
  color: rgb(255, 209, 25);
}

.july {
  color: rgb(251, 251, 0);
}

.august {
  color: #c9fa08;
}

.september {
  color: #00e513ff;
}

.october {
  color: rgb(0, 230, 169);
}

.november {
  color: #0cabf5;
}

.december {
  color: #3d3de9;
}


.featured-day-event {
  fill-opacity: 1;
}

/*-------------------

Planets Styling and interactivity


-----------------*/

@media (max-width: 768px) {
  [id$="-symbol"] {
    display: none;
  }
}


#neptune_system
 {
  transition: 0.5s;
  cursor: pointer;
}
#neptune_system:hover #neptune-orbit {
  stroke-width: 2px;
  transition: 0.5s;
}

#neptune_system:hover #neptune circle {
  stroke-width: 2px;
  transition: 0.5s;
}



#uranus_system
 {
  transition: 0.5s;
  cursor: pointer;
}
#uranus_system:hover #uranus-orbit {
  stroke-width: 2px;
  transition: 0.5s;
}

#uranus_system:hover #uranus ellipse {
  stroke-width: 2px;
  transition: 0.5s;
}

#saturn_system
 {
  transition: 0.5s;
  cursor: pointer;
}
#saturn_system:hover #saturn-orbit {
  stroke-width: 2px;
  transition: 0.5s;
}

#saturn_system:hover #saturn ellipse {
  stroke-width: 2px;
  transition: 0.5s;
}

#jupiter_system
 {
  transition: 0.5s;
  cursor: pointer;
} 
#jupiter_system:hover #jupiter-orbit {
  stroke-width: 2px;
  transition: 0.5s;
}

#jupiter_system:hover #jupiter ellipse {
  stroke-width: 2px;
  transition: 0.5s;
}

#mars_system
 {
  transition: 0.5s;
  cursor: pointer;
}
#mars_system:hover #mars-orbit {
  stroke-width: 3px;
  transition: 0.5s;
}

#mars_system:hover #mars ellipse {
  stroke-width: 3px;
  transition: 0.5s;
}

#venus_system
 {
  transition: 0.5s;
  cursor: pointer;
}

#venus_system:hover #venus-orbit {
  stroke-width: 4.5px;
  transition: 0.5s;
}

#venus_system:hover #venus circle {
  stroke-width: 4.5px;
  transition: 0.5s;
}

#mercury_system
 {
  transition: 0.5s;
  cursor: pointer;
}

#mercury_system:hover #mercury-orbit {
  stroke-width: 7px;
  transition: 0.5s;
}

#mercury_system:hover #mercury circle {
  stroke-width: 7px;
  transition: 0.5s;
}

#earth_system
 {
  transition: 0.5s;
  cursor: pointer;
}

#earth_system:hover #earth-orbit {
  stroke-width: 3.5px;
  transition: 0.5s;
}

#earth_system:hover #earth circle {
  stroke-width: 3.5px;
  transition: 0.5s;
}


/*-------------------------------

LUNAR MONTH & WEEK STYLING and INTERACTIVITY

----------------------*/




/*Lunar*/
svg path[id*="lunar"] {
  cursor: pointer;
  transition: 0.5s;
}

svg path[id*="lunar"]:hover {
  opacity: 1;
  fill: grey;
}

/*weekly*/
svg path[id*="week"] {
  cursor: pointer;
  transition: 0.5s;
}

svg path[id*="week"]:hover {
  opacity: 1;
  fill: rgb(70, 70, 70);
}



/*------------------------------

LOADING ANIMATION OF THE PLANETS


-----------------------------*/




#prev-year {
  cursor: pointer;
}

#next-year {
  cursor: pointer;
}

#the_sun,
#mercury_system,
#venus_system,
#earth_system,
#mars_system,
#jupiter_system,
#saturn_system,
#uranus_system,
#neptune_system,
#weeks,
#solar_months,
#all_days,
#day_breakouts
#ray_lines,
#the_year {
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 0.33s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



#the_sun {
  animation-delay: 0s;
  transition: 0.4s;
}

#mercury_system {
  animation-delay: 0.165s;
  transition: 0.4s;
}

#venus_system {
  animation-delay: 0.33s;
  transition: 0.4s;
}

#earth_system {
  animation-delay: 0.495s;
  transition: 0.4s;
}

#mars_system {
  animation-delay: 0.66s;
  transition: 0.4s;
}

#jupiter_system {
  animation-delay: 0.825s;
  transition: 0.4s;
}

#saturn_system {
  animation-delay: 0.99s;
  transition: 0.4s;
}

#uranus_system {
  animation-delay: 1.155s;
  transition: 0.4s;
}

#neptune_system {
  animation-delay: 1.32s;
  transition: 0.4s;
}

#weeks {
  animation-delay: 1.485s;
  transition: 0.4s;
}

#lunar_months {
  animation-delay: 1.6s;
  transition: 0.4s;
}

#solar_months {
  animation-delay: 1.8s;
  transition: 0.4s;
}

#all_days {
  animation-delay: 1.98s;
  transition: 0.4s;
}

#day_breakouts {
  animation-delay: 1.98s;
  transition: 0.4s;
}

#ray_lines {
  animation-delay: 2.64s;
  animation-duration: 1s;
  transition: 0.4s;
}

#the_year {
  animation-delay: 2.97s;
  transition: 0.4s;
}

#moon-phases {
  opacity: 0;
  animation-name: fade-in2;
  animation-duration: 0.33s;
  animation-fill-mode: forwards;
}

#breakout-days {
  opacity:0;
  animation-delay: 2.97s;
}

@keyframes fade-in2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.11;
  }
}


#moon-phases {
  animation-delay: 2.97s;
  animation-duration: 2s;
}



/*--------------------------------------


TOOLTIPS AND MODALS


--------------------------------------*/




.tooltip {
  position: absolute;
  z-index: 20;
  color: var(--general-background);
  font-family: 'mulish', sans-serif;
  padding: 8px 20px 8px 20px ;
  font-size: 0.8em;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid var(--general-background); 
  border-radius: 10px;
}

@media screen and (max-width: 700px) {
  .tooltip {
    display: none;  
  }
}




/* The modal background */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scrolling if needed */
  background-color: var(--modal-background);
}




#day-modal-content {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 80%;
  max-height: 80%;
  overflow-y: auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#day-modal-content.show {
  display: block;
  animation: modal-animation 0.75s ease;
}

/* Animation */
@keyframes modal-animation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}

/* Close button */
.close {
  display: inline-block;
  float: right;
  font-size: 24px;
  font-weight: bold;
  color: #aaa;
  transition: color 0.3s ease;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}





/* Modal content box */
.modal-content {
  position: fixed;
  top: 50%;
  left: 0;
  margin-top: -200px;
  margin-left: -15px;
  padding: 20px 20px 20px 40px;
  width: 20%;
  height: fit-content;
  max-width: 800px;
  max-height: 800px;
  background-color: var(--modal-background);
  border-radius: 20px;
  border: 1px solid var(--months-lunar);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  overflow: auto;
  font-family: 'Mulish', sans-serif;
  color: var(--text-color);
  transition: 0.5s;

}


/* Modal content box */
.search-modal-content {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  margin-top: -25px;
  height: fit-content;
  background-color: rgba(0, 0, 0, 0.798);
  border: 1px solid var(--months-lunar);
  font-family: 'Mulish', sans-serif;
  color: var(--text-color);
  transition: 0.5s;

}

@media screen and (max-width: 700px) {
    .search-modal-content {
    padding: 40px 10px 10px 10px;
    max-width: 800px;
    max-height: 800px;
    width: 65%;
    border-radius: 12px;
  }
}

@media screen and (min-width: 700px) {
  .search-modal-content {
  padding: 50px 20px 20px 20px;
  max-width: 800px;
  max-height: 800px;
  width: 30%;
  border-radius: 20px;
}
}



.search-button {
  z-index: 20;
      text-align: center;
      width: 150px;
      margin: auto;
      background-color: #c0c0c078;
      border-radius: 10px;
      padding: 12px 10px;
      border: none;
      margin-top: 12px;
      cursor: pointer;
      color: var(--general-background);
    display: block;
    font-size: 1.2em;
    
}

/* Close button */
.search-close {
  color: var(--subdued-text);
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  width: 30px;
  padding-bottom: 20px;

}

.search-close:hover,
.search-close:focus {
  color: grey;
  text-decoration: none;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}






/*--------------------------------------
GUIDED TOUR---*
--------------------------------------*/



/* The modal background */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 30; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scrolling if needed */
  background-color: var(--modal-background);
}
  
.tour-content {
  text-align: center;
}

@media screen and (max-width: 700px) {
  .tour-content {
    margin: 10% auto 15% auto;
    width: 90%;
  }

}

  @media screen and (min-width: 701px) {
    .tour-content {
      margin: 5% auto 15% auto;
      width: 80%;
    }

  }

.close {
  color: var(--subdued-text);
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin: -15px 40px auto auto;
  position: absolute;
  right: 0;
}
.close:hover,
.close:focus {
  color:var(--h1);
  text-decoration: none;
  cursor: pointer;
}
.blur {
  filter: blur(5px);
  pointer-events: none;
}
.next {
  background-color: green;
  border: none;
  color: #fff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 2px;
  border-radius: 5px;
  cursor: pointer;
}

.next:hover {
  background-color: #0f6a02;
}

.back {
  background-color: rgb(80, 80, 80);
  border: none;
  color: #fff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 2px;
  border-radius: 5px;
  cursor: pointer;
}

.back:hover {
  background-color: rgb(50, 50, 50);
}

.modal-description {
  font-family:'Mulish', sans-serif;
  text-align:center;
  color:var(--h1);
  padding:15px;
}
  
.modal-header {
  font-family: 'Mulish', sans-serif;
  color:var(--h1);
  margin-top: 15px;
  font-weight: bolder;
}

#underlayer {transition: 0.5s;}



.tour-image {
  margin: auto; 
  display: flex;
  justify-content: center;
  flex-flow: column;
  flex: 50%;
  opacity: 0.7;
margin: auto;

}

.tour-image img {
  height: inherit;
}


@media screen and (max-width: 700px) {
  
  .tour-image {
    padding: 8px;
    height: 120px;  
  }

  .modal-header {
    font-size:2.3em;
  }
  .modal-description {
    font-size:1.2em;
  }

}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  
  .tour-image {
    padding: 8px;
    height: 200px;  
  }

  .modal-header {
    font-size:2.9em;
  }
  .modal-description {
    font-size:1.5em;
  }

}


@media screen and (min-width: 1325px) {


  .tour-image {
    padding: 28px;
    height: 270px;  
  }

  .modal-header {
    font-size:3.2em;
  }
  .modal-description {
    font-size:1.7em;
  }

}

.java-link {
  cursor:pointer; 
  border-bottom: grey 1px dashed;
}

.java-link:hover {
  cursor:pointer; 
  border-bottom: grey 1px solid;}



  /* Newest*/


#moon-cycle, #whale-cycle, #cariboo-cycle, #humming-cycle, #monarch-cycle, #goose-cycle, #saturn-cycle, #jupiter-cycle, #mars-cycle, #venus-cycle, #mercury-cycle {
  display: none;
}

#planets-button  {
  border: none; 
  margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
  padding: 8px;
  z-index:30;
}

#lunar-button  {
  border: none; 
  margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
  padding: 8px;
  z-index:30;
}

#earth-button  {
  border: none; 
  margin:0px 10px 10px 10px;
  cursor:pointer;
  height:30px;
  width:30px;
  padding: 8px;
  z-index:30;
}


  .totems-icon {
    opacity: 0.8;
    transition: opacity 0.3s ease;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 50;
    padding: 8px;
  }

  .totems-icon {
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }

  .totems-icon.active {
    opacity: 1;
    border-bottom: 2px solid;
    padding-bottom: 4px;
  }

  .totems-icon:hover {
    opacity: 1;
    border-bottom: 2px solid;
    padding-bottom: 4px;
  }

  @media screen and (max-width: 700px) {
  #clock {
    display: none;
  }
}


/*---------------------------------

ADD DATE CURTAIN 

---------------------------------*/



#add-datecycle {
  background-color: var(--side-overlays) /*var(--overlays-and-headers:)*/; 
  color:  var(--text-color); /*var(--text-color)*/ ;
  z-index: 56;
}


/* Table of Contents Menu (background) */
.overlay-add-datecycle {
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  right: 0;
  top: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/*Right Close Button*/

.right-close-button {
  position: absolute;
  right: 0px;
  transition: 0.3s;
  height: 75px;
  width:75px;
  padding-right: 30px;
  padding-top: 30px;
  right: 0px;
  top: 0px;
}

/* Position the content inside the overlay */
.add-datecycle-content {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "Mulish";
  /*font-size: smaller;*/
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;  
  margin: auto;
}


@media screen and (max-width: 700px) {
  .add-datecycle-content {
    width: 77%;
    font-size: 0.9em;
    /*margin-top: 6%;*/
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .add-datecycle-content {
    width: 65%;
    font-size: 0.9em;
    /*margin-top: 2%;*/
}
}

@media screen and (min-width: 1325px) {
    .add-datecycle-content {
      width: 69%;
      margin: auto;
    }
}


textarea#add-date-title {
  width: 50%;
  height: 25px;
  padding: 10px;
  resize: none;
  border: 1px solid var(--thin-border-color);
  border-radius: 5px;
  margin-bottom: 10px;
font-size: 1.5em;
background: var(--header-accent);
color: var(--login);
}

textarea#add-date-note {
  width: 50%;
  height: 45px;
  padding: 10px;
  resize: none;
  border: 1px solid var(--thin-border-color);
  border-radius: 5px;
  margin-bottom: 10px;
font-size: 1.5em;
background: var(--header-accent);
color: var(--login);
}

#export-hover-box {
  opacity: 0.5;
}

#export-hover-box:hover {
  opacity: 1;
}

#confirm-dateCycle {
  z-index: 20;
  width: 150px;
  margin: auto;
  border-radius: 10px;
  padding: 12px 10px;
  border: none;
  cursor: pointer;
  color: var(--general-background-highlight);
display: block;
font-size: 1.2em;
background-color: var(--button-2-1);
  text-align:center;
  display:none;
  margin-top: 20px;

}

#confirm-dateCycle:hover {
  background-color: var(--button-2-1-over);
  color: var(--h1)

}



.delete-button {
  z-index: 20;
      padding: 20px;
      
      position: relative;
      background-color: #80808078;
      border-radius: 10px;
      padding: 5px 10px;
      border: none;
      cursor: pointer;
      color: var(--general-background);
      float: right;
      margin-top: 7px;
  
}



/* CURRENT DATE DATA BOX */

#current-datecycle-info2 .date-info {
  margin-top:20px;
  margin-bottom: 0px;
  background: var(--grey-trans);
  border-radius: 10px;
  padding: 15px;
  position: relative;
  z-index: 20;
  padding-bottom:42px;
}

.current-date-info-title {
  font-size: larger;
  margin-bottom: 0px;
}

.current-datecycle-data {
  display: flex;
  flex-flow: row;
}

.current-date-calendar-color,
.current-date-calendar,
.current-date-frequency,
div.current-datecycle-data > div {
  font-size: smaller;
  padding: 10px 10px 10px 0px;
}

.current-date-calendar-color {
  padding: 10px 0px 10px 0px;
}

.current-date-frequency {
  text-align: left;
}

.current-date-notes {
  font-size: regular;
}

.close-button-datecycle {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-size: larger;
  color: #333;
}