/*
 load serif font
*/


@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,600&family=Mulish:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@property --alpha {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}
@propert --deg {
  syntax: "<angle>";
  inherits: false;
  initial-value: -20deg;
}
:root {
  --base-scale:calc(100vw / 75);
  --h1-font-size:clamp(3.125em, calc(var(--base-scale) * 3), 4rem);
  --h2-font-size:clamp(2.35em, calc(var(--base-scale) * 2.3), 3.5rem);
  --h3-font-size:clamp(2.15em, calc(var(--base-scale) * 2.1), 3rem);
  --h4-font-size:clamp(1.7em, calc(var(--base-scale) * 1.7), 2.5rem);
  --h5-font-size:clamp(1.5em, calc(var(--base-scale) * 1.5), 2.25rem);
  --h6-font-size:clamp(1.25em, calc(var(--base-scale) * 1.25), 2rem);
  --card-copy-size: clamp(1.4375em, calc(var(--base-scale) 1.4375em), 2.875rem);
  --card-title-size: clamp(1.3125em, calc(var(--base-scale) 1.3125em), 2.625rem);
  --base-font-size:clamp(1.25em, calc(var(--base-scale) *1.25), 2rem);
  --note-font-size:clamp(.8em, calc(var(--base-scale) *.8), 1.6rem);
  --padding-size:max(1em, min(2em, calc(var(--base-scale) * 2)));
  --border-radius:max(1em, min(3em, calc(var(--base-scale) * 3)));
  --dark-color: 255, 88.9%, 10.6%;
  --dark-neutral: 255, 0%, 15%;
  --light-color: 55, 0%, 100%;
  --link-color: 180, 100%, 75%;
  --link-color-dark: 180, 75%, 40%;
  --quote-color: var(--dark-color);
  --text-shadow: .0625em .0625em .0625em hsla(var(--dark-color), .5);
  --modalFrameBg: hsla(235, 0%, 0%, .5);
  --modalBoxShadow: .0625rem .0625rem .5rem .125rem rgba(0,0,0, .3);
  --desc-bg-color: 255, 0%, 95%, .85; 
  --desc-copy-color: var(--dark-neutral); 
  --element-color: 255, 0%, 90%;
  --screen: 255, 0%, 0%;
  --bg-position: 0 0;
  --copy-color: var(--dark-neutral);
  --audio-color: 255, 0%, 100%;
  --element-vid-width: 110%;
  --element-vid-height: 110%;
  --text-out: none;
  --thumb-top: 0;
	--bgc: var(--dark-color);
	--cs2: 0, 100%, 50%;
	--cs3: 60, 100%, 50%;
  --teal: 160, 100%, 60%;
  --subtitle-color: var(--light-color);
  --journal-bullets: var(--light-color);
}
@media screen and (max-width: 900px) {
  :root {
    --h1-font-size:2rem;
    --h2-font-size:1.75rem;
    --h3-font-size:1.5rem;
    --h4-font-size:1.25rem;
    --h5-font-size:1.125rem;
    --base-font-size: 100%;
  }
}
html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,
table,tr,td,th,address,blockquote,img {
  margin:0;
  padding:0;
}
img, fieldset, object {
  border:none;
}
*, *:after, *:before {
  flex:1 0 auto; /* safari bugfix */
  box-sizing:border-box;
}
button, label {
  cursor:pointer;
}
html {
  font-size: 100%;
}
html, body {
  height:100%;
}
body, button, input, table, textarea, select {
  font: 300 var(--base-font-size)/1.35 'Mulish', sans-serif;
  color: hsl(var(--copy-color));
  word-spacing: -.018em;  
  letter-spacing: -.018em;
  height: 100%;
  width: 100%;
}
body {
  background-color: black;
}
.body-wrap {
  height: 100%;
  width: 100%;
}
body.dark {
  background-color: hsl(var(--dark-color));
}
a {
  color: hsl(var(--link-color));
  text-decoration: none;
}
a p {
  word-break: normal;
}
a.dark {
  color: hsl(var(--link-color-dark));
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5em;
  font-weight: 500;
  color: hsl(var(--element-color));
}

h1, h2, h3 {
  font-family: 'Bad Script', cursive;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: -.05em;
}
h1 {
  font-size: var(--h1-font-size);
}
h2 {
  font-size: var(--h2-font-size);
}
h2 small {
  font: .5em/1 'Mulish', sans-serif;
}
h3 {
  font-size: var(--h4-font-size);
}
h4 {
  font-size: var(--h5-font-size);
}
h5 {
  font-size: var(--base-font-size);
}
h6 {
  font-size: var(--base-font-size);
}
p {
  margin-bottom: 1.125em;
  max-width: 30em;
}
small {
  font-size: .75em;
}
ol {
  margin: 0;
  padding: 0;
  max-width: 24em;
}
ol li {
  margin: 0;
  padding: 0;
}
.clean-list {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.clean-list li {
  margin: 0 0 1em;
  padding: 0;
}
strong {
  font-weight: 500;
}
i {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25em;
  text-transform: uppercase;
}
em {
  font-style: italic;
}
.masthead {
  height: 54px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: hsla(0, 0%, 0%, 1);
  z-index: 4;
}
.masthead > * {
  flex: 1 1 auto;
}
.logo {
  height: 40px; /* based on masthead */
  margin-top: 6px;
}
.main-nav ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 1.25rem;
  height: 100%;
  align-items: stretch;
}
.main-nav li {
  display: flex;
  flex-direction: column;
}
.main-nav a {
  display: block;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}
