/* main.css */


:root {
	--zero:0;
	--disk-radius:6;
  --disk-width:12;
  --reset-fade-seconds: 3s;
	--preload-seconds: 5s;
	--loading-fade-seconds: 4s;
	--phenom-fade-seconds: 1s;
	--clouds-fade-seconds: 2s;
	--darken-fade-seconds: 1s;
	--firmament-green: #708271;
	--info-font-family: "Cormorant";
	--poem-marker-font-family:"Annie Use Your Telescope";
	--playbar-font-family:"Work Sans";
}

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: black;

}
/* stacking for the full firmament */

#html-container { z-index: -1; }
#firmament { z-index: 0; }
#clouds { z-index: 1; }
#play-bar { z-index: 3; }
#chyron-container { z-index: 2; }
.tooltip { z-index: 4 } 
/* Below do not work. Need position: absolute or sim */
#svg-container { z-index: -5; }
#svg-daylight {z-index: 0; }
#svg-darkness {z-index: 0; }
#wheel-group g { z-index: 5; }
#daylight {
	position: absolute;
	width: 100%;
	height: 48vw;
}


#darkness {
	position: absolute;
	width: 90%;
	top: 52vw;
	height:65vh;
}

#wheel-group, #clouds, #chyron-container, #weather-graphs-container {
	transition: opacity var(--reset-fade-seconds) ease;
}

  #wheel-group image {
    width: var(--disk-width);
    height: var(--disk-width);
  }



#svg-container {
    position:absolute;
  }

#svg-daylight {
	animation: _svg-bgcolors 1440s linear infinite;
	transition: opacity var(--darken-fade-seconds) ease;
	
}
#svg-arc {
	animation: svg-bgcolors 1440s linear infinite;
	transition: opacity var(--darken-fade-seconds) ease;
}

@keyframes _svg-bgcolors {
0% {fill:  rgb(214.000,214.000,232.000)}
8.3% {fill:  rgb(213.037,213.037,230.956)}
16.6% {fill:  rgb(218.494,218.494,236.872)}
25% {fill:  rgb(218.051,237.104,257.216)}
34.3% {fill:  rgb(227.218,247.072,268.029)}
42.6% {fill:  rgb(290.449,284.731,261.861)}
50% {fill:  rgb(298.069,292.202,268.731)}
58.3% {fill:  rgb(295.553,272.002,255.517)}
66.6% {fill:  rgb(289.654,266.574,250.418)}
75% {fill:  rgb(283.210,277.635,255.335)}
83.3% {fill:  rgb(244.530,258.473,254.183)}
91.6% {fill:  rgb(212.283,230.832,250.411)}
100% {fill:  rgb(214.000,214.000,232.000)}

}
@keyframes svg-bgcolors {
	/* 100% / 12 == 8.3%; 100 / 24 == 4.17 (~one minute; ~15 days) 
	 * 100/365 2.74% ~ one day of year
	 */

	0%    {fill: #D6D6E8;} /* December */
	8.3%  {fill: #D6D6E8;} 
	16.6% {fill: #D6D6E8; } /* February */
	25%   { fill: #CEE0F3;} /* March */
	34.3% { fill: #CEE0F3; } /* April*/
	42.6% { fill: #FEF9E5; } /* May */
	51%   { fill: #FEF9E5; } /* June */
	59.3% { fill: #FBE7D9 } /* July */
	67.6% { fill: #FBE7D9 } /* August */
	76%   { fill: #FEF9E5 } /* September */
	84.3% { fill: #E4F1ED } /* October */
	92.6% { fill: #CEE0F3; } /* November */
	100%  { fill: #D6D6E8; } /* December */
}
#firmament{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	align-items: center;
	justify-content: center;
	
}


/* container for audio player */
#play-bar {
  position: absolute;
  top: 48vw;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
} 

.close-notes {
	cursor: pointer;
	position: relative;
	width:100%;
	right: -90%;
	top: 32px;
	z-index: 5;
	font-family: "Cormorant", sans-serif;
	
}

.close-notes img {
	opacity: .8;
	width:25px;
}
#liner-notes-container {
	position: absolute;
	z-index: 5;
	bottom: -47vw;
	right:20;
	width: 22%;

}

#liner-notes-iframe {
	height: 44vw;
	width: 100%;
	border: 1px solid var(--firmament-green);

}

.close-key {
	top: 64px;
}
#key-container {
	position: absolute;
	bottom: -47vw;
	left:34vw;
	width: 30%;
	opacity: 1;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
}

/* per https://www.youtube.com/watch?v=oLqdy95LZSw */
#key-container input[type="radio"]{
	display: none;
}

 #key-container .tab {
	width: 100%;
	height: 32vw;
}

#key-container label{
	padding: 25px 10px 25px 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	position: relative;
	background: #eee;
	font-weight: bold;
	border: 1px solid var(--firmament-green);
	border-collapse: collapse;
	top: 1px;
	font-family: var(--info-font-family), sans-serif;
}
#key-container .tab {
	order: 1;
	display: none;
	border-collapse: collapse;
	border: 1px solid var(--firmament-green);

}

#key-container input[type="radio"]:checked + label + .tab {
	display: block;

}

#key-container input[type="radio"]:checked + label {
	background: #fff;
	border-bottom: 0;

}

.close-menu {
	top: 0px;
}

#menu-container {
	background: #fff;
	position: absolute;
	border: 1px solid var(--firmament-green);
	bottom: -47vw;
	left:65vw;
	width: 200px;
	opacity: 1;
	z-index: 5;
	flex-wrap: wrap;
	padding: 10px 10px 10px 10px;

	
}
.menu-content {
	margin-top: 2ex;
	font-family: var(--playbar-font-family);
	font-size: smaller;
}
.menu-title {
  width:80%;
	text-align: center;
	font-weight: bold;
	font-family: var(--info-font-family), sans-serif;
	font-size: larger;
/*	border-bottom: 1px dotted var(--firmament-green);*/
	
}
/* night sky phenomena */

#phenomena {
	width: 100vw;
	height: 100vh;
  position: absolute;
  top: 0;
  left: 0;

}

