@font-face {
    font-family: C64Font;
    src:url(fonts/C64_Pro-STYLE.ttf);
}

body {
  font-family: C64Font, Arial, Helvetica, sans-serif;
  background: url(background.png) 50% 0 black;
  width: min(70%, 1024px);
  padding: 1rem 0;
  margin: auto;
}

@media only screen and (max-width: 768px) {
  body {
    width: 95%;
  }
}

a {
  color: lightblue;
}

a:hover {
  color: white;
}


.callout {
  background-color: #7778;
  backdrop-filter: blur(2px);
  border-radius: 15px;
  border: solid 2px #9994;
  color: white;
  text-shadow: black 0px 0px 5px, black 1px 1px;
  margin-top: 1rem;
  padding: 10px;
}

.hl-feat {
  color: #8ff;
}
.hl-task {
  color: #8f8;
}
.hl-nts {
  color: #f88;
}

.hero-shadow {
  animation: anim-box-shadow 45s linear infinite;
}

.carousel-outer-button {
  margin-left: 2rem;
  width: 70%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.carousel-cell {
  width: 100%;
  border-radius: 5px;
}
  
@keyframes anim-box-shadow {
  0% { filter: drop-shadow(0 0 20px hsla(0, 100%, 50%, 50%)); }
  10% { filter: drop-shadow(0 0 20px hsla(36, 100%, 50%, 50%)); }
  20% { filter: drop-shadow(0 0 20px hsla(72, 100%, 50%, 50%)); }
  30% { filter: drop-shadow(0 0 20px hsla(108, 100%, 50%, 50%)); }
  40% { filter: drop-shadow(0 0 20px hsla(144, 100%, 50%, 50%)); }
  50% { filter: drop-shadow(0 0 20px hsla(180, 100%, 50%, 50%)); }
  60% { filter: drop-shadow(0 0 20px hsla(216, 100%, 50%, 50%)); }
  70% { filter: drop-shadow(0 0 20px hsla(252, 100%, 50%, 50%)); }
  80% { filter: drop-shadow(0 0 20px hsla(288, 100%, 50%, 50%)); }
  90% { filter: drop-shadow(0 0 20px hsla(324, 100%, 50%, 50%)); }
  100% { filter: drop-shadow(0 0 20px hsla(360, 100%, 50%, 50%)); }
}

/* --- Flickity --- */

/* White circles */
.flickity-page-dots .dot {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: transparent;
  border: 1px solid white;
}
/* Fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: white;
}