.main-nav .nav-link {
  padding-top: 10px;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: .0625em;
  height: .125em;
  width: 100%;
  left: 0;
  transform-origin: center;
  opacity: 0;
  background-color: hsl(var(--link-color));
}
.main-nav li:hover, .main-nav a.active {
  background-color: hsla(var(--light-color), .175);
}
.main-nav a.located::after {
  opacity: 1;
}
@media screen and (max-width: 960px) {
  .main-nav {
    position: relative;
  }
  .main-nav ul {
    background-color: hsla(0, 0%, 0%, 1);
    position: absolute;
    top: -500%;
    opacity: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 0 .5em .5em;
    flex-direction: column;
    transition: opacity .25s ease-out, top .25s ease-out;
    box-sizing: border-box;
  }
  .main-nav ul.show  {
    opacity: 1;
    top: 54px;
    transition-timing-function: ease-in, ease-in;
  }
  .main-nav a {
    text-align: left;
  }
}
@media screen and (max-width: 800px) {
  .main-nav ul {
    width: 50vw;
  }
}

@media screen and (max-width: 640px) {
  .main-nav ul {
    width: 100vw;
    padding: 0 2rem 1rem;
  }
}
.site-name {
  padding: 0 0 0 1rem;
}
@media screen and (max-width: 800px) {
  .site-name {
    flex-basis: 15rem;
  }
}
.site-name p {
  font-size: 1.25rem;
  margin: 0;
  padding: 0;
}

a.menu-toggle {
  height: 1.25rem;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 2rem;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
}
.main-nav a.menu-toggle.active {
  background-color: transparent;
}
.menu-toggle > span {
  background: hsl(var(--link-color));
  border-radius: .5rem;
  display: block;
  height: .25rem;
  left: 0;
  width: 100%;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}
.menu-toggle span:nth-child(1) {
  top: 0;
}

.menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) {
  top: .5rem;
}

.menu-toggle span:nth-child(4) {
  top: 1rem;
}

.menu-toggle.active span:nth-child(1) {
  top: .5rem;
  width: 0%;
  left: 50%;
}
.menu-toggle.active span:nth-child(2) {
  transform: rotate(45deg);
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.menu-toggle.active span:nth-child(4) {
  top: .5rem;
  width: 0%;
  left: 50%;
}
.stagger span {
  display: block;
}
.stagger .ind1 {
  text-indent: 1em;
}

.stagger .ind2 {
  text-indent: 2em;
}
.stagger .ind3 {
  text-indent: 3em;
}
.stagger .ind4 {
  text-indent: 4em;
}
/* 
 menu panels
*/

.menu-panel {
  opacity: 0;
  scroll-behavior: smooth;
  position: fixed;
  top: 0;
  left: -1000em;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  z-index: 4;
  transition: opacity .3s ease-out, top .3s  ease-out;
}
@media screen and (max-width: 960px) {
  .menu-panel {
    overflow-x: visible;
    overflow-y: visible;
  }
}
.menu-panel.show {
  opacity: 1;
  top: 54px;
  transition-timing-function: ease-in;
  left: 0;
}
.menus {
  position: relative;
  background-color: hsla(0, 0%, 0%, 1);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  height: 100%;
  align-content: flex-start;
  padding: 1.5rem 2rem;
  z-index: 4;
  border-top: .0625rem solid hsla(var(--light-color), .15);
}
#all-menu a.menuClose + .category {
  grid-column: auto / span 2;
}

@media screen and (max-width: 1366px) {
  .menus {
    grid-template-columns: repeat(5, 1fr);
  }
  #all-menu .menus {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 1024px) {
.menus, #all-menu .menus {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.5em;
  }
}
@media screen and (max-width: 960px) {
  .menus, #all-menu .menus {
    display: block;
    position: relative;
    height: 100vh
  }
}
@media screen and (max-width: 640px) {
  .menus {
    padding: 1rem;
  }
}
.category {
  font-size: 1.25rem;
}
.category p {
  color: hsl(var(--light-color));
}
.category ul {
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
}
.category #allPsych ul {
  columns: 2 8em;
}
@media screen and (max-width: 960px) {
  .category #allPsych ul {
    columns: 1;
  }
}

.category li {
  margin: 0 0 .5em;
  padding: 0;
}


.category.center {
  text-align: center;
}
.category.center a.circle {
  display: block;
  width: 50%;
  margin: 1em auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.category.center a.circle img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 960px) {
  .category > div[id] {
    position: absolute;
    top: -1000em;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background-color: hsl(0,0%,0%);
    transition: opacity .25s ease-out, top .25s ease-out;
  }
  .category > div[id].show {
    top: 0;
    opacity: 1;
    transition-timing-function: ease-in, ease-in;
  }
  .closeSub {
    display: inline-block;
    margin-bottom: 1rem;
    color: hsl(var(--light-color));
  }
  .closeSub::before {
    content: '\2039';
    display: inline-block;
    padding-right: .25em;
  }
  .category a > p.menu-header::after {
    content: '\203A';
    display: inline-block;
    padding-left: .25em;
  }

}
@media screen and (max-width: 960px) {

  .category > div[id] {
    padding: .5rem 1rem 1rem;
  }

}
main {
  z-index: 3;
  position: relative;
  min-height: 100%;
}
main:not(.no-pad) {
  padding-top: 5rem;
}
main.info-page {
  background-color: hsl(var(--dark-color));
  padding: 2em 0 5em;
  min-height: 100vh;
  scroll-behavior: smooth;
}
main hr {
  border: solid hsl(var(--element-color));
  border-width: .0625em 0 0;
  margin: 2em 0 1em;
  width: 5em;
}
.info-page > .element {
  --deg: 0deg;
  min-height: 30em;
  max-width: none;
  margin-bottom: 0;
  padding: 6em 60% 2em 6em;
  background: var(--bgImage);
  box-shadow: inset 1em 1em 2em 2em hsl(255, 89%, 10%), inset -1em -1em 2em 2em hsl(255, 89%, 10%);
}
.info-page > .element.right-side {
  padding-left: 60%;
  padding-right: 6em;
}
.info-page h2, .info-page p {
  color: hsl(var(--copy-color));
}
.info-page .element-links {
  margin-top: 3em;
  text-align: right;
}

