/* blue --> green */
image {
  display: block;
}

/* This is very messy. I'll clean it up later but my MO for this was "style over substance" (lit.) */
img {
  image-rendering: crisp-edges;
  mix-blend-mode: normal;
  transition: all ease-in-out 0.3s;
}

body {
  padding: 2% 2% 5% 2%;
  font-size: 1.25rem;
  font-family: "DM Mono", monospace;
  background-color: #00121d;
  color: #d9f8e6;
}

h1, h2 {
  text-shadow: 0 0 7px #b7d1cd, 0 0 10px #8aa9b1, 0 0 21px #697fc9;
}

h3, h4, h5, p, ul, ol {
  text-shadow: 0 0 3px #b7d1cd;
}

h1, h2 {
  font-family: "Ubuntu Mono";
  font-weight: 600;
}

footer, nav, header, h1, h2 {
  text-align: center;
}

h5 {
  margin: 0.25rem 1rem 0.25rem 1rem;
}

p, ul {
  font-size: 1.075rem;
  line-height: 1.2;
  font-weight: 150;
}

hr {
  margin: 2% 35% 2% 35%;
  color: inherit;
}

ul {
  list-style-type: style;
  list-style-image: url("../img/listico.png");
  list-style-position: inside;
}

a {
  text-decoration-line: none;
  color: #95a46b;
  text-shadow: 0 0 3px #73cf4e;
}

a:hover, a:focus {
  color: #b2cc92;
}

a:visited {
  color: #5badd3;
  text-shadow: none;
}

a:active {
  color: #3b5987;
  text-shadow: 0 0 7px #3b5987;
}

footer a, nav a {
  font-family: "Ubuntu Mono";
  text-decoration: none;
  cursor: alias;
  font-weight: 450;
  font-size: 1.25rem;
}

::selection {
  color: #00121d;
  border-radius: 15px;
  background: #3b5987;
  text-shadow: none;
}

#main {
  padding: 0 5% 0 5%;
}

/* CRT Overlay by
https://aleclownes.com
begin */
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974011px 0 1px rgba(0, 30, 255, 0.5), -2.7928974011px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.0295627584px 0 1px rgba(0, 30, 255, 0.5), -0.0295627584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.4021853855px 0 1px rgba(0, 30, 255, 0.5), -0.4021853855px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.47940379px 0 1px rgba(0, 30, 255, 0.5), -3.47940379px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401px 0 1px rgba(0, 30, 255, 0.5), -1.6125630401px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085px 0 1px rgba(0, 30, 255, 0.5), -0.7015590085px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.8969140477px 0 1px rgba(0, 30, 255, 0.5), -3.8969140477px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.8709056148px 0 1px rgba(0, 30, 255, 0.5), -3.8709056148px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.2310569634px 0 1px rgba(0, 30, 255, 0.5), -2.2310569634px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.0808429042px 0 1px rgba(0, 30, 255, 0.5), -0.0808429042px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067px 0 1px rgba(0, 30, 255, 0.5), -2.3758461067px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.2021930511px 0 1px rgba(0, 30, 255, 0.5), -2.2021930511px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780615px 0 1px rgba(0, 30, 255, 0.5), -2.8638780615px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.4887402516px 0 1px rgba(0, 30, 255, 0.5), -0.4887402516px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491306px 0 1px rgba(0, 30, 255, 0.5), -1.8948491306px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308px 0 1px rgba(0, 30, 255, 0.5), -0.0833037308px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.0976982726px 0 1px rgba(0, 30, 255, 0.5), -0.0976982726px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.4433397615px 0 1px rgba(0, 30, 255, 0.5), -3.4433397615px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838853px 0 1px rgba(0, 30, 255, 0.5), -2.1841838853px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764474px 0 1px rgba(0, 30, 255, 0.5), -2.6208764474px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
}
.overlay-effect::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.overlay-effect::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* TODO: Radial gradient for faux-lens distortion. Doesn't render correctly with cirgle, linear is nice as-is, though. */
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.overlay-effect {
  animation: textShadow 1.6s infinite;
}

/* end */
#footer {
  padding: 2% 12% 0 12%;
  font-size: 16px;
  bottom: 0;
  height: 2em;
  position: sticky;
  height: 20px;
  z-index: 2;
}

#footer a {
  font-family: "DM Mono", monospace;
}

.sticky-bottom {
  transition: cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.5s;
  position: fixed;
  bottom: 0;
  right: 15%;
  z-index: 1;
}

.sticky-bottom a {
  margin-right: 0px;
}

.sticky-bottom img {
  overflow-y: visible;
  rotate: -5deg;
  margin-bottom: -15rem;
}

.sticky-bottom img:hover {
  rotate: -20deg;
  margin-bottom: -2rem;
}

.sticky-bottom img:active {
  margin-bottom: -3rem;
}

.sticky-bottom-stat {
  position: fixed;
  mix-blend-mode: multiply;
  bottom: -6%;
  left: -5%;
  z-index: -1;
}

/* guestbook start */
.container {
  width: 400px;
  padding: 20px;
  background-color: transparent;
  border-radius: 8px;
  text-align: center;
}

.container h1 {
  text-align: center;
}

.form-input {
  margin-bottom: 11px;
}

.form-input label {
  display: block;
  margin-bottom: 5px;
}

.form-input input {
  width: 70%;
  margin-top: 0.5rem;
  padding: 0.125rem;
  background-color: transparent;
  border: 0.125rem solid #d9f8e6;
  box-shadow: 0 0 7px #b7d1cd, 0 0 10px #8aa9b1, 0 0 21px #697fc9;
  border-radius: 0.75rem;
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: inherit;
  color: #d9f8e6;
  text-shadow: 0 0 7px #b7d1cd, 0 0 10px #8aa9b1, 0 0 21px #697fc9;
}

.btn button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-family: "DM Mono", monospace;
  font-size: inherit;
  color: #d9f8e6;
  text-shadow: inherit;
}

.guest-card {
  border: 0.125rem solid #d9f8e6;
  box-shadow: 0 0 7px #b7d1cd, 0 0 10px #8aa9b1, 0 0 21px #697fc9;
  border-radius: 3rem;
  padding: 5px;
  margin: 5px 0;
  border-radius: 0.125rem;
  text-shadow: inherit;
  overflow-wrap: break-word;
}

.guest-card h2 {
  margin: 0;
}

.guest-card p {
  margin: 5px 0;
}

/* guestbook end */