:root {
  --yellow: #f3dd93;
  --yellow-50: #f3dd9382;
  --orange: #ff9d62;
  --orange-25: #ff9e6242;
  --orange-75: #ff9e62b8;
  --pink: #f999ba;
  --green: #b3d084;
  --blue: #7ac2eb;
  --purple: #d6beea;
  --purple-med: #a061d3;
  --orange-med: #cc5200;
  --pink-med: #d62261;
  --green-med: #466e17;
  --blue-med: #1a75ab;
  --blue-med50: #1a76ab7e;
  --text-yo: #2c2543;
  --text-gp: #1b3b32;
  --text-by: #4a2834;
  --background: #fffdf6;
  --bgblue: #f4f7f6;
}
@font-face {
  font-family: "Mondwest";
  src: url("../fonts/PPMondwest-Regular.woff2");
}
@font-face {
  font-family: "NeueBit";
  src: url("../fonts/PPNeueBit-Bold.woff2");
}
@font-face {
  font-family: "VT";
  src: url("../fonts/VT323-Regular.woff2");
}
@font-face {
  font-family: "Rascal";
  src: url("../fonts/RASCAL.woff2");
}
@font-face {
  font-family: "Sparkly";
  src: url("../fonts/Sparkly-x37m.woff2");
}
@font-face {
  font-family: "Risque";
  src: url("../fonts/Risque.woff2");
}
@font-face {
  font-family: "Loungy";
  src: url("../fonts/Loungy.woff2");
}
body {
  background-color: var(--yellow);
  background-image: url("../images/bgs/noise.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 100vh;
  margin: 0;
}
header {
  font-family: "Sparkly";
  font-size: clamp(3.5rem, 6vw, 7rem);
  line-height: 1;
  color: var(--blue);
  text-shadow: 2px 2px 5px var(--orange);
  margin-top: 3.1847vh;
  padding: 0;
  text-align: center;
}
footer {
  font-family: "Risque";
  position: relative;
  margin-top: 15px;
}
footer * {
  background-color: transparent;
  text-decoration: none;
  color: var(--blue);
  text-shadow: 1px 1px 1px var(--orange-25);
}
footer a:hover {
  color: var(--purple);
  text-shadow: 1px 1px 1px var(--orange);
}
footer s {
  color: var(--blue-med);
  font-size: small;
}
.falsebody {
  margin-top: 0;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1000 / 650;
  position: relative;
}
.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  right: 100%;
  margin-right: -55px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.navbar img {
  width: clamp(90px, 7.8vw, 150px);
  height: auto;
  margin: 10px 0;
}
.navline {
  z-index: 1;
  border-left: 10px black solid;
  content: "";
  position: absolute;
  top: 120px;
  width: 95%;
}
.navbutton {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.yellow span {
  text-shadow: 2px 2px 2px var(--orange-75);
}
.blue span {
  text-shadow: 2px 2px 2px var(--blue-med50);
}
.navbutton span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 2.5rem;
  color: #fff;
  font-family: "Sparkly";
}
.navbutton:hover img,
.navbutton:focus img {
  transform: rotate(2deg);
}
.main {
  width: 100%;
  height: 100%;
  background-image: url("../facsimile/maindiv.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(3px 3px 7px var(--orange-75));
}
.welcome {
  font-family: "Loungy";
  color: var(--blue-med);
  letter-spacing: 2px;
  background-color: white;
  background-image: url("../images/bgs/noise.png");
  position: absolute;
  width: 13vw;
  top: 9vh;
  right: 2.604vw;
  border-radius: 0.25vw;
  box-shadow: 3px 3px 10px 2px var(--blue-med);
  -webkit-box-shadow: 3px 3px 10px 2px var(--blue-med);
  -moz-box-shadow: 3px 3px 10px 2px var(--blue-med);
}
.welcome p {
  padding: 0 10px 0 10px;
}
mark {
  background-color: white;
  color: var(--blue-med);
  font-family: "Loungy";
  letter-spacing: 2px;
  padding: 5px;
}
@media (max-height: 820px) {
  header {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 0.5rem;
  }

  .falsebody {
    height: calc(100vh - 220px);
    width: auto;
  }
}
/*   display: grid;
  grid-template-columns: 25px auto 25px;
  grid-template-rows: 55px 540px 55px; */