/*------------------------------------*\
  #WAKING-WORLD-STYLESHEET-2026
\*------------------------------------*/

:root {
	/* These are the default variables used by the Style Drawer. */
	--slate: #000606; /* black */
  
	--eggshell: #fff; /* white */
  
	--spark: rgb(255, 247, 206);
  
	--hyperlink: rgb(231, 211, 255);
  
	--sun: url('../images/whitesun.png');
  
	--clouds: url('../images/brightclouds.png');
  
	--mountain: url('../images/mountain.png');
  
	--sky: linear-gradient(#cfc1d4,#93a1a6);
  
	--glass: linear-gradient(170deg,rgba(207, 130, 195, 0.85) 0%, rgba(78, 0, 62, 0.85) 100%);
  
	--blackglass: linear-gradient(170deg,rgba(220, 92, 146, 0.85) 0%, rgba(238, 235, 225, 0.85) 100%);
  
	--glassrefract: rgba(255, 162, 140, 0.25);
  
	--glassshine: rgba(249, 238, 195, 0.2);
  
  --box-shadow:        0.2em  0.3em 2px     rgba(0, 0, 0, 0.5), 
                inset  0.2em  0.3em 2px     var(--glassrefract), 
                inset    0em  0.1em 0px 0px var(--glassshine), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
                
  --filter-match-shadow: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.25));
  
  --box-shadow-lifted: 0.4em  0.6em 2px     rgba(0, 0, 0, 0.45),
                inset  0.4em  0.6em 2px     var(--glassrefract),
                inset    0em  0.1em 0px 0px var(--glassshine),
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
                
  --lift-animation: scale(1.1) perspective(250px);
  
  --lift-left-anim: scale(1.1) perspective(250px) rotate3d(1, 10, 0, 20deg) translate(-0.1em, -0.1em);
  
  --lift-right-anim: scale(1.1) perspective(250px) rotate3d(2, 10, 0, -20deg) translate(-0.1em, -0.1em);
            
  --box-shadow-white:  0.2em  0.3em 2px     rgba(0, 0, 0, 0.5), 
                inset  0.2em  0.3em 2px     rgba(255, 255, 255, 0.25), 
                inset    0em  0.1em 0px 0px var(--glassshine), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
  
  --box-shadow-black:  0.2em  0.3em 2px     rgba(0, 0, 0, 0.5), 
                inset  0.2em  0.3em 2px     rgba(0, 0, 0, 0.35), 
                inset    0em  0.1em 0px 0px rgba(0, 0, 0, 0.1), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
  
  --box-shadow-gold:   0.2em  0.3em 2px     rgba(0, 0, 0, 0.5), 
                inset  0.2em  0.3em 2px     rgba(255, 205, 180, 0.25), 
                inset    0em  0.1em 0px 0px var(--glassshine), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
  
  --box-shadow-flat:   0.2em  0.3em 2px     rgba(0, 0, 0, 0.5), 
                inset  0.2em  0.3em 2px     rgba(0, 0, 0, 0), 
                inset    0em  0.1em 0px 0px var(--glassshine), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
                
  --shadow-on-glass:   0.1em 0.15em 2px     rgba(0, 0, 0, 0.4), 
                inset  0.1em 0.15em 2px     var(--glassrefract), 
                inset    0em  0.1em 0px 0px var(--glassshine), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
  
  --lifted-on-glass:   0.2em  0.3em 2px     rgba(0, 0, 0, 0.4), 
                inset  0.2em  0.3em 2px     var(--glassrefract), 
                inset    0em  0.1em 0px 0px var(--glassshine), 
                inset -0.1em -0.1em 2px 0px rgba(0, 0, 0, 0.25);
                
  --text-shadow: 0.2em 0.2em 3px rgba(0, 0, 0, 0.7);
  
  --filter-match-text: drop-shadow(0.2em 0.2em 3px rgba(0, 0, 0, 0.7));
  
  --true-shadow: drop-shadow(4px 6px 2px rgba(0, 0, 0, 0.4));
}


/* We use all organic, local Open Font License fonts. */
@font-face {
  /* For the site's title. */
	font-family: "CinzelDecorative";
	src: url("../style/CinzelDecorative-Regular.ttf") format("truetype");
}

