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

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

:root {
  --rotateSpeed: 3s;
  --rotateSpeedTop: 2s;
  --rotateSpeedOpenTop: 1s;
  --rotateSpeedBtm: 1s;
  --rotateSpeedOpenBtm: 2s;
  --sendSpeed: 1.5s;
}

html {
  color-scheme: dark light;
  font-size: 16px;
}

body {
  min-height: 100vh;
  display: flex;
  font-size: 16px;
  /*background-image: url(/JeffDavis/images/manisteeW500.jpg);*/
  background-size: cover;
}

nav {
  position: absolute;
}

.navLink[aria-current=page] {
  background-color: blue;
  font-size: 1em;
}

.navLink {
  background-color: red;
  font-size: 2em;
}

.backdrop {
  display: block;
  position: absolute;
  color: lightblue;
  top: 55%;
  left: 25%;
  font-size: 1em;
}

.displayNone {
  display: none;
}

.home {
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: rgb(89, 89, 89);
  z-index: 2;
}

li {
  list-style: none;
}

.officeSpace {
  position: absolute;
  top: 10em;
  left: 20em;
  width: 98vw;
  height: 98vh;
  transform-style: preserve-3d;
  perspective: 100em;
  scale: 1.5;
}

.rotate {
  transform: rotateZ(180deg);
}

.message {
  text-align: center;
}

.theMessage {
  border: 0.25em solid rgb(34, 89, 55);
  background-color: whitesmoke;
  color: black;
}

.theMessage::placeholder {
  color: rgba(21, 55, 144, 0.8);
}

.submitBtn {
  position: absolute;
  top: 5%;
  left: 80%;
  width: 3em;
  height: 3em;
  background-image: url(/assets/images/ManisteeStamp.jpg);
  background-size: cover;
  color: rgb(244, 244, 244);
  font-size: 1em;
  border: 0.05em dashed rgb(245, 245, 245);
  transform: translateZ(1em);
  animation: btnPulse 1.618s infinite linear;
}

@keyframes btnPulse {
  0% {
    scale: 1.04;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 1.04;
  }
}
.editHere {
  position: absolute;
  font-family: "Times New Roman", Times, serif;
  background-color: rgb(210, 210, 210);
  width: 5em;
  border: 0.1em solid rgb(21, 21, 21);
  text-align: center;
}

.editHere:hover {
  background-color: rgb(230, 230, 230);
  border: 0.1em solid rgb(55, 55, 55);
  width: 5em;
}

.btnReturn {
  opacity: 1;
  animation: btnReturn 2.1s;
}

@keyframes btnReturn {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animateBtn {
  position: absolute;
  top: 58%;
  left: 13%;
  background-color: gray;
  transform: translateZ(1em);
  animation: animateBtnPulse 3s infinite linear;
}

@keyframes animateBtnPulse {
  0% {
    scale: 1.2;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 1.2;
  }
}
.btnGone {
  opacity: 0;
  animation: btnGone 50ms ease-in;
}

@keyframes btnGone {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.formScene {
  position: relative;
  width: 100%;
  height: 100%;
  top: 30%;
  left: 0%;
  transform-style: preserve-3d;
  scale: 0.89;
}

.formSceneAnimate {
  animation: sceneRotate var(--rotateSpeed);
  transform: rotateX(40deg);
}

@keyframes sceneRotate {
  from {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(40deg) rotateZ(0deg) rotateY(0deg);
  }
}
.formSend {
  animation: formSend var(--sendSpeed);
  transform: translateX(1000em) translateY(-500em);
  scale: 0.05;
}

@keyframes formSend {
  0% {
    scale: 1;
    transform: translateX(0) translateY(0em);
  }
  80% {
    scale: 0.05;
    transform: translateX(0em) translateY(0em);
  }
  100% {
    scale: 0.05;
    transform: translateX(1000em) translateY(-500em) rotateZ(1440deg);
  }
}
.sendTo {
  position: absolute;
  top: 43%;
  left: 42%;
  color: rgb(55, 55, 55);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 2em;
}

.sendTo p {
  font-size: 0.5em;
  text-align: center;
}

.returnAddress {
  position: absolute;
  display: block;
  top: 3%;
  left: 2%;
  width: 12.35em;
  height: 10em;
  text-align: left;
  font-size: 1em;
  font-family: cursive;
  overflow-wrap: break-word;
}

#nameOutRa {
  background-color: transparent;
}

#emailOut {
  background-color: transparent;
}

