body {
  background-color: #101012;
  color: #ddd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

h1 {
  font-size: 3rem;
   font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

h5 {
  font-weight: 600;
  margin-bottom: 10px;
   font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

p{
    color: #888;
 font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

a {
  color: #fff;
  text-decoration: underline;
   font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

nav{
    border-bottom: 1px solid #888;
}

a:hover {
  opacity: 0.7;
}

.h-100vh{
    height: 100vh;
}

.hero-art {
  overflow: hidden;
  position: sticky;
  top: 36vh;
  color: #706363;
  font-size: 1.2em;
  line-height: 1.4;
  opacity: 0.4;
  pointer-events: none;
  white-space: pre;
}

/* CRITICAL FIX */
.hero-art::after {
  content: "▍";
  display: inline-block;
  color: #554e4e;
  margin-left: -20px;
  vertical-align: baseline;
  animation: blink 1.2s infinite;
  overflow: hidden;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.1%, 100% {
    opacity: 0;
  }
}

@media only screen and (max-width: 768px) {

    .hidden-sm {
        display: none !important;
    }

}