:root {
  --glow-color: #4f4f4f;
  --secondary-glow-color: #121212;
}

body {
  background-color: var(--background-color) !important;
  min-height: 100vh;
}

.dark {
  --glow-color: var(--secondary-glow-color) !important;
}

#hero .scroll-indicator {
  position: fixed;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transition: 0.2s all ease-in-out;
}

#hero .scroll-indicator::before {
  animation: bounce 1s ease infinite;
  bottom: 2rem;
  color: var(--text-color);
  content: '╲╱';
  font-size: 2rem;
  height: 4rem;
  left: 50%;
  letter-spacing: -1px;
  line-height: 4rem;
  margin-left: -3rem;
  position: absolute;
  text-align: center;
  width: 6rem;
}

#hero .scroll-indicator.show {
  opacity:0.8 !important;
}

@keyframes bounce {
  50% {
    transform: translateY(-50%);
  }
}

#profileHeader {
  transition: 0.25s all ease-in-out;
}

.showHeaderOnTop {
  box-shadow: 0px 10px 20px var(--glow-color);
}