body {
  margin: 10px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background-color: #000000;
  background-image: url('matrix-background-gold.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
  font-size: 75%;
  color: #ffffff;
  transition: background 0.5s, color 0.5s;
}
.site-name-box, .site-slogan-box {
  display: block;
  max-width: 90%;
  padding: 10px 20px;
  margin: 10px auto;
  border-radius: 12px;
  background-color: #000000;
  font-weight: bold;
  color: #FFDF80;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.7);
  transition: color 0.5s;
}

body.light-mode .site-name-box, body.light-mode .site-slogan-box {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.7);
}
::-webkit-scrollbar-thumb {
  background-color: #FFDF80;
}

.site-controls button:hover,
.site-controls a:hover {
  background: #FFDF80;
  color: white;
}

.card {
  background: #000000;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.7);
}
body.light-mode .card {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.7);
}

.card h2 {
  color: #FFDF80;
}
body.light-mode .card h2 {
  color: #FFDF80;
}

.card ul li a:hover {
  color: #FFDF80;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.7);
}
body.light-mode .card ul li a:hover {
  color: #FFDF80;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.7);
}

.sort-indicator {
  color: #FFDF80;
}