.continue-links.light a {
  text-shadow: 0 0 .125em hsla(var(--dark-color), .9);
}
@media screen and (max-width: 768px) {
  .info-page > .element {
    --deg: 0deg;
    min-height: auto;
    max-width: none;
    margin-bottom: 2em;
    padding: 55% 1em 1em;
    background: radial-gradient(circle at 50% 16%, hsla(var(--dark-color), 0), hsla(var(--dark-color), 0) 15%, hsla(var(--dark-color), 1) 17%), var(--mobBg), linear-gradient(180deg, hsla(var(--dark-color), 0) 55%, hsla(var(--dark-color), 1));
    box-shadow: inset 0 .0625em .0625em .0625em hsl(255, 89%, 10%);
  }
  .info-page h2, .info-page p {
    color: hsl(var(--light-color));
  }
  .info-page > .element.right-side {
    padding-left: 1em;
    padding-right: 1em;
  }
  .info-page .element-links {
    margin-top: 2em;
  }
  .info-page .element-links a.dark {
    color: hsl(var(--link-color));  
  }
}
main.legal {
  font-size: .75em;
}
main.legal section {
  max-width: 48em;
}
main.legal section:first-child {
  padding-top: 4em;
}

main.legal h2 {
  font-size: var(--h5-font-size);
  font-family: 'Mulish', sans-serif;
}
main.legal.about-page h2 {
  font-size: var(--h5-font-size);
}
main.legal h3 {
  font-size: var(--h6-font-size);
  font-family: 'Mulish', sans-serif;
  max-width: none;
  margin-top: 2em;
}
main.legal h4 {
  font-size: var(--base-font-size);
  font-weight: 400;
}
.legal h3.about-title {
  margin-top: 1em;
  font-size: var(--h6-font-size);
}
.legal p {
  max-width: none;
}
.legal strong {
  font-weight: 500;
}
.pii-info {
  list-style-position: inside;
  margin-left: 0;
  padding-left: 0;
  max-width: none;
  width: 100%;
}
.pii-info li {
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 1.5em;
}
.pii-info li::marker {
  font-size: var(--h6-font-size);
  font-weight: 500;
}
main.legal .pii-info h3 {
  display: inline-block;
}

.pii-info li p {
  max-width: none;
  width: 100%;
}
main > section {
  padding: 2em 2em 2em 10%;
  max-width: 36em;
  position: relative;
}
main > .poem {
  max-width: 44em;
}
main.center > section {
  padding: 1em 2em 2em;
  margin: auto;
}
main section.introduction {
  max-width: 42em;
}
main section.introduction p {
  max-width: none;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  main.center > section {
    padding: 1em;
  }
}
main.bleed > section {
  max-width: none;
}
main.element-index > section {
  padding-left: 3%;
}
main > section li {
  margin: 0 0 1em 1em;
}
main h2, main h3 {
  line-height: 1.25;
}
main h3 {
  max-width: 17em;
  line-height: 1.5;
}
.top-layer {
  position: relative;
  z-index: 4;
}
.shorten > .exercise.top-layer {
  max-width: 38em;
}
.media-carousel + .exercise.top-layer {
  max-width: 36em;
  margin: 1em 0 0;
}
.element-index {
  position: relative;
  overflow: hidden;
  background: var(--index-bg);
}
@media screen and (max-aspect-ratio: 4/3) {
  .element-index {
    background-position: var(--mob-index-bg-pos);
    background-size: auto 100vh;
    background-repeat: repeat;
    background-attachment: scroll;
  }
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .element-index {
    background-position: var(--mob-index-bg-pos);
    background-size: auto 100vh;
    background-repeat: repeat;
    background-attachment: scroll;
  }
}
.banner, main.center .banner {
  width: 100%;
  padding-bottom: 0;
  position: relative;
}


@media screen and (orientation: portrait) and (max-width: 800px) {
  main > section, main > .poem, main.center .banner {
    max-width: none;
    width: 100vw;
  }
}
.banner h2 {
  margin-bottom: .25em;
}
h2 small {
  display: inline-block;
  vertical-align: baseline;
  font-size: .4em;
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
}
.subtitle {
  font: 500 1.34em 'Mulish', sans-serif;
  max-width: none;
  color: hsl(var(--subtitle-color));
  text-shadow: none;
}
.subtitle-2 {
  font: 500 1.12em 'Mulish', sans-serif;
  max-width: none;
  color: hsl(var(--subtitle-color));
  text-shadow: none;
}
.subtitle span {
	color: hsla(var(--subtitle-color), 0);
	display: inline-block;
}
.wave span {
	--alpha1: .125;
	--alpha2: 1;
  --bgc: var(--subtitle-color);
  --_c: #0000 55%, hsla(75, 100%, 80%, var(--alpha2)) 61% 62%, #0000 70%;
	background: 
    /* radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s) / var(--_s),
		radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s) / var(--_s),
		radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0 / var(--_s),
		radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0 / var(--_s),
		repeating-conic-gradient(
      hsla(var(--bgc), var(--alpha1)) 0 25%,
      hsla(var(--bgc), 0) 0 50%
		) 0 0 / var(--_s),
		radial-gradient(var(--_c)) 0 calc(var(--s) / 2) / var(--s) var(--s), */
		hsl(var(--bgc));
	-webkit-background-clip: text;
	background-clip: text;
	animation:/* 30s linear 1 forwards shiftwaves, */
		20s linear 1 forwards shiftcolors;
	background-blend-mode: screen;
}
.shiftgrad span {
  --alpha: 1;
	background: 
    hsl(var(--subtitle-color))
    radial-gradient(
      circle,
      hsla(var(--subtitle-color), 1),
      hsla(var(--cs1), var(--alpha)),
      hsla(var(--cs2), var(--alpha))
    )
    0 0/190% 3em repeat;
	-webkit-background-clip: text, text;
	background-clip: text, text;
	animation: 10s linear 1 forwards shiftgrad;
  -moz-animation: 10s linear 1 forwards shiftgradFF;
  
}
.banner .subtitle {
  margin-bottom: 0;
}