@font-face {
  /* For extremely rare cases where we need sans serif. */
	font-family: "OpenSans";
	src: url("../style/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
  /* For everything else. */
	font-family: "Merriweather";
	src: url("../style/Merriweather-VariableFont_opsz,wdth,wght.ttf") format("truetype");
}





/*------------------------------------*\
  #REFERENCE
\*------------------------------------*/

/* CSS properties should be listed alphabetically, BUT sectioned in the following order: */
/* If a property is dependent on another property, it must be listed below that property.

	1. Display
		Hidden 
		Flex 
		Overflow
		
	2. Position
		Z-index
		Transform
	
	3. Content
		Width
		Height
		Background
		Everything about Text
		
	4. Padding
	
	5. Border
		Border-radius (Shape)
	
	6. Margin
*/

/* Our unique classes
  
  
*/



/*------------------------------------*\
  #CSS-RESET
\*------------------------------------*/

/* Let's use Josh W Comeau's CSS reset. I'll mark any changes I make. */
*, *::before, *::after {
	box-sizing: border-box;
}

*:not(dialog) {
  padding: 0;             /* I don't want random padding on <nav> and things. */
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

body {
  display: flex;          /* This is the trick to make our layout responsive. */
  flex-direction: column; /* We're going to start with the mobile layout. */
  align-items: center;    /* Keeps our content center-screen. */
  gap: 2em;               /* To put some space between our three main sections. */
	min-height: 100vh;      /* To never, ever stretch the background. */
	background: var(--sky); /* As a fallback if something goes wrong. */
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	font-family: "Merriweather"; /* I never mix fonts. */
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

#root, #__next {
	isolation: isolate;
}





/*------------------------------------*\
  #STYLE-ON-EVERY-PAGE
\*------------------------------------*/

button:hover {
  /* Universal, so the user always knows they're clicking on a button. */
  cursor: pointer;
}


.sky { 
  /* This is our real background. */
	position: fixed;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-image: var(--clouds), var(--mountain), var(--sky);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: auto;
	image-rendering: pixelated;
}

.sky__sun { 
  /* It's hard to position the sun without an additional element. */
	position: fixed;
	width: 100%;
	height: 333px;
	background-image: var(--sun);
	background-position: top;
  background-repeat: no-repeat;
	background-size: auto;
}





/*------------------------------------*\
  #SECTION-CONTENT
\*------------------------------------*/

.section {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  max-width: 45em;
}

.section--before-main {
  gap: 0.5em;
  margin-top: 3em;
  align-items: end;
}

.section--main {
  margin-bottom: 2em;
}

.section__row {
  display: flex;
  flex-direction: row;
  gap: 1em;
  width: fit-content;
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.section__row:hover .flair--lift, .flair--lift:hover {
  box-shadow: var(--box-shadow-lifted);
  transform: translate(-0.1em, -0.2em);
}


.flair {
  display: block;
  min-width: 1.3em;
  content: "";
  transition: box-shadow 0.3s, transform 0.3s;
  margin-right: -0.6em;
}

.flair--top {
  border-radius: 0 10em 0 0;
}

.flair--bottom {
  border-radius: 0 0 10em 0;
}


.content {
  color: var(--eggshell);
  font-size: 1.15em;
  text-shadow: var(--text-shadow);
  padding: 0.5em 1.1em 0.5em 1.1em;
}

.content--title {
  padding: 0.5em 1.1em 0.5em 1.1em;
}

.content--low-padding {
  padding: 0.25em 1.1em 0.25em 1.1em;
}

.content--high-padding {
  padding: 1em 1.1em 1em 1.1em;
}

.content--top {
  border-radius: 1.2em 1.2em 1.2em 0em;
}

.content--bottom {
  border-radius: 0em 1.2em 1.2em 1.2em;
}

.content--round {
  border-radius: 1em;
}

.content--lock-height {
  height: fit-content;
  align-self: center;
}

.panel {
  /* Typically used for a <figure> containing an <img> */
  width: fit-content;
  height: fit-content;
  transform: perspective(250px) rotate3d(0, 10, 0, -10deg) translateY(0.2em);
  transition: transform 0.3s;
  padding: 0.5em;
}

.panel:hover {
  transform: var(--lift-animation);
}





/*------------------------------------*\
  #SECTION-BACKGROUNDS
\*------------------------------------*/

.bg--main-glass {
  background-image: var(--glass);
  box-shadow: var(--box-shadow);
}

.bg--badge-glass {
  background-image: var(--glass);
}

.bg--side-glass {
  background-image: var(--blackglass);
  box-shadow: var(--box-shadow);
}

.bg--space {
  background-image: url('../images/beautifulstars.png');
	background-color: #000000;
  background-position: bottom;
  box-shadow: var(--box-shadow-black);
  image-rendering: pixelated;
}

.real-shadow {
  filter: var(--true-shadow);
}





/*------------------------------------*\
  #TEXT-CONTENT
\*------------------------------------*/

.paragraph {
  /* Applied to <p> elements. */
  text-indent: 1em;
  line-height: 1.7em;
}

.paragraph:not(:last-child) {
	margin-bottom: 1em;
}

.text-bold {
  font-weight: bold;
}


.title {
  font-size: 2.5em;
  line-height: 1em;
  padding-top: 0.2em;
}

.title--index {
  /* Used to give the title of the site its proper font. */
  font-size: 3em;
  font-family: CinzelDecorative;
  text-align: center;
}


.sub-heading {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
}

.splash-heading {
  font-size: 1.15em;
  font-weight: bold;
}

.caption {
  color: var(--spark);
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
}


.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.badge-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

.badge-list__link {
  height: 1.7em; /* For some reason, <li> just wants to be tall. */
}





/*------------------------------------*\
  #MEDIA-CONTENT
\*------------------------------------*/

.float {
  box-shadow: var(--box-shadow-flat);
}

.float--right {
  float: right;
  margin-left: 0.5em;
}

.float--left {
  float: left;
  margin-right: 0.5em;
}





/*------------------------------------*\
  #INTERACTIVE-CONTENT
\*------------------------------------*/

.link {
  color: var(--spark);
  font-family: "Merriweather";
}

.link:hover {
  color: var(--hyperlink);
}


.list__link {
  line-height: 1.7em;
}

.list__link::before {
  content: url('../images/gem.gif');
	padding-right: 6px;
  filter: var(--true-shadow);
}


.btn {
  color: var(--eggshell);
  font-family: Merriweather;
  text-decoration: none;
  text-shadow: var(--text-shadow);
  white-space: nowrap;
  padding: 0.4em;
  border-radius: 0.5em;
  transition: transform 0.4s, box-shadow 0.4s;
}

.btn:hover {
  color: var(--hyperlink);
}

.btn--lift:hover {
  transform: var(--lift-animation);
}

.btn--header {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1em;
  text-align: center;
}

.badge {
  display: inline-block;
  box-shadow: var(--shadow-on-glass);
  transition: transform 0.3s, box-shadow 0.3s;
}

.badge:hover {
  color: var(--hyperlink);
}


.badge--text {
  height: 1.7em;
  color: var(--spark);
  font-family: "Merriweather";
  line-height: 1.7em;
  text-decoration: none;
  padding-left: 0.4em;
  padding-right: 0.4em;
}

.badge--text:hover {
  transform: var(--lift-animation);
  box-shadow: var(--lifted-on-glass);
}


.badge--img:hover {
  transform: var(--lift-right-anim);
  box-shadow: var(--lifted-on-glass);
}






/*------------------------------------*\
  #NAVIGATION-CONTENT
\*------------------------------------*/

.nav-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.75em;
  row-gap: 1.25em;
}

.nav-list__option {
  list-style-type: none;
  text-align: right;
  transition: transform 0.3s;
}

.nav-list__option:hover {
  transform: var(--lift-left-anim);
}


.btn--nav {
  background-image: var(--glass);
  border-radius: 0.5em;
  box-shadow: var(--box-shadow);
}

.btn--nav:hover {
  box-shadow: var(--box-shadow-lifted);
}

.btn--nav::after {
  content: url('../images/gem.gif');
	padding-left: 0.4em;
  filter: var(--filter-match-text);
}


.flair--nav {
  display: none;
  height: 17.5em;
  border-radius: 10em 0 10em 0;
}




/*------------------------------------*\
  #RESPONSIVE-LAYOUT
\*------------------------------------*/

/* If the screen is smaller than the full section size... */
@media only screen and (max-width: 32.5rem) {
  
  /* Hide panels to make extra space. */
  .panel {
    display: none;
  }
  
}



/* If the screen is much wider than the section size... */
@media only screen and (min-width: 50rem) {
  
  /* Make the rows into columns. */
  body {
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
  }
  
  /* Move everything away from top of the screen. */
  .section {
    margin-top: 2em;
  }
  
  
  /* Set up the vertical nav bar. */
  .section--before-main {
    flex-direction: row;
    margin-right: -1em;
  }
  
  .nav-list {
    flex-direction: column;
    margin-bottom: 0.2em;
  }
  
  .btn--nav {
    background-image: var(--glass);
    border-radius: 0.5em 0 0 0.5em;
    box-shadow: var(--box-shadow);
  }
  
  
  /* Make the nav bar's flair visible. */
  .flair--nav {
    display: inline;
  }
  
}


/* If the screen is wide AND tall (desktop mode)... */
@media only screen and (min-width: 50rem) and (min-height: 50rem) {

  /* Give the body a little bit of room to breathe. */
  .section {
    margin-top: 5em;
  }

}

/*------------------------------------*\
  #STYLE-DRAWER
\*------------------------------------*/

/* Now, this is the CSS that makes the Style Drawer tick. */
#cover {
	/* This is the cover that dims the site when the Style Drawer is open (!) */
  overflow-x: hidden;
	position: fixed;
  top: 0;
  left: 0;
	z-index: 1;
	width: 0;
	height: 100%;
	background: rgb(0, 0, 0);
	opacity: 0%;
	transition: opacity 0.5s;
}

#tray {
	/* This is the tray that contains the button for each theme. */
  overflow-x: hidden;
	position: absolute;
  top: -456px;
  left: 0;
	z-index: 3;
	width: 140px;
	height: fit-content;
	background: radial-gradient(circle, rgb(117, 44, 15) 0%, rgb(80, 30, 11) 100%);
	border: 3px ridge #933e1e;
	box-shadow:  3px  4px 2px     rgba(0, 0, 0, 0.5), /* Unique shadow. */
				inset  4px  4px 4px     rgba(0, 0, 0, 0.5), 
				inset -4px -4px 5px 0px rgba(0, 0, 0, 0.3);
  transition: 1s;
}