img.phenomena {
	top: 48vw;
	width: 100%;
	position: absolute;
	display: flex;
	opacity: 0;
}
#aurora img, #auroralarc img {
	transition: opacity var(--phenom-fade-seconds) ease;	
}

/* Weather graphs */
#weather-graphs-container {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 45vw;
	width: 100%;
}

.weather-graph {
	position: absolute;
	
}

.weather-graph img {
	max-width:60vw;
	opacity: 0;
	transition: opacity var(--preload-seconds) ease;	
}


@media (max-width: 850px) {
	.weather-graph img {
		
	}
	
	
}


/* Audio gram scrolling   */
#chyron-container {
	
		position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    top: 46vw;
    left: 0;

    
}

#chyron {
    width: 1200%; /* 12 times the viewport width */
    height: 100%;
    display: flex;

    
    animation: scroll 1440s linear infinite; /* 1440s = 24 minutes */
}

#chyron img {
    width: 100%;
    height: 100%;
    opacity: 35%;

}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.loading img {
	position: absolute;
	width: 80%;
	top: 0;
/*	align: center;*/
}

.loading { /* 'Load Screen' properties. */
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 150%;
	opacity: 1;
	color: black;
	background-color: black;
	position: absolute;
	transition: opacity var(--loading-fade-seconds) ease;	
}
.loaded {
	display: none;
}
/* clouds */


img.cloud {
  width: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity var(--clouds-fade-seconds) ease;
}
.rotate img.cloud-base {
  transform-origin: center;
  animation: rotator 1440s infinite linear;
}
.rotate img.cloud-layer {
  transform-origin: center;
  animation: rotator 1200s infinite linear;
}

@keyframes rotator {
	0% { transform: rotate(0); } 

	100% { transform: rotate(4320deg); } /* 360º x 12 */
}

.fade-out img.cloud, img.fade-out {
	opacity: 0;
}
.fade-in img.cloud, img.fade-in {
	opacity: 80%;
}