.icon {
  width: 1.5em;
  height: 1em;
  vertical-align: middle;
  text-align: center;
}
.social .icon {
  padding-right: .25em;
}
.social .icon > img {
  height: 1em;
  vertical-align: top;
}
.social .icon.fb  {
  margin-top: -.125em;
}
.social .icon.twx  {
  margin-top: -.125em;
}
.icon.j-water-ic {
  margin-top: .0625em;
}
.audio {
  display: flex;
  max-width: 32rem;
  width: 100%;
  margin: 0;
  padding: .33333em;
  background-color: hsla(var(--element-color), .33333);
  border-radius: .25em;
  justify-content: space-between;
  align-items: center;
}
.audio > * {
  flex: 1 1 auto;
}
.audio .runtime {
  display: inline-block;
  flex: 0 1 3em;
  font-size: .45em;
  color: hsl(var(--audio-color));
  margin-left: .5em;
  font-weight: 400;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to { transform: translateY(0); }
  40%, 43% { transform: translateY(-30px); }
  70% { transform: translateY(-15px); }
  90% { transform: translateY(-4px); }
}
.journal-prompt {
  animation: fadeIn 1s ease-out 2s forwards, bounce 1s ease 3s 1; /* fade in, then bounce */
  opacity: 0;
  font-size: 1em;
  position: var(--posType);
  right: var(--right);
  top: var(--top);
  z-index: 5;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .journal-prompt {
    top: var(--mobTop);
    right: 1%;
  }
}
.journal-prompt:first-of-type {
  margin-bottom: 2em;
}
.journal-prompt > a {
  display: inline-block;
  color: hsl(var(--element-color));
  text-decoration: none;
  border: .079em solid hsl(var(--element-color));
  border-radius: 50%;
  padding: 1em .5em 0;
  aspect-ratio: 1 / 1;
  width:5.8em;
  text-align: center;
  font-size: .7em;
  line-height: 1.05;
  background-color: hsla(var(--glow), var(--jpAlpha));
  box-shadow: 0 0 0.3em 0.25em hsla(var(--glow), var(--jpAlpha));
  word-break: normal;
}

.journal-prompt .icon {
  padding-right: .25em;
}
figure.quotes {
  max-width: var(--max-width);
  line-height: 1.8;
  margin: 1em 0;
  color: hsl(var(--quote-color));
  text-shadow: var(--text-out);
}
.quotes figcaption {
  font-style: italic;
  font-size: var(--note-font-size); 
  text-align: right ;
}

.quotes blockquote {
  font: italic 1.25em/1.2 'Cormorant Garamond', serif;
  position: relative;
  quotes: "\201C""\201D";
}
.quotes blockquote::before, .quotes blockquote::after {
  content: open-quote;
  position: absolute;
  top: -.2em;
  left: -.4em;
  font-size: 7em;
  line-height: 1;
  font-family: 'Cormorant Garamond', serif;
  color: hsla(var(--element-color), .3);
  text-shadow: none;
}

.quotes blockquote::after {
  content: close-quote;
  top: initial;
  bottom: -.5em;
  left: initial;
  right: -3rem;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  figure.quotes {
    max-width: none;
  }
  .quotes blockquote::before {
    left: -.25em;
  }
  
  .quotes blockquote::after {
    right: -1rem;
    left: initial
  }
}
.video {
  padding: 5rem 10% 2em;
  background-color: hsl(255, 100%, 0%);
  box-shadow: 0 0 .5em .5em hsl(255, 100%, 0%);
  margin-bottom: .5em;
  display: flex;
  align-items: center;
  position: relative;
}
.video-player {
  flex: 0 1 80%;
  margin: 0 auto;
  aspect-ratio: 16 /9;
}
.transcript-group {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin: auto;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .transcript-group {
    grid-template-columns: 1fr;
  }
}
.content-item {
  max-width: 24em;
  margin: auto;
}
.transcript {
  line-height: 1.5;
  max-width: 28em;
  border-radius: .5rem;
}

.transcript-item h2, .transcript-item h3 {
  font-size: var(--h5-font-size);
}
.goto-links {
  padding: .5em 1em;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .goto-links {
    padding: 0;
  }
}
.goto-content-links {
  list-style: none;
  margin: 1em auto;
  max-width: 32em;
  padding: 0;
}
.goto-content-links li {
  margin: 0 .5em .5em 0;
  padding-left: 0;
}
.goto-content-links li:last-child {
  margin-top: 1em;
} 
main.content-page .creator-bio {
  font-size: .8em;
  padding-top: 0;
}
.info-page .creator-bio {
  margin-bottom: 2em;
}

