::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #6d6c17;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #6d6c17 transparent;
}

@keyframes Gradient {
  0% {
    background-position: 69% 0%;
    opacity: 0.15;
  }
  50% {
    background-position: 32% 100%;
    opacity: 0.45;
  }
  100% {
    background-position: 69% 0%;
    opacity: 0.15;
  }
}
@keyframes Orb {
  0% {
    transform: rotate(0deg);
    opacity: 0.45;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.95;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.45;
  }
}
@keyframes Wiggle {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) scale(1) skewX(0deg);
  }
  33% {
    transform: rotateX(5deg) rotateY(5deg) rotateZ(-0.05deg) translateX(0.1px) translateY(0.1px) scale(1.005) skewX(0deg);
  }
  33% {
    transform: rotateX(5deg) rotateY(-5deg) rotateZ(-0.05deg) translateX(0.1px) translateY(0.2px) scale(0.995) skewX(0deg);
  }
  66% {
    transform: rotateX(-5deg) rotateY(5deg) rotateZ(0.05deg) translateX(-0.1px) translateY(0px) scale(1) skewX(0deg);
  }
  66% {
    transform: rotateX(-5deg) rotateY(-5deg) rotateZ(-0.05deg) translateX(-0.1px) translateY(0.1px) scale(0.995) skewX(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) scale(1) skewX(0deg);
  }
}
@keyframes Spinner {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes Moire {
  0% {
    background-size: 0.12px 0.12px;
    background-position: 0px 0px;
  }
  25% {
    background-size: 0.11px 0.11px;
    background-position: 20px 20px;
  }
  50% {
    background-size: 0.1px 0.1px;
    background-position: 0px 0px;
  }
  75% {
    background-size: 0.11px 0.11px;
    background-position: -20px -20px;
  }
  100% {
    background-size: 0.12px 0.12px;
    background-position: 0px 0px;
  }
}
@keyframes Pulsate {
  0% {
    filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 2px #c40e01);
  }
  50% {
    filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 10px #06014b);
  }
  100% {
    filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 2px #c40e01);
  }
}
@keyframes Pulsate-Text {
  0% {
    text-shadow: 0px 0px 4px black;
  }
  50% {
    text-shadow: 0px 0px 15px #06014b;
  }
  100% {
    text-shadow: 0px 0px 4px black;
  }
}
nav {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

nav a {
  color: unset;
  text-decoration: none;
  padding: 0 5px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  position: fixed;
}

body, html {
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  background-color: #040132;
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  body, html {
    min-height: 100%;
    max-height: 100vh;
  }
}

@media (max-width: 480px) {
  html {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
body:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
body:before {
  background-size: cover;
  background: linear-gradient(44deg, rgba(10, 10, 10, 0.5), rgba(255, 253, 231, 0.25));
  animation: Gradient 20s ease-in-out infinite;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
@media (max-width: 480px) {
  main {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  main {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
  }
}

.fixed {
  position: fixed;
}

section {
  margin: 15px 0;
  opacity: 1;
  transition: opacity, ease-out, 1200ms;
  display: flex;
  justify-content: center;
}
@media (max-width: 480px) {
  section {
    margin: 15px 10px;
  }
}
@media (max-width: 480px) {
  section {
    position: fixed;
  }
}
section.masked {
  opacity: 0;
  transition: opacity, ease-in, 1200ms;
}
section.zoom {
  transform: scale(1);
  transition: transform, ease-in-out, 3000ms;
}
section.zoom.out {
  transform: scale(0.1);
  transition: transform, ease-in-out, 3000ms;
}
section.zoom #poem > div {
  transform: rotate3d(0, 0, 0, 0deg);
  transition: transform, ease-in-out, 3000ms;
}
section.zoom.out #poem > div {
  transform: rotate3d(-0.05, 0.1, 0.05, 7deg);
  transition: transform, ease-in-out, 3000ms;
}
section.poem-page.transform-complete {
  transform: unset;
  transition: unset;
}

.loader {
  position: relative;
  height: 50px;
  width: 50px;
}

.loader:after {
  content: "";
  background-image: url(svg/eye-of-providence.svg);
  background-size: contain;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: opacity, ease-in-out, 400ms;
  animation: Spinner 1.5s linear infinite;
  color: rgba(10, 10, 10, 0.8);
}

.loader.masked:after {
  opacity: 0;
  transition: opacity, ease-in-out, 400ms;
}

.loader {
  position: absolute;
  height: 60px;
  width: 60px;
  filter: invert(91%) sepia(38%) saturate(381%) hue-rotate(1deg) brightness(96%) contrast(91%);
}

.orb img {
  max-width: 90vw;
}

main .orb {
  position: fixed;
  opacity: 1;
  transition: opacity ease-out 1200ms;
}
main .orb.masked {
  opacity: 0;
  transition: opacity ease-in 1200ms;
}
main .orb.logo {
  position: absolute;
  top: -80px;
  transition: opacity 1200ms ease-out;
  text-align: center;
  z-index: 5000;
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  main .orb.logo {
    right: 7vw;
    top: 15px;
  }
}
main .orb.logo img {
  height: 80px;
  animation: Pulsate 5s ease-in-out infinite;
}
@media (max-width: 480px) {
  main .orb.logo img {
    height: 12vh;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  main .orb.logo img {
    height: 60px;
  }
}

@media (max-width: 480px) {
  main .orb.logo {
    top: 0;
    padding: 10px 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
}
.debug {
  display: flex;
  position: absolute;
  color: #eae999;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 5px;
  opacity: 0.5;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  z-index: 2000;
}
@media (max-width: 480px) {
  .debug {
    transform: scale(0.75);
    transform-origin: top left;
  }
}
.debug:hover, .debug:active {
  color: #0a0a0a;
  background-color: white;
}
.debug dl {
  margin: 0 5px;
}
.debug dl dt {
  text-decoration: underline;
}
.debug dl dd {
  font-size: 1.5em;
}
.debug dl dd span {
  font-size: 0.7em;
}
.debug dl dd span:nth-child(2) {
  font-size: 0.5em;
}

form.natal-form {
  background-color: #eae999;
  color: #040132;
  border-radius: 2px;
  padding: 10px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  form.natal-form {
    display: flex;
  }
}
form.natal-form .loader {
  position: absolute;
  top: 0;
  right: 0;
  height: 25px;
  width: 25px;
  filter: invert(8%) sepia(32%) saturate(6960%) hue-rotate(240deg) brightness(89%) contrast(119%);
}
@media (max-width: 480px) {
  form.natal-form .loader {
    position: fixed;
  }
}
@media (max-width: 480px) {
  form.natal-form .loader {
    filter: invert(91%) sepia(38%) saturate(381%) hue-rotate(1deg) brightness(96%) contrast(91%);
  }
}
form.natal-form fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  text-align: center;
}
form.natal-form fieldset:focus-within legend {
  color: #0a0a0a;
}
form.natal-form fieldset:focus-within .legend {
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}
form.natal-form fieldset .legend {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
  animation: Wavy 10s ease-in-out infinite;
}
form.natal-form fieldset:last-child {
  padding-top: 0;
}
form.natal-form fieldset legend, form.natal-form fieldset .legend {
  align-self: baseline;
}
form.natal-form fieldset label {
  padding: 2px 4px;
  border-radius: 3px;
}
form.natal-form fieldset > legend, form.natal-form fieldset .legend, form.natal-form fieldset label {
  text-transform: uppercase;
  opacity: 0.7;
  font-size: 1.2em;
  align-self: center;
  margin: 0;
}
form.natal-form fieldset > div {
  margin: 10px 0;
  display: flex;
  align-items: baseline;
}
form.natal-form fieldset > div > div, form.natal-form fieldset .single-line {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
form.natal-form fieldset.birth-time > div {
  justify-content: space-evenly;
}
form.natal-form fieldset.birth-time > div > div {
  flex: 1 0 0;
}
form.natal-form fieldset.birth-time > div > div:focus-within label {
  color: #040132;
}
form.natal-form fieldset.birth-time label {
  font-size: 1em;
  margin-top: 2px;
}
@media (max-width: 480px) {
  form.natal-form fieldset.birth-time label {
    font-size: 1.15em;
  }
}
form.natal-form fieldset.location > div {
  justify-content: space-between;
}
form.natal-form fieldset.location > div:focus-within label {
  color: #040132;
}
form.natal-form fieldset.location label {
  font-size: 1em;
  align-self: baseline;
  margin-right: 5px;
}
@media (max-width: 480px) {
  form.natal-form fieldset.location label {
    font-size: 1.15em;
  }
}
form.natal-form fieldset.submit > div {
  justify-content: center;
  margin: 0;
}
form.natal-form fieldset.submit button {
  padding: 10px 15px;
  font-size: 0.8em;
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  text-shadow: 0px 0px 0px transparent;
  transition: background-color ease-in-out 800ms, color ease-in-out 800ms, text-shadow ease-in-out 800ms;
  color: #06014b;
  cursor: pointer;
}
@media (max-width: 480px) {
  form.natal-form fieldset.submit button {
    padding: 15px 20px;
  }
}
@media (max-width: 480px) {
  form.natal-form fieldset.submit button {
    font-size: 1.1em;
  }
}
form.natal-form fieldset.submit button:hover {
  background-color: #f3f2c3;
  transition: background-color ease-in-out 75ms;
}
form.natal-form fieldset.submit button.disabled {
  opacity: 0.75;
  text-shadow: 0px 0px 2px #06014b;
  transition: opacity ease-in-out 75ms, color ease-in-out 75ms, background-color ease-in-out 75ms, text-shadow ease-in-out 75ms;
  color: transparent;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  form.natal-form fieldset.submit button.disabled {
    text-shadow: 0px 0px 4px #06014b;
  }
}
form.natal-form fieldset.submit button.disabled:hover {
  opacity: 0.85;
  transition: opacity ease-in-out 75ms;
}
form.natal-form input, form.natal-form select, form.natal-form button {
  border: none;
  border-bottom: 1px solid rgba(4, 1, 50, 0.5);
  background-color: transparent;
  color: #040132;
  cursor: pointer;
  font-size: 1.2em;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding-left: 5px;
  padding: 0 3px;
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  form.natal-form input, form.natal-form select, form.natal-form button {
    min-width: 53px;
    padding: 0 5px;
  }
}
form.natal-form input:focus, form.natal-form select:focus, form.natal-form button:focus {
  outline: none;
}
form.natal-form input.clean, form.natal-form input.clean::placeholder, form.natal-form input.clean[type=text], form.natal-form select.clean, form.natal-form select.clean::placeholder, form.natal-form select.clean[type=text], form.natal-form button.clean, form.natal-form button.clean::placeholder, form.natal-form button.clean[type=text] {
  border-bottom: 1px dashed #040132;
  color: rgba(4, 1, 50, 0);
}
form.natal-form input.clean:focus, form.natal-form input.clean::placeholder:focus, form.natal-form input.clean[type=text]:focus, form.natal-form select.clean:focus, form.natal-form select.clean::placeholder:focus, form.natal-form select.clean[type=text]:focus, form.natal-form button.clean:focus, form.natal-form button.clean::placeholder:focus, form.natal-form button.clean[type=text]:focus {
  color: rgba(4, 1, 50, 0.5);
}
form.natal-form input.placeholder, form.natal-form select.placeholder, form.natal-form button.placeholder {
  border: none;
}
form.natal-form input.dirty:focus, form.natal-form select.dirty:focus, form.natal-form button.dirty:focus {
  color: #040132;
}
form.natal-form input[disabled=""], form.natal-form select[disabled=""], form.natal-form button[disabled=""] {
  background-color: #6d6c17;
  cursor: not-allowed;
}
form.natal-form input[type=number] {
  width: 50px;
  -moz-appearance: textfield;
}
form.natal-form input[type=number]::-webkit-inner-spin-button,
form.natal-form input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
form.natal-form .selection-mask {
  border-bottom: 1px solid rgba(4, 1, 50, 0.5);
}
form.natal-form select {
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
form.natal-form select::-ms-expand {
  display: none;
}
form.natal-form select option {
  background-color: #eae999;
}
form.natal-form select option.hide {
  display: none;
}
form.natal-form .input-container {
  position: relative;
}
form.natal-form .input-container:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
form.natal-form .selection-mask {
  position: "absolute";
}
form.natal-form .selection-mask:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
form.natal-form .input-container:before, form.natal-form .selection-mask:before {
  background-image: linear-gradient(to top, rgba(4, 1, 50, 0.25), transparent 15px);
  background-repeat: no-repeat;
  background-position-y: 15px;
  transition: background-position-y 150ms linear;
}
form.natal-form .input-container:hover:before, form.natal-form .input-container:focus-within:before, form.natal-form .selection-mask:hover:before, form.natal-form .selection-mask:focus-within:before {
  background-position-y: 0px;
  transition: background-position-y 150ms linear;
}
@media (max-width: 480px) {
  form.natal-form .input-container:hover:before, form.natal-form .input-container:focus-within:before, form.natal-form .selection-mask:hover:before, form.natal-form .selection-mask:focus-within:before {
    background-position-y: -2px;
  }
}
form.natal-form .selection-mask button {
  border: none;
}
form.natal-form .suggestion-container {
  flex-basis: 65%;
  position: relative;
}
form.natal-form .suggestion-container input[type=text] {
  width: 100%;
  color: rgba(4, 1, 50, 0.5);
}
form.natal-form .suggestion-container input[type=text]:focus {
  color: #040132;
}

.summary {
  font-size: 51%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 0 0 2px 2px;
  opacity: 0.75;
}
.summary ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  list-style: none;
  width: 85px;
  padding: 0;
  margin: 0;
}
.summary ul li {
  margin-right: 2px;
  display: flex;
  flex-basis: 25px;
}
.summary ul li span:first-child {
  min-width: 10px;
}

button#random {
  position: absolute;
  opacity: 0.75;
  bottom: 5px;
  right: 5px;
  max-width: 120px;
  text-transform: uppercase;
  padding: 6px 10px;
  transform: scale(0.56);
  transform-origin: bottom right;
}

.suggestion-container input.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  border: none;
}
.suggestion-container input.suggestion-input {
  background-color: transparent;
  position: relative;
  z-index: 2;
}
.suggestion-container input.suggestion-input:hover {
  background-color: transparent;
}
.suggestion-container .suggestion-select {
  position: relative;
}
.suggestion-container .selection-mask {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: #eae999;
  color: #040132;
}
.suggestion-container .selection-mask button {
  padding: 0px 5px 3px;
  cursor: pointer;
  height: 100%;
  color: rgba(4, 1, 50, 0.5);
}
@media (max-width: 480px) {
  .suggestion-container .selection-mask button {
    min-width: auto;
  }
}
.suggestion-container .selection-mask span {
  flex-grow: 1;
  align-self: stretch;
  text-align: left;
  display: flex;
  align-items: center;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-container .suggestions {
  position: absolute;
  top: 26px;
  z-index: 4;
  background-color: #eae999;
  margin-top: 0;
  width: 100%;
}
@media (max-width: 480px) {
  .suggestion-container .suggestions {
    top: 33px;
  }
}
.suggestion-container .suggestions ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
@media (max-width: 480px) {
  .suggestion-container .suggestions ul {
    position: fixed;
    width: 100vw;
    left: 0;
    background-color: #ffecb3;
  }
}
.suggestion-container .suggestions button {
  width: 100%;
  min-width: 100%;
  text-align: left;
  padding: 10px 0px 10px 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  background-color: #eae999;
  cursor: pointer;
}
.suggestion-container .suggestions button > * {
  font-size: 0.75em;
}
.suggestion-container .suggestions button.active {
  width: auto;
  background-color: #fbfbee;
  padding-right: 5px;
}
@media (max-width: 480px) {
  .suggestion-container .suggestions button.active {
    background-color: #ffd34d;
  }
}

#poem {
  background-color: rgba(255, 236, 187, 0.85);
  box-shadow: 0px 0px 1000px -50px rgba(10, 10, 10, 0.25);
  border-radius: 2px;
  animation: Wiggle 50s linear infinite;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  position: relative;
}
@media (max-width: 480px) {
  #poem {
    animation: none;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  #poem {
    animation: none;
  }
}
#poem:after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
#poem:after {
  background: linear-gradient(45deg, rgba(255, 253, 231, 0.15), rgba(10, 10, 10, 0.45));
  background-size: contain;
  animation: Gradient 10s ease-in-out infinite;
}
#poem.moon {
  border-radius: 50%;
  height: 36rem;
  width: 36rem;
  position: relative;
  background-color: #eae999;
  background-image: url("png/moon-transparent.png");
  background-blend-mode: luminosity;
  background-size: 36rem 36rem;
  font-size: 90%;
  box-shadow: 0px 0px 5px #fffde7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 480px) {
  #poem.moon {
    height: 55rem;
    width: 55rem;
  }
}
#poem.moon:before, #poem.moon:after {
  border-radius: 50%;
  height: 36rem;
  width: 36rem;
}
@media (max-width: 480px) {
  #poem.moon:before, #poem.moon:after {
    height: 55rem;
    width: 55rem;
  }
}
#poem.moon:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
#poem.moon:before {
  box-shadow: inset -25px -15px 40px rgba(0, 0, 0, 0.7);
  background-image: linear-gradient(-45deg, rgba(103, 99, 90, 0.7) 0%, transparent 100%);
  animation: Orb 30s ease-in-out infinite;
}
@media (max-width: 480px) {
  #poem.moon:before {
    height: 55rem;
    width: 55rem;
  }
}
@media (max-width: 480px) {
  #poem.moon {
    background-repeat: no-repeat;
    background-size: 55rem 55rem;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  #poem.moon {
    font-size: 80%;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  #poem.moon {
    overflow: visible;
  }
}
#poem.moon > div {
  max-width: 100vw;
  padding: 0 15px;
  margin-left: 6%;
}
@media (max-width: 480px) {
  #poem.moon > div {
    margin-left: 0;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  #poem.moon {
    right: 12vw;
  }
}
#poem form {
  margin: 0;
  padding: 17px 15px;
  color: #154360;
  text-shadow: 0px 1px 1px rgba(21, 67, 96, 0.25);
  position: relative;
}
@media (max-width: 480px) {
  #poem form {
    padding: 17px 30px;
  }
}
#poem form legend {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 9.5px;
  padding-right: 2.2rem;
  text-transform: uppercase;
  user-select: none;
  color: rgba(255, 236, 179, 0);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-shadow: 0px 0px 0px transparent;
  transition: color 700ms ease-in-out, text-shadow 2000ms ease-in-out;
}
#poem form:hover legend, #poem form.active legend {
  color: rgba(33, 97, 140, 0.5);
  text-shadow: 0px 1px 1px rgba(10, 10, 10, 0.5);
  transition: color 1200ms ease-in-out, text-shadow 700ms ease-in-out;
}
#poem .debug-placement, #poem .debug-bday {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: lighter;
  position: absolute;
  background-color: white;
  color: black;
  opacity: 0.7;
  padding: 2px;
  margin: 0;
}
#poem .debug-bday {
  bottom: 72px;
}
#poem.moon > div.debug-bday {
  margin: 0;
}
#poem:focus {
  outline: none;
}