.flextray {
  /* This organizes the buttons that will select the theme. */
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	align-items: center;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}


#traybutton--shut, #traybutton--open {
  /* I shouldn't use IDs for this, but I need Javascript targets. */
	display: flex;
  align-items: center;
	flex-direction: column-reverse;
	position: absolute;
	top: -22px;
	left: 0.5em;
  z-index: 2;
	height: 3.25em;
	width: 3.4em;
  background: var(--glass);
  color: var(--eggshell);
  font-family: "Merriweather";
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.7);
  padding-bottom: 4px;
  border: none;
  border-radius: 0;
  box-shadow: var(--box-shadow);          
	transition: top 1s, transform 0.5s, box-shadow 0.5s;
}

#traybutton--shut:hover {
  /* When the tray is shut, the button pulls down. */
  color: var(--hyperlink);
	transform: translate(0px, 5px);
}

#traybutton--open:hover {
  /* When the tray is open, the button pulls back up. */
  color: var(--hyperlink);
	transform: translate(0px, -5px);
}





/*------------------------------------*\
  #STYLE-PREVIEWS
\*------------------------------------*/

.preview {
	width: fit-content;
  font-family: "Merriweather";
  text-shadow: var(--text-shadow);
  padding: 2px 4px 3px 4px;
  /* I use px here because I want the tray size to be exactly right. */
  border: none;
  transition: transform 0.3s;
}

