quatuor/css/synthwave.css

body {
    background-image: url(synthwave/wtCSusF.jpeg);
    background-size: cover;
}

body[data-bs-theme='dark'] {
  --bs-body-bg: #2125296b;
}

.btn-dark {
  --bs-btn-bg: #2125296b;
}

.card {
    background: #25292d66;
}

#matrixCard {
    background-image: radial-gradient(#2226, #25292d66);
}

.card,
#matrixCard {
    background: repeating-linear-gradient(transparent, transparent 2px, #1114 2px, #1114 5px);
    backdrop-filter: blur(3px);
}

.minoes-table {
    background: transparent;
    border-spacing: 2px;
}

#matrixTable {
    margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-size) - 8px);
}

#matrixTable td:not(.mino) {
    border-color: #8881;
    border-top: none;
    border-bottom: none;
}

.mino {
    background: var(--color);
    border: 3px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 0 8px var(--border);
    filter: blur(0.5px);
}

.I {
  --color: #00eaf866;
  --border: #00eaf5;
}

.J {
  --color: #00a9f766;
  --border: #00a9f7;
}

.L {
  --color: #f9b60066;
  --border: #f9b600;
}

.O {
  --color: #e3e04966;
  --border: #e3e049;
}

.S {
  --color: #7bd59e66;
  --border: #7bd59e;
}

.T {
  --color: #d136e266;
  --border: #d136e2;
}

.Z {
  --color: #e67d8666;
  --border: #e67d86;
}

.ghost {
  --color: #fff4;
  --border: #fff5;
}