.group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 30em;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .group:not(.umbrella) {
    grid-template-columns: 1fr !important; /* override inline styles for desktop */
  }
}
.flex-group {
  display: flex;
  gap: 1em;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-group img:first-child {
  flex: 1 1 7em;
  max-width: 7em;
  margin-top: .4em;
}
.flex-group p:last-child {
  max-width: 20em;
}
.info-page .flex-group p:last-child {
  max-width: 36em;
}
.stagger p {
  width: 33%;
  text-align: center;
  margin-left: 0;
}
.stagger p:nth-child(2n) {
  width: 55%;
  margin-left: auto;
  margin-right: 1em;
  margin-top: 1.5em
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .flex-group {
    flex-direction: column;
  }
  .stagger p, .stagger p:nth-child(2n) {
    width: 66%;
  }
}
.umbrella {
  gap: 1.5em;
  background: var(--background);
  font-size: 0.7em;
}
.umbrella .item {
  padding-top: 9.35em;
}
.a-right {
  text-align: right;
}

.umbrella ul {
  list-style: none;
  margin: 1.25em 0 0;
  padding: 0;
}
.umbrella li {
  margin: 0 0 .5em;
  padding: 0;
}
.umbrella h3 {
  font: var(--h5-font-size) 'Mulish', sans-serif;
  font-weight: 500;
  color: hsl(225, 30%, 95%);
}
.matrix .element-group {
  display: flex;
  flex-direction: row;
  margin: 0 auto 2.75em;
  align-items: center;
  justify-content: center;
  width: 75%;
}
@media screen and (max-width: 1024px) {
  .matrix .element-group {
    width: 95%;
  }
}
@media screen and (max-width: 960px) {
  .matrix .element-group {
    flex-direction: column;
    margin-bottom: 2em;
  }
}
.element-item {
  flex: 0 1 27.5%;
  text-decoration: none;
  aspect-ratio: 43 / 44;
}
.element-item:not(.wide):not(:last-child){
  margin-right: 2.7em;
}
.element-item.wide {
  flex-basis: 50%;
}
.element-item .item {
  position: relative;
  height: 100%;
  border-radius: 1.5em;
  box-shadow: 0 0 .125em .45em hsla(var(--element-color), .9);
  overflow: hidden;
  transform: translateZ(0); /* Safari over flow fix for embedded vidoes */
}
.element-item .media {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.element-item.wide, .element-item.wide .media {
  aspect-ratio: 43 / 24;
}

@media screen and (max-width: 960px) {
  .element-item, .element-item.wide {
    flex: 1 1 15em;
    aspect-ratio: 43 / 44;
    max-width: 15em;
  }
  .element-item:not(.wide):not(:last-child){
    margin-right: 0;
    margin-bottom: 2em;
  }
  .element-item.wide {
    flex-basis: 15em;
  }
  
  .element-item.wide .media {
    aspect-ratio: 43 / 44;
  }
}
@media screen and (max-width: 640px) {
  .element-item, .element-item.wide {
    flex-basis: 10em;
    max-width: 10em;
  }
}
.media .asset {
  position: absolute;
  aspect-ratio: var(--vid-ratio);
  height: var(--element-vid-height);
  top: var(--top);
  left: var(--left);
  z-index: 0;
}
@media screen and (max-width: 960px) {
  .media .asset {
    left: calc(var(--left) - 5%);
  }
}
.media img.asset {
  height: var(--thumb-height);
  aspect-ratio: var(--vid-ratio);
  top: var(--thumb-top);
  left: var(--thumb-left);
}
.element-item .content {
  background: linear-gradient(to top, rgba(0,0,0, .6), rgba(0, 0, 0, 0) 25%), 0 0/ 100% auto no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  text-shadow: var(--text-shadow);
  padding: .2em .25em .5em;
  color: hsl(var(--light-color));
  font-size: .8em;
}
.element-item .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 1.66em;
  background-color: hsla(var(--desc-bg-color));
  padding: 0 .5em 1em;
  opacity: 0;
  transition: opacity .3s ease-out;
  text-align: center;
  align-self: flex-start;
  color: hsl(var(--desc-copy-color));
  text-shadow: none;
  font-weight: 300;
  margin-bottom: 0;
}
.element-item:hover .desc {
  opacity: 1;
  transition-timing-function: ease-in;
}
.element-item .title {
  flex: 0 1 auto;
  align-self: center;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
}

.journal-questions h3 {
  font-size: var(--h5-font-size);
}
.copy {
  max-width: 16em;
  margin: 0 auto;
  padding: 0 1em 2em;
}
.time {
  font-size: .5em;
  margin-left: 1em;
  vertical-align: middle;
}

.cta {
  text-align: center;
  margin-bottom: 1em;
}
.cta .cta-button {
  color: hsl(var(--dark-neutral));
  background-color: hsl(45, 70%, 70%);
  display: inline-block;
  padding: .25em 1em;
  border-radius: .25em;
  transition-timing-function: ease-out;
  transition-duration: .125s;
  margin-right: 3em;
  word-break: normal;
}
.cta .cta-button:hover, .cta .cta-button:focus {
  background-color: hsl(45, 70%, 75%);
  transition: background-color .125s ease-in;
}

/*
  home page intro and mandala animations
*/
.home {
  background: hsl(255, 90%, 5%) radial-gradient(at 100% 25%, hsl(255, 90%, 15%), hsl(255, 90%, 7%) 60%);
  position: relative;
  overflow: hidden;
}
#smokeCursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
}
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(brighterStars-tile.webp) 0 0/100% auto repeat;
  z-index: 1;
  opacity: 0;
}
.bg-image::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  background: url(rotating-stars-tile.webp) 0 0 /100% auto repeat;
}
.bg-image.play {
  animation: 1s ease-in forwards .5s fadeIn;

}
.bg-image.play::after {
  animation: 120s linear infinite rotate;
}
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 99vh;
  padding: 0 0 0 4em;
  text-align: left;
  opacity: 0;
  animation: 1s linear .5s forwards fadeIn;
  max-width: none;
  z-index: 3;
  pointer-events: none;
  position: fixed;
  top: 0;
}
@media screen and (orientation: portrait) and (max-width: 960px) {
  .home {
    height: 100vh;
  }
  .intro {
    padding: 2em;
    justify-content: flex-start;
  }
  .bg-image {
    width: 200%;
    height: 100vh;
    left: -50%;
    transform-origin: 50% 40%;
  }
}
.intro.hide {
  animation: .5s ease-out forwards intro;
}
.intro > * {
  flex: 0 1 auto;
}
.intro h2.intro-title {
  font-family: 'Mulish', sans-serif;
  color: hsla(var(--light-color), .75);
  font-size: 4.5em;
  text-transform: uppercase;
  margin-bottom: 1em;
  line-height: 0;
}