.preview:hover {
  transform: var(--lift-animation);
}

.preview--light {
	background: linear-gradient(170deg, rgba(194, 133, 185, 0.85) 0%, rgba(78, 0, 58, 0.85) 100%);
	color: rgb(255, 248, 212);
	box-shadow: var(--box-shadow-white);
}

.preview--light:hover { color: rgb(231, 211, 255); }


.preview--red {
	background: linear-gradient(170deg, rgba(206, 26, 52, 0.85) 0%, rgba(74, 8, 18, 0.85) 100%);
	color: #FFCB88;
	box-shadow: var(--box-shadow-black);
}
.preview--red:hover { color: #FF754B; }


.preview--orange {
	background: linear-gradient(170deg, rgba(249, 134, 64, 0.85) 0%, rgba(179, 67, 0, 0.85) 100%);
	color: #FFFEB7;
	box-shadow: var(--box-shadow-gold);
}

.preview--orange:hover { color: #B4FF80; }


.preview--yellow {
	background: linear-gradient(170deg, rgba(212, 162, 68, 0.9) 0%, rgba(171, 96, 0, 0.85) 100%);
	color: #FCFF90;
	box-shadow: var(--box-shadow-gold);
}

.preview--yellow:hover { color: #FFE300; }


.preview--green {
	background: linear-gradient(170deg, rgba(0, 94, 37, 0.85) 0%, rgba(0, 15, 2, 0.85) 100%);
	color: #90E5A6;
	box-shadow: var(--box-shadow-black);
}

.preview--green:hover { color: #00A05D; }


.preview--blue {
	background: linear-gradient(170deg, rgba(46, 166, 225, 0.8) 0%, rgba(0, 62, 108, 0.8) 100%);
	color: #C8FFF2;
	box-shadow: var(--box-shadow-gold);
}

.preview--blue:hover { color: #32E2FF; }


.preview--dark {
	background: linear-gradient(170deg, rgba(40, 40, 40, 0.85) 0%, rgba(40, 0, 15, 0.85) 100%);
	color: #EEAAF0;
	box-shadow: var(--box-shadow-black);
}

.preview--dark:hover { color: #D247B0; }


.preview--true {
	background: linear-gradient(170deg, rgba(255, 58, 243, 0.85) 0%, rgba(175, 0, 255, 0.85) 100%);
	color: #B5FFF5;
  box-shadow: var(--box-shadow-black);
}

.preview--true:hover { color: #FFFD6C; }


.preview--paper {
	background: rgb(160, 138, 119);
	color: rgb(255, 247, 206);
	box-shadow: var(--box-shadow-flat);
}

.preview--paper:hover { color: #FFFFFF; }





/*------------------------------------*\
  #ZONELETS-INTEGRATION
\*------------------------------------*/

#nextprev {
	text-align: center;
}

#disqus_thread {
	margin-top: 1.6em;
}