@media (max-width: 480px) {
  section.poem-page {
    margin: 0;
  }
}
.poem-page .orb.logo {
  top: 37.5px;
  transition: opacity 1200ms ease-out;
}
.poem-page .orb.logo img {
  height: 75px;
}
@media (max-width: 480px) {
  .poem-page .orb.logo img {
    height: 12vh;
  }
}
@media (max-width: 480px) {
  .poem-page .orb.logo {
    top: 0;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .poem-page .orb.logo {
    position: fixed;
    top: 15px;
    right: 7vw;
  }
}

.poem-page nav {
  position: absolute;
  bottom: 0;
  padding: 4rem 0 2.4rem;
  width: 100%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  font-size: 140%;
  z-index: 1000;
  opacity: 1;
  transition: opacity, ease-in, 1200ms;
}
@media (max-width: 480px) {
  .poem-page nav {
    position: fixed;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .poem-page nav {
    position: fixed;
    bottom: 1rem;
  }
}
@media (max-width: 480px) {
  .poem-page nav {
    font-size: 130%;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .poem-page nav {
    font-size: 5vw;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .poem-page nav {
    flex-direction: column;
    align-items: stretch;
    text-align: right;
    right: 0;
    top: 0;
    padding-right: 7vw;
    height: 100vh;
    width: auto;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
}
@media (max-width: 480px) {
  .poem-page nav {
    width: 100%;
    bottom: 0;
    padding: 2rem 0 1rem;
  }
}
.poem-page nav a {
  color: #d2b350;
  text-shadow: 0px 0px 4px black;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
  margin: 0 9px;
  line-height: 0.9;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.poem-page nav a:hover {
  animation: Pulsate-Text 5s ease-out infinite;
  transform: scale(1.2);
  transition: transform 250ms ease-in-out;
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .poem-page nav a {
    margin: 10px 0;
  }
}
.poem-page nav.masked {
  opacity: 0;
  transition: opacity, ease-in, 1200ms;
}

.image-region {
  position: absolute;
  width: 26rem;
  height: 32.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .image-region {
    width: 100vw;
    height: 125vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.icon {
  height: 170px;
  width: 170px;
  background-size: contain;
  position: absolute;
  filter: brightness(75%);
  opacity: 0.6;
}
.icon.primary {
  bottom: 25px;
  left: -30px;
  height: 280px;
  width: 280px;
}
@media (max-width: 480px) {
  .icon.primary {
    bottom: 25px;
  }
}
.icon.secondary-1 {
  bottom: 60px;
  right: 0;
}
@media (max-width: 480px) {
  .icon.secondary-1 {
    bottom: 60px;
  }
}
.icon.secondary-2 {
  top: 90px;
  right: 30px;
}
@media (max-width: 480px) {
  .icon.secondary-2 {
    top: 90px;
  }
}
.icon.secondary-3 {
  top: 60px;
  left: 15px;
}
@media (max-width: 480px) {
  .icon.secondary-3 {
    top: 60px;
  }
}
.icon.alarm-clock {
  opacity: 0.4;
}
.icon.ball-gag {
  opacity: 0.35;
}
.icon.cassette {
  opacity: 0.35;
}
.icon.compact-mirror {
  opacity: 0.45;
}
.icon.dynamite {
  opacity: 0.4;
}
.icon.flask {
  opacity: 0.5;
}
.icon.game-controller {
  opacity: 0.4;
}
.icon.letter {
  opacity: 0.5;
}
.icon.lipstick {
  opacity: 0.33;
}
.icon.microphone {
  opacity: 0.4;
}
.icon.mushroom {
  opacity: 0.4;
}
.icon.pie {
  opacity: 0.35;
}
.icon.alarm-clock {
  background-image: url("png/icons/alarm-clock.png");
}
.icon.ball-gag {
  background-image: url("png/icons/ball-gag.png");
}
.icon.book {
  background-image: url("png/icons/book.png");
}
.icon.cassette {
  background-image: url("png/icons/cassette.png");
}
.icon.compact-mirror {
  background-image: url("png/icons/compact-mirror.png");
}
.icon.dynamite {
  background-image: url("png/icons/dynamite.png");
}
.icon.flask {
  background-image: url("png/icons/flask.png");
}
.icon.game-controller {
  background-image: url("png/icons/game-controller.png");
}
.icon.heart-lock {
  background-image: url("png/icons/heart-lock.png");
}
.icon.knife {
  background-image: url("png/icons/knife.png");
}
.icon.lantern {
  background-image: url("png/icons/lantern.png");
}
.icon.letter {
  background-image: url("png/icons/letter.png");
}
.icon.lipstick {
  background-image: url("png/icons/lipstick.png");
}
.icon.magic-wand {
  background-image: url("png/icons/magic-wand.png");
}
.icon.microphone {
  background-image: url("png/icons/microphone.png");
}
.icon.mushroom {
  background-image: url("png/icons/mushroom.png");
}
.icon.pie {
  background-image: url("png/icons/pie.png");
}
.icon.plant {
  background-image: url("png/icons/plant.png");
}
.icon.rope {
  background-image: url("png/icons/rope.png");
}
.icon.wishbone {
  background-image: url("png/icons/wishbone.png");
}

.modal {
  background-color: rgba(10, 10, 10, 0.8);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 500ms ease-in-out;
}
@media (max-width: 480px) {
  .modal {
    min-height: -webkit-fill-available;
  }
}
.modal.show {
  opacity: 1;
}
.modal.hide {
  opacity: 0;
}
.modal.show, .modal.hide {
  transition: opacity 500ms ease-in-out;
}

.modal-content {
  min-width: 25vw;
  height: 70vh;
  max-width: 50vw;
  align-self: center;
  flex-grow: 1;
  padding: 0 15px;
  color: #eae999;
  position: relative;
}
@media (max-width: 480px) {
  .modal-content {
    height: 100vh;
    max-width: unset;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .modal-content {
    height: 100vh;
    max-width: unset;
  }
}
.modal-content > h1 {
  position: absolute;
  z-index: 1000;
  top: -60px;
  left: 0;
  display: flex;
  width: 100%;
  margin: 0;
  justify-content: space-between;
  text-transform: capitalize;
}
@media (max-width: 480px) {
  .modal-content > h1 {
    top: 0;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .modal-content > h1 {
    top: 0;
  }
}
@media (max-width: 480px) {
  .modal-content > h1 {
    padding: 15px 15px 30px;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), black);
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .modal-content > h1 {
    padding: 15px 15px 30px;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), black);
  }
}
.modal-content > h1 > i.x {
  font-size: 50%;
  margin: 5px;
  background-color: #0a0a0a;
  opacity: 0.75;
  padding: 2px 8px;
  cursor: pointer;
}
@media (max-width: 480px) {
  .modal-content > h1 > i.x {
    font-size: 75%;
  }
}
.modal-content section {
  display: block;
  position: static;
  overflow: auto;
  margin: 0;
  height: 100%;
  max-height: 100vh;
  max-height: -webkit-fill-avialable;
}
@media (max-width: 480px) {
  .modal-content section {
    padding-top: 7.5vh;
  }
  .modal-content section > :last-child {
    padding-bottom: 15vh;
  }
}
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .modal-content section {
    padding-top: 8vh;
  }
  .modal-content section > :last-child {
    padding-bottom: 15vh;
  }
}

.clergy {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.clergy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.clergy ul li {
  display: flow-root;
}
.clergy ul li h2 a {
  text-decoration: none;
  color: #eae999;
}
.clergy ul li img {
  float: left;
  max-width: 50%;
  min-height: 20px;
  max-height: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

@keyframes Random-Drop {
  0% {
    transform: translate(var(--s-pos), -40px) rotate3d(1, 1, 1, var(--angle));
  }
  100% {
    transform: translate(var(--e-pos), var(--b-pos)) rotate3d(1, 1, 1, 1080deg);
    opacity: 0;
  }
}
span[class^=currency] {
  transform: translate(var(--s-pos), -40px) rotate3d(1, 1, 1, var(--angle));
  opacity: 0.75;
  position: absolute;
  animation-name: Random-Drop;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  font-size: 1.5em;
  pointer-events: none;
}

.tithe section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tithe section button {
  position: relative;
}
.tithe section p {
  text-align: center;
}

.confetti-container {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  top: 0;
}
@media (max-width: 480px) {
  .confetti-container {
    height: 100vh;
  }
}

.bless-you-my-child {
  text-align: center;
}

/*# sourceMappingURL=main.css.map */