body {
 font-size: 16pt;
 background: black;
}

html, body {
 margin: 0;
 height: 100%;
}

#water {
 background: black url('/bg_stripe_mx.png');
 background-repeat: repeat-x;
 background-attachment: scroll;
 background-size: cover;
}


#beach {
 max-width: 750px;
 display: grid;
 margin: 0 auto;
 grid-template-columns: 1fr;
}

.scene, .poem, .cite, article {
 background: rgba(10, 10, 10, 0.85);
}

/* Kicker image */

#kicker {
 padding-top: 1rem;
 margin: 0 auto;
 background: black;
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}

#kicker #kimg {
 background: black;
 position: absolute;
 box-sizing: border-box;
}

#kimg img {
 display: block;
 max-width: 3780px;
 max-height: 90vh;
 width: 90vw;
}

/* Scene content */

#beach > div {
 color: white;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#one {
 margin-bottom: 3px;
} 

#one, #forty2 {
 background-image: url('/snow_bg.png');
 background-size: auto auto;
 background-position: center;
}

#forty2 {
  padding-top: 5vh;
}

#preprekick {
 background: linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(0, 0, 0, 1) 20%) ;
 height: 10vh;
}

#prekick {
background: linear-gradient(180deg, rgba(103,0,13,1) 0%, rgba(0,0,0,1) 80%);
 height: 20vh;
 margin-top: -22vh;
}

.scene {
 padding-top: 1rem;
 padding-bottom: 1rem;
 line-height: 150%;
 padding-left: 3rem;
 padding-right: 3rem;
}

.scene:not(#one) + .scene:not(#one) {
 border-top: 2px dotted rgba(360, 360, 360, 0.25);
}

/* Links */

a, a:hover, a:visited {
 color: seagreen;
}

a:visited {
 text-decoration: none;
}

/* hero images */

img {
 max-width: 100%;
}

[role=img] {
 background-color: rgba(360, 360, 360, 0.7);
 padding: 1rem;
 margin-top: 20px;
 margin-bottom: 20px;
 position: relative;
}

#Washington .img {
 background-image: url('/stripes_wa.png');
 background-size: cover;
} 

#Here .img {
 background-image: url('/you_are_here.png');
 background-size: cover;
}

#Charden1 .img {
 background-image: url('/photos/chi_ver_gard1.jpeg');
 background-size: cover;
}

#Charden2 .img {
 background-image: url('/photos/chi_ver_gard2.jpeg');
 background-size: cover;
}

button, button:hover, button:active {
 width: 100%;
 height: 100%;
 padding: 0;
 border: none;
 margin: 0;
 min-width: none;
 min-height: none; 
 bottom: 0;
 right: 0;
 opacity: 0;
 position: absolute;
}

.hero:focus-within .secret, .hero:hover .secret {
 opacity: 0.8;
}

.ARIAcap {
 font-family: Georgia, 'Times New Roman', Times, serif;
 font-style: oblique;
 line-height: 120%;
 font-size: 1.3rem;
 width: 50%;
 top: 50%;
 left: 50%;
 transform: translate(50%);
 color:rgba(10, 10, 10, 1);
}

/* Footer */

#feet {
 background: rgba(360, 360, 360, 0.8);
 font-size: 0.65em;
 font-family: monospace;
 margin: 0 auto;
 display: flex;
 justify-content: center;
 position: fixed;
 bottom: 0;
}

#feet > div {
 padding: 0.5rem;
}

/* Quotes and poems */

h5 {
 text-align: center;
}

.poem, .cite, aside {
 position: relative;
}

.scene:not(.hero):not(aside):not(#forty2):not(.img):not(#Odile):not(#Charden1):not(#Charden2):not(#one):not([role=img]) + :not(.scene):not(.hero):not(.img):not(#Odile):not(#Charden1):not(#Charden2):not(#one):not([role=img]):not(aside) {
 padding-top: 5rem;
 padding-bottom: 5rem;
}


.glacier > img {
 width: 100%;
}

#WAW > img {
 width: 100%;
}

.quote {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 font-size: 1.2rem;
 margin: 0 auto;
 line-height: 120%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-shadow: 1px 1px black;
 color: white;
}

#define .quote {
 padding: 4.5rem;
 top: 45%;
 font-style: oblique;
 text-align: center;
 font-weight: lighter;
}

#define .credit {
 bottom: 23%;
 font-style: normal;
 background: none;
}

#III .quote {
 padding: 2rem;
 top: 48%;
}

#III .credit {
 bottom: 30%;
}

#V .quote {
 padding: 2.5rem;
}

#V .credit {
 bottom: 25%;
}

#VIII .quote {
 top: 45%;
}

#VIII .credit {
 bottom: 22%;
}

.credit {
 position: absolute;
 bottom: 15%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: rgba(360, 360, 360, 0.8);
 color: black;
 text-align: center;
 font-style: oblique;
 text-shadow: none;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 0.5em;
}

#III .credit {
 bottom: 20%;
}

#WAW .quote {
 padding: 2rem;
}

#WAW .credit {
 position: absolute;
 bottom: 20%;
 left: 50%;
 transform: translate(-50%, -50%);
}

#Ode .quote, #WinSum .quote {
 margin: 0 auto;
 line-height: 125%;
}

#Ode .quote {
 width: 25%; 
}

#Ode p, #WinSum p {
 padding: 0;
 margin: 0.3rem;
}

#Ode .credit {
 bottom: 10%;
}

#WinSum .quote {
 width: 30%;
 padding-left: 5%;
 top: 48%;
}

/* Attempted homebrew parallax */

.sticky {
 position: sticky;
}

.preserve {
 transform-style: preserve-3d;
}

.perspective {
 perspective: 1px;
 perspective-origin: bottom right;
}

.overflow {
 overflow-y: scroll;
 overflow-x: hidden;
 width: 100vw;
 height: 100vh;
 -webkit-overflow-scrolling: touch;
}

.parallax {
 position: absolute;
 transform: translateZ(0px);
}

/* CSS animations */

/* ----------------------------------------------
 * Generated by Animista on 2022-3-8 22:33:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-hor-bottom
 * ----------------------------------------
 */
 .flip-in-hor-bottom {
	-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes flip-in-hor-bottom {
  0% {
    transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation flip-in-hor-top
 * ----------------------------------------
 */

.flip-in-hor-top {
	-webkit-animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes flip-in-hor-top {
  0% {
    transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */

 .puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@keyframes puff-in-center {
  0% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */

 .fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

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

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */

 .text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */

 .fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ----------------------------------------------
Special case for the kicker 

 * Generated by Animista on 2022-3-12 23:45:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-bottom
 * ----------------------------------------
 */
 .slide-in-blurred-bottom {
	-webkit-animation: slide-in-blurred-bottom 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: slide-in-blurred-bottom 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
@-webkit-keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}