:root {
  --haunted-bg: #181825;
  --haunted-card: #17121a; 
  --haunted-accent: #fab387;
  --haunted-accent-2: #8be04b; 
  --haunted-text: #f5e0dc; 
}

body {
    font-size: var(--font-3);
    background: radial-gradient(circle at 10% 10%, rgba(255,123,0,0.03), transparent 20%), var(--haunted-bg);
    color: var(--haunted-text);
  }
  
  .banner {
    position: absolute;
    top: -10px;
    left: var(--spacing-4);
  }
  
  .banner img {
    height: 80px;
  }
  
  .banner:hover img {
    animation: wave-flag 0.5s linear infinite alternate;
  }
  
  
  @keyframes wave-flag {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-5deg);
    }
  }
  
  
  .container {
    margin: var(--spacing-4) auto;
  }
  
  
  img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

  .card {
      background: var(--haunted-card);
      color: var(--haunted-text);
      border-radius: var(--radii-extra);
      overflow: hidden;
  }

    a {
      color: var(--haunted-accent);
    }

    .headline {
      color: var(--haunted-accent);
    }

    p {
        color: var(--haunted-text);
    }