:root {
  --bg-color: rgb(0, 0, 0);
  --primary-accent: #81e8ff;
  --secondary-accent: rgb(251, 29, 29);
  --text-color: #ffffff;
  --link-color: #7b66ff;

  --gba: var(--primary-accent);
  --nes: var(--secondary-accent);
  --ds: var(--link-color);
  --sega: var(--text-color);
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-accent) var(--bg-color);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-color);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary-accent);
  border-radius: 10px;
  border: 3px solid var(--bg-color);
}

.rom-title {
  font-size: 1.6vw;
  font-weight: lighter;
  text-align: center;
  text-decoration-line: underline;
  margin-top: 0.5vh;
  color: var(--text-color);
  text-decoration-color: var(--primary-accent);
  cursor: pointer;
}

.rom-title:hover {
  text-decoration-color: var(--secondary-accent);
  transition: 0.3s;
}

.search {
  text-align: center;
  background-color: transparent;
  border: 3px solid #ffffff;
  border-radius: 2vh;
  height: 5vh;
  width: 30vw;
  color: var(--text-color);
}

.search-div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.filter {
  background-color: rgb(74, 74, 74);
  border: none;
  color: var(--text-color);
  font-size: 1.5vw;
  padding: 0.5vh;
  margin: 0.5vh;
}

.filter:hover {
  background-color: var(--primary-accent) !important;
  border-radius: 0vh !important;
  transition: 0.3s;
  color: black;
}

.filter.nes {
  background-color: #ff9494;
  border-radius: 1vh;
  color: black;
}

.filter.snes {
  background-color: #c884c8;
  border-radius: 1vh;
  color: black;
}

.filter.n64 {
  background-color: #8484c8;
  border-radius: 1vh;
  color: black;
}

.filter.gb {
  background-color: #d69e7e;
  border-radius: 1vh;
  color: black;
}

.filter.gbc {
  background-color: #c8c8c8;
  border-radius: 1vh;
  color: black;
}

.filter.gba {
  background-color: #84c87a;
  border-radius: 1vh;
  color: black;
}

.filter.nds {
  background-color: #c8c884;
  border-radius: 1vh;
  color: black;
}

.filter.segamd {
  background-color: #fcc3fa;
  border-radius: 1vh;
  color: black;
}