.topFold {
  position: absolute;
  top: 0em;
  transform-style: preserve-3d;
  transform: rotateX(0deg) translateY(-8em);
}

.foldTop {
  animation: foldTop var(--rotateSpeedTop) ease-in;
  transform: rotateX(-180deg) translateY(-8em);
}

@keyframes foldTop {
  0% {
    transform: rotateX(0deg) translateY(-8em);
  }
  100% {
    transform: rotateX(-180deg) translateY(-8em);
  }
}
.openTop {
  animation: openTop var(--rotateSpeedOpenTop);
  transform: rotateX(0deg) translateY(-8em);
}

@keyframes openTop {
  0% {
    transform: rotateX(-180deg) translateY(-8em);
  }
  100% {
    transform: rotateX(0deg) translateY(-8em);
  }
}
.midFold {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateY(0em);
}

.btmFold {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateY(8em) rotateX(0deg) translateZ(0em);
}

.foldBtm {
  animation: foldBottom var(--rotateSpeedBtm);
  transform: translateY(8em) rotateX(180deg) translateZ(0.01em);
}

@keyframes foldBottom {
  0% {
    transform: translateY(8em) rotateX(0deg);
  }
  100% {
    transform: translateY(8em) rotateX(180deg);
  }
}
.openBtm {
  animation: openBottom var(--rotateSpeedOpenBtm) ease-in;
  transform: translateY(8em) rotateX(0deg);
}

@keyframes openBottom {
  0% {
    transform: translateY(8em) rotateX(180deg);
  }
  100% {
    transform: translateY(8em) rotateX(0deg);
  }
}
.front {
  position: absolute;
  width: 16.18em;
  height: 16em;
  color: black;
}

.back {
  position: absolute;
  width: 16.18em;
  height: 16em;
  transform: rotateY(180deg) translateZ(0.01em);
  color: black;
}

.bgTop {
  position: absolute;
  width: 16.18em;
  height: 8em;
  background-color: rgb(245, 245, 245);
}

.bgBtm {
  position: absolute;
  width: 16.18em;
  height: 8em;
  background-color: rgba(34, 34, 210, 0);
}

.bgBackTop {
  position: absolute;
  transform: rotateZ(180deg);
  width: 16.18em;
  height: 8em;
  background-color: rgb(245, 245, 245);
  align-content: center;
}

.bgBackBtm {
  position: absolute;
  transform: rotateZ(180deg);
  width: 16.18em;
  height: 8em;
  background-color: rgb(245, 245, 245);
}

footer {
  position: fixed;
  width: 100vw;
  height: 1.618em;
  padding-top: 0.4em;
  bottom: 0em;
  background: linear-gradient(0deg, rgb(13, 13, 13), 85%, rgba(55, 55, 55, 0.45), rgba(89, 89, 89, 0.15));
  text-align: center;
}

footer a {
  font-size: 1.5em;
  font-weight: 500;
  color: rgb(89, 89, 89);
  font-family: footerFont;
  text-decoration: none;
}

.footerP {
  font-size: 0.5em;
  color: rgba(89, 89, 89, 0.5);
}

a span {
  font-size: 0.5em;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.5em;
}

@font-face {
  src: url("/JeffDavis/fonts/Melodice.ttf");
  font-family: footerFont;
}