.intro h2.intro-title .regular {
  font-weight: 100;
  font-size: .75em;
  line-height: .85;
}
.intro h2.intro-title .ital {
  font-family: 'Cormorant Garamond', 'serif';
  font-style: italic;
}
.intro h2.intro-title .ital .initial {
  font-family: 'Bad Script', cursive;
  font-weight: 400;
  line-height: 1;
  font-style: normal;
  position: relative;
  top: .25em;
}
.intro p {
  max-width: 24em;
  color: hsla(var(--light-color), 1);
  margin-bottom: .75em;
}
.intro p.welcome {
  font-family: 'Cormorant Gramond', serif;
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1;
  color: hsla(var(--light-color), .8);
}
.intro p:not(.welcome) {
  line-height: 1.3;
  font-size: 1.1em;
}
.intro p > span.wipe-in {
  background: linear-gradient(hsla(var(--light-color), .8), hsla(var(--light-color), .8)) 0 -300%/100% 1em no-repeat;
  color: hsla(var(--light-color), 0);
	-webkit-background-clip: text;
	background-clip: text;
  animation: 1s linear 1.5s 1 forwards wipeIn;

  font-size: .75em;
}
.enter-site {
  margin-top: .5em;
}
.cta-enter {
  opacity: 0;
  animation: .5s forwards fadeIn 3s;
  pointer-events: auto;
  text-decoration: none;
  color: hsla(var(--light-color), .8);
  display: inline-block;
  padding: .4em 1.5em;
  border: solid .0625em;
  text-transform: uppercase;
  font-size: .7em;
}
.cta-enter:hover, .cta-enter:active {
  background-color: hsla(var(--light-color), .9);
  color: hsl(var(--dark-color));
  border-color: hsla(var(--light-color), .9);
}

.mandala-container {
  display: grid;
  visibility: hidden;
  opacity: 0;
  margin: auto;
  padding: 5vh;
  position: relative;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100vmin;
  height: 100vmin;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 2;
}

.mandala-container.play {
  visibility: visible;
  opacity: 1;
  transition: opacity ease-in 1s;
  transition-delay: 2s;
}

.mandala-circle-text {
  text-align: center;
  margin: 0;
  text-shadow: var(--text-shadow);
  opacity: 0;
  z-index: 10;
}

.mandala-circle-text.play {
  opacity: 1;
  transition: opacity ease-in 1s;
  transition-delay: 3s;
}

.mandala-link {
  opacity: 1;
  transition: opacity ease-in-out 0.2s;
}

.mandala-link:hover {
  opacity: 0;
}

.mandala-circle {
  position: relative;
  border-radius: 100%;
  width: 75%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* concentric circles */
.mandala-circle:not(.mandala-circle-space)::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 115%;
  border-radius: 50%;
  z-index: -1;
}
.mandala-circle:not(.mandala-circle-space)::after {
  content: '';
  position: absolute;
  width: 145%;
  height: 145%;
  border-radius: 50%;
  z-index: -1;
}

/* space is different from the others - has three concentric circles */
.mandala-circle-space::before {
  content: '';
  position: absolute;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  z-index: -1;
}
.mandala-circle-space::after {
  content: '';
  position: absolute;
  width: 180%;
  height: 180%;
  border-radius: 50%;
  z-index: -1;
}
.mandala-circle-space-outer-circle {
  content: '';
  position: absolute;
  width: 230%;
  height: 230%;
  border-radius: 50%;
  z-index: -1;
}

.mandala-circle-space.mandala-circle::before {
  background-color: hsla(231, 86%, 15%, .25);
}

.mandala-circle-space.mandala-circle::after {
  background-color: hsla(231, 100%, 95%, .075);
}

.mandala-circle-space-outer-circle {
  background-color: hsla(196, 100%, 64%, .075);
}

.mandala-circle-wind.mandala-circle::before, .mandala-circle-wind.mandala-circle::after {
  background-color: hsla(177, 85%, 73%, .1);
}

.mandala-circle-fire.mandala-circle::before, .mandala-circle-fire.mandala-circle::after {
  background-color: hsla(20, 100%, 50%, .175);
}

.mandala-circle-water.mandala-circle::before, .mandala-circle-water.mandala-circle::after {
  background-color: hsla(200, 95.5%, 50%, .1);
}

.mandala-circle-earth.mandala-circle::before, .mandala-circle-earth.mandala-circle::after {
  background-color: hsla(55, 40%, 50%, .2);
}

