html {
  background-image: url("/static/images/1440_auroras_explainer_feat.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6, p , li{
  color:var(--color-default-text);
}

h3, h4,
.emphasis p{
  text-align: center;
}

.emphasis{
  width:70%;
  margin:0 auto;
}

.table-of-contents h3,
.table-of-contents h4{
  text-align: left;
}

p{
  hyphens: auto;
  text-align: justify;
}


/* Ysaie says browsers often cache the .css file
 so hard refresh with ctrl-shitf-r 
 #cc99ff is light purple
 #33ccff is light blue
 #66ffcc is seafoam green

 Ysaie had padding in article at 1rem.
 background-color for acticle was #000000bb for a sheer black
 */

.footer-left{
}

.footer-right{
}

a:link {
  color:var(--color-link);
  background-color: transparent;
  text-decoration:underline;
}

a:visited {
  color:var(--color-link-visited);
  background-color: transparent;
  text-decoration: underline;
}

header {
  background-color:var(--color-default-background);
  padding: 10px;
}

article {
  background-color:var(--color-default-background);
  padding: 50px;
}

footer {
  color:var(--color-default-text);
  background-color:var(--color-default-background);
}



.centered-text {
  margin: 0 10%;
}

video {
  width: 90%;
  margin: 0 auto;
  display: block;
}

/* BEGIN stuff that belongs to the presentation plugin */

/* You can edit the settings in here, just don't delete any sections c: - Echo */

/* Styling for the slide image */
.presentation-slide {
  display: block;
  max-width: 90%;
  max-height: 80vh;
  margin: 0 auto;
}

/* Styling for the audio player */
.presentation-audio {
  display: block;
  margin: 0 auto;
  width: 90%;
  height: 100px;
}

/* Styling for the button container (mostly structural, the only thing you might care about is
 * adjusting the margin) */
.presentation-buttons {
  display: flex;
  justify-content: center;
  margin: 8px auto;
}

/* Styling for the back button */
.presentation-back-button {
  flex: 0 0 auto;
  margin: 0 8px;
}

/* Styling for the next button */
.presentation-next-button {
  flex: 0 0 auto;
  margin: 0 8px;
}

/* Styling for the subtitles (restricted to things like color and font size) */
::cue {
  font-size: 1.5rem;
}

/* END stuff that belongs to the presentation plugin */

/* BEGIN stuff that belongs to the color switcher plugin */

@media (prefers-color-scheme: dark) {
	:root {
		--color-default-background: #000000bb;
		--color-default-border: #ffffff;
		--color-default-text: #ffffff;

		--color-link: #66ffcc;
		--color-link-visited: #66ffcc;
		--color-link-hover: #66ffcc;
	}
}

.dark-mode {
	--color-default-background: #000000bb;
	--color-default-border: #ffffff;
	--color-default-text: #ffffff;

	--color-link: #66ffcc;
	--color-link-visited: #66ffcc;
	--color-link-hover: #66ffcc;
}


@media (prefers-color-scheme: light) {
  :root {
    --color-default-background: #ffffff;
    --color-default-border: #000000;
    --color-default-text: #000000;

    --color-link: ##003300;
    --color-link-visited: #003300;
    --color-link-hover: #003300;
  }
}

.light-mode {
  --color-default-background: #ffffff;
  --color-default-border: #000000;
  --color-default-text: #000000;

  --color-link: #003300;
  --color-link-visited: #003300;
  --color-link-hover: #003300;
}


#color-scheme-switcher {
	background-color: #ffffff;
	border: 1px solid #000000;
  text-color: #000000;
	border-radius: 8px;
	position: absolute;
	top: 0;
	right: 0;
	padding: 8px;
	margin: 8px;
}

#color-scheme-switcher label {
	cursor: pointer;
}

#color-scheme-switcher input {
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	#color-scheme-switcher {
		position: fixed;
	}
}

/* END stuff that belongs to the color switcher plugin */