.btn:hover, .btn:focus, .btn:active, .btn.active {
  color: #fff !important;
  border-color: #e3deff !important;
  background-color: #c49cff !important;
}

header.masthead {
  padding-top: 70px !important;
  padding-bottom: 0px !important;
  min-height: 100vh !important;
}

header.masthead .header-content {
  margin-bottom: 0 !important;
}

body {
  font-family: "ModeNine", "Helvetica", "Arial", "sans-serif" !important;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn {
  font-family: "ModeNine", monospace !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* At the beginning of the animation, div is transparent */
  }
  100% {
    opacity: 1; /* At the end of the animation, div is fully opaque */
  }
}
@keyframes moveUp {
  0% {
    transform: translateY(50px); /* At the beginning of the animation, div is 50px down */
  }
  100% {
    transform: translateY(0); /* At the end of the animation, div is back to its original position */
  }
}
.card.card1 {
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0.33);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.2px);
  -webkit-backdrop-filter: blur(12.2px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  opacity: 1; /* Start with a transparent div */
  transform: translateY(50px); /* Move the div down by 50px */
  animation: fadeIn 1s ease-in-out forwards, moveUp 1s ease-in-out forwards; /* Apply both animations */
}

.card.card2 {
  background: rgba(182, 187, 255, 0.56);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.2px);
  -webkit-backdrop-filter: blur(12.2px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  opacity: 1; /* Start with a transparent div */
  transform: translateY(50px); /* Move the div down by 50px */
  animation: fadeIn 1s ease-in-out forwards, moveUp 1s ease-in-out forwards; /* Apply both animations */
}

.card.card3 {
  background: rgba(182, 187, 255, 0.56);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.2px);
  -webkit-backdrop-filter: blur(12.2px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  opacity: 1; /* Start with a transparent div */
  animation: fadeIn 1s ease-in-out forwards; /* Apply both animations */
}

.card.staticcard {
  /* From https://css.glass */
  background: rgba(70, 0, 69, 0.6);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.2px);
  -webkit-backdrop-filter: blur(9.2px);
}

a:hover, a:focus {
  color: #4943f0 !important;
}

a {
  color: #050097 !important;
}