.mandala-circle-space {
  grid-row-start: 2;
  grid-column-start: 2;
  place-self: center;
  background: url(space-mandala.webp) 0 0 /cover no-repeat;

  /* center is a little bigger */
  width: 100%;
  height: 100%;
}
.mandala-circle-wind {
  grid-row-start: 1;
  grid-column-start: 2;
  place-self: center;
  background: url(wind-mandala.webp) 0 0 /cover no-repeat;
}
.mandala-circle-earth {
  grid-row-start: 3;
  grid-column-start: 2;
  place-self: center;
  background: url(earth-mandala.webp) 0 0 /cover no-repeat;
}
.mandala-circle-fire {
  grid-row-start: 2;
  grid-column-start: 1;
  place-self: center;
  background: url(fire-mandala.webp) 0 0 /cover no-repeat;
}
.mandala-circle-water {
  grid-row-start: 2;
  grid-column-start: 3;
  place-self: center;
  background: url(water-mandala.webp) 0 0 /cover no-repeat;
}
.workbook-logo-main-page {
  position: fixed;
  right: 5.0em;
  top: 0.95em;
  z-index: 5;
}
.workbook-logo-main-page img {
  width: 1.4em;
  height: 1.4em;
}
.ig-logo-main-page {
  position: fixed;
  right: 3.3em;
  top: 1.05em;
  z-index: 5;
}
.ig-logo-main-page img {
  width: 1.1em;
  height: 1.1em;
}
.sound-ctl {
  position: fixed;
  right: 1em ;
  top: 1em ;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23fff' d='M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8c54.2-44 88.7-111 88.7-186.2s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5c21.5 17.6 35.4 44.4 35.4 74.5s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64v384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64v-64c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z'/%3E%3C/svg%3E") 0 0/1.5em auto no-repeat;
  width: 1.5em;
  height: 1.5em;
  z-index: 5;
}
.sound-ctl.gallery-audio-ctl {
  top: initial;
  bottom: 1em;
}
.sound-ctl.stopped {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23fff' d='M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64h67.8l134.9 119.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448V64z'/%3E%3C/svg%3E") 0 0/auto 1.25em no-repeat;
}
/*
  content styles
*/
.content-page {
  background: var(--element-bg);
  color: hsl(var(--copy-color));
}

@media screen and (max-aspect-ratio: 4/3) {
  .content-page.set-to-aspect4-3 {
    background-position: var(--bg-pos-4-3);
    background-size: var(--bg-size-4-3);

  }
}

@media screen and (orientation: portrait) and (max-width: 800px) {
  .content-page {
    background: var(--element-mob-bg);
  }
}

.figure-text {
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
}
.figure-text > * {
  flex: 1 1 auto;
}
.figure-text p.larger.element-color {
  color: hsl(var(--element-color));
  font-size: 1.25em;
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .figure-text {
    flex-direction: column;
  }
}
.modal, .modal > a {
  scroll-behavior: smooth;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  z-index: 3;
}
.modal > a {
  z-index: initial;
}
.modal, .center .modal {
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100vw;
  background: var(--modalFrameBg);
  transition: opacity .5s linear 0s;
  opacity: 0;
  padding: .5em;
  max-width: none;
  box-sizing: border-box;
  z-index: 4;
}
.modal > div {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--journal-bgColor);
  color: hsl(var(--light-color));
}
#journal > div {
  height: 100%;
  box-sizing: border-box;
  width: 100%;
}
.modal:target, .modal.show {
  opacity: 1;
  left: 0;
}
.modal:target > div, .modal.show {
  top: 0;
}
.journal-content {
  padding: 0;
  height: calc(100% - 1em);
  box-sizing: border-box;
  max-width: 26em;
  margin: .5em auto;
  background: var(--modalBoxBg);
  box-sizing: border-box;
}
.journal-content > .wrap {
  overflow-y: auto;
  opacity: 0;
  height: 100%;
  width: 100%;
  padding: 1rem 2rem;
  transition: opacity .125s ease-in 0s;
  background-color: var(--journal-bgColor);
  scrollbar-color: hsla(0, 0%, 33%, .5) hsla(0, 0%, 33%, .7);
  
}
.journal-content > .wrap::-webkit-scrollbar {
  width: .33333em;
}
.journal-content > .wrap::-webkit-scrollbar-track {
  background-color: hsla(0, 0%, 33%, .1);
}
.journal-content > .wrap::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 33%, .2);
}
.journal-content p  {
  margin: .75em auto 3em;
  max-width: none;
  font-size: .8em;
  text-align: center;
}
.journal-questions li {
  margin: 0 0 2em .75em;
  text-indent: -.3em;
  list-style: none;
  color: hsla(var(--light-color), .9);
}

.journal-questions li::before {
  content: '\0700';
  display: inline-block;
  position: relative;
  top: -.125em;
  left: -.25em;
  font-size: .9em;
  color: hsl(var(--journal-bullets));
}
.all-journal-questions {
  columns: 3;
  max-width: 42em;
}
.all-journal-questions p {
  font-size: .75em;
}

@media screen and (orientation: portrait) and (max-width: 800px) {
  .modal, .center .modal {
    padding: 0;
  }
  .journal-content {
    margin: 0;
    height: 100%;
  }
  .all-journal-questions {
    columns: 1;
  }
}
.modal:target .journal-content .wrap, .modal.show .journal-content .wrap {
  transition-delay: 1.5s;
  transition-duration: 5s;
  opacity: 1;
}
.modal > a {
  text-indent: -999em;
}
.modal:target > a, .modal.show > a {
  display: block;
}
.closeCta {
  display: block;
  position: absolute;
  top: 0;
  right: 1em;
  text-decoration: none;
  transition: scale 0.3s;
  color: hsla(var(--light-color), .75);
  text-align: right;
}
.modal .closeCta {
  color: hsl(var(--light-color));
}
.closeCta::before {
  content: '\00D7';
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  vertical-align: middle;
}
.closeCta span {
  position: fixed;
  left: -999em;
}
@media screen and (max-width: 960px) {
  .menus .closeCta {
    display: none;
  }
}
.modal h2 {
  font-size: var(--h4-font-size);
  color: hsla(var(--light-color), .9);
  text-align: center;
  margin-top: 0;
}
.media-gallery {
  position: relative;
  z-index: 1;
  padding-left: 2em;
}
.thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
  gap: 1em;
}
.thumbs li {
  margin: 0;
  padding: 0;
}
.thumbs a.slide {
  text-decoration: none;
  display: block;
}
.thumbs a img {
  max-width: 18em;
  width: 100%;
}
.thumbs a.slide h2, .thumbs a.slide h3, .thumbs a.slide p {
  font-size: .4em;
}
.thumbs .text-slide {
  padding: 1em;
  aspect-ratio: 16 / 9;
}
.text-slide {
  background: var(--bg-settings);
  padding: 1.5em 2em;
  height: 100%;
  aspect-ratio: 5 / 3;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-color: hsla(0, 0%, 33%, .5) hsla(0, 0%, 33%, .7);
  
}
.text-slide::-webkit-scrollbar {
  width: .33333em;
}
.text-slide::-webkit-scrollbar-track {
  background-color: hsla(0, 0%, 45%, .3);
}
.text-slide::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 45%, .4);
}
.text-slide > *  {
  color: hsla(var(--copy-color), .9);
  text-shadow: var(--copy-shadow);
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
  font:  var(--font-weight) 1.9vw 'Mulish', sans-serif;
}
.text-slide > h2 {
  margin-bottom: 1em;
  font-size: 3vw;
  font-family: 'Bad Script', cursive;
  text-align: center;
}


