.particles-js-canvas-el {
  filter: drop-shadow(0 0 10px #fffd7f); /* Soft glow */
}

body {
  background-color: var(--background-primary);
  text-align: center;
}

/* MAIN SECTIONS */
main {
  background-color: rgb(255, 255, 255, 0);
}

section {
  background-color: rgb(240, 240, 240, 0);
  backdrop-filter: blur(10px);
}

header {
  background-color: rgba(131, 92, 69, 0);
  color: rgb(0, 0, 0);
  background: rgba(255, 255, 255, 0.2); /* Light transparent background */
  backdrop-filter: blur(10px);
}

nav {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}
.nav-ul {
  list-style: none; /* Remove bullets */
}
.nav-li a {
  color: black;
  text-decoration: none;
}
.nav-li a:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
}

aside {
  background-color: var(--game-controls);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
  background-color: rgb(1, 0, 66, 0);
  color: rgb(0, 0, 0);
}
/* ------------------- */

#gameCanvas {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  display: block;
  margin: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#startButton,
#restartButton {
  font-size: 20px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: var(--start-primary);
  color: white;
  border: none;
  border-radius: 5px;
}

#startButton:hover,
#restartButton:hover {
  background-color: var(--start-secondary);
}

#gameControls {
  background-color: var(--game-controls);
  padding: 10px;
  font-size: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#gameControls i {
  cursor: pointer;
  margin: 0 10px;
}

#finishedGameWindow {
  background: white;
  padding: 20px;
  border: 2px solid black;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* shop */
#shopWindow {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

#sellButton,
#buyButton,
#cancelButton {
  font-size: 18px;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  margin: 2px;
}
#sellButton {
  background-color: #84cccc;
}
#buyButton {
  background-color: #ffd06b;
}
#cancelButton {
  background-color: #afafaf;
}
#sellButton:hover {
  background-color: #659e9e;
}
#buyButton:hover {
  background-color: #b6954f;
}
#cancelButton:hover {
  background-color: #818181;
}

/* map */
#modalContainer {
  background-color: rgba(0, 0, 0, 0.8);
}
#mapScrollWrapper {
  border: 5px solid white;
  border-radius: 10px;
}
#closeMapButton {
  font-size: 24px;
  color: white;
  background: rgba(0, 0, 0, 0);
  border: none;
  cursor: pointer;
}