@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&display=swap');

body.four-kings-theme {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Creepster', cursive !important;
  transition: all 0.5s ease-in-out;
}

body.four-kings-theme * {
  color: #ffffff !important;
  border-color: #444444 !important;
}

body.four-kings-theme .navbar {
  background-color: #111111 !important;
  border-bottom: 2px solid #444444;
}

body.four-kings-theme .navbar-brand,
body.four-kings-theme .nav-link {
  color: #ffffff !important;
  text-shadow: 0 0 5px #ff0000;
}

body.four-kings-theme .navbar-brand:hover,
body.four-kings-theme .nav-link:hover {
  color: #ff6666 !important;
  text-shadow: 0 0 10px #ff0000;
}

body.four-kings-theme .container {
  background-color: #000000 !important;
}

body.four-kings-theme .card {
  background-color: #111111 !important;
  border: 2px solid #444444 !important;
  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
}

body.four-kings-theme .btn {
  background-color: #222222 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
  text-shadow: 0 0 3px #ff0000;
}

body.four-kings-theme .btn:hover {
  background-color: #333333 !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

body.four-kings-theme .alert {
  background-color: #222222 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
}

body.four-kings-theme h1,
body.four-kings-theme h2,
body.four-kings-theme h3,
body.four-kings-theme h4,
body.four-kings-theme h5,
body.four-kings-theme h6 {
  font-family: 'Nosifer', cursive !important;
  text-shadow: 0 0 8px #ff0000;
  letter-spacing: 2px;
}

body.four-kings-theme a {
  color: #ff6666 !important;
  text-decoration: none;
}

body.four-kings-theme a:hover {
  color: #ff9999 !important;
  text-shadow: 0 0 5px #ff0000;
}

body.four-kings-theme input,
body.four-kings-theme textarea,
body.four-kings-theme select {
  background-color: #222222 !important;
  border: 1px solid #444444 !important;
  color: #ffffff !important;
}

body.four-kings-theme input:focus,
body.four-kings-theme textarea:focus,
body.four-kings-theme select:focus {
  border-color: #ff6666 !important;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}

/* Spooky animation effects */
body.four-kings-theme {
  animation: flicker 3s infinite alternate;
}

body.four-kings-theme trix-toolbar {
  background-color: white;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}