.media-carousel {
  background-color: hsl(255, 100%, 0%);
  box-shadow: 0 0 .5em .5em hsl(255, 100%, 0%);
  margin-bottom: .5em;
  height: 100vh;
  padding: 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.carousel-deck {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 0 1em;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
}
.carousel-deck > a[class|='slide'] {
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 0 1 2em;
  text-align: center;
  text-decoration: none;
  align-items: center;
}
.carousel-deck > a[class|='slide'] > span {
  position: absolute;
  left: -999em;
}
.carousel-deck > a[class|='slide']::after {
  content: '\2039';
  display: inline-block;
  vertical-align: middle;
  font-size: 4em;
  color: hsl(var(--light-color));
}
.carousel-deck > a.slide-next::after {
  content: '\203A';
}
.carousel-deck .track {
  position: relative;
  flex: 0 1 auto;
  max-width: calc(100% - 4em);
  width: 100%;
  height: 100%;
}
.track .slide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 5rem 1em 1em;
  margin: 0 auto;
  opacity: 0;
  left: -9999em;
  transition: opacity 250ms ease-out;
}
.track .slide > *[class|='media'] {
  flex: 1 1 auto;
  max-height: 90%;
  max-width: 100%;
}
.track .slide > .video-player {
  width: auto;  
}
.track .slide > .media-image {
  cursor: zoom-in;
  transform-origin: 50% 5%;
  transition: scale 250ms ease-out;
}
.track .slide > .media-image.large  {
  transition-timing-function: ease-in;
  cursor: zoom-out;
}
.track .slide > .caption {
  flex: 0 0 2em;
  color: hsla(var(--light-color), .8);
  margin-top: .75em;
  font-size: .6em;
  max-width: none;
}
.track .slide:target {
  left: 0;
  opacity: 1;
  transition-timing-function: ease-in;
}

@media screen and (orientation: portrait) and (max-width: 800px) {
  .media-carousel {
    height: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .carousel-deck {
    padding: 0;
  }
  .carousel-deck > a[class|='slide']::after {
    font-size: 2em;
  }
  .track .slide {
    padding: 1em 0 0;
  }

}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes intro {
  from {
    opacity: 1;
    height: 99vh;
  }
  to {
    opacity: 0;
    height: 0;
  }
}
@keyframes activeMandala {
  0% {
    pointer-events: none;
  }
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: auto;
  }
}
@keyframes fadeIn {
  from{opacity: 0;}
  to {opacity: 1;}
  
}
@keyframes fadeOut {
  from{opacity: 1;}
  to {opacity: 0;}
  
}
@keyframes shiftgrad {
  0% {
    --alpha: 0;
    background-position: 0 0;
  }
  1% {
    --alpha: 1;
    background-position: 100% 0;
  }
  75% {
    --alpha: 1;
    background-position: -100% 50%;
  }
  100% {
    --alpha: 0;
    background-position: -100% 50%;
  }
}
@keyframes wipeIn {
  from {
    background-position: 0 -300%;
  }
  to {
    background-position: 0 100%;
  }
}

@-moz-keyframes shiftgradFF {
  0% {
    background: 
    hsl(var(--subtitle-color))
    radial-gradient(
      circle,
      hsla(var(--cs1), 1),
      hsla(var(--cs2), 1),
      hsla(var(--subtitle-color), 1),
      hsla(var(--cs1), 1),
      hsla(var(--cs2), 1),
      hsla(var(--subtitle-color), 1)
    )
    100% 50%/190% 3em no-repeat;
    -webkit-background-clip: text, text;
    background-clip: text, text;
  }
  100% {
    background: 
    hsl(var(--subtitle-color))
    radial-gradient(
      circle,
      hsla(var(--cs1), 1),
      hsla(var(--cs2), 1),
      hsla(var(--subtitle-color), 1),
      hsla(var(--cs1), 1),
      hsla(var(--cs2), 1),
      hsla(var(--subtitle-color), 1)
    )
    -200% 50%/190% 3em no-repeat;
    -webkit-background-clip: text, text;
    background-clip: text, text;
  }
}

/* my style starts here */

@media screen and (max-width: 576px) {
  section#scene2 {
    margin-top: 30vh;
  }
  .element-index {
    background-attachment: fixed;
  }
}

@media screen and (max-width: 970px) {
  .element-index {
    background-attachment: fixed;
  }
  section#scene2 {
    margin-top: 20vh;
  }
}

@media screen and (max-width: 800px) {
  main.content-page.center {
    background-size: auto !important;
    background-attachment: fixed;
  }
}

@media screen and (max-width: 1200px) {
  main.content-page.center {
    background-size: 100% 100%;
    background-attachment: fixed;
  }
}