1 files changed, 139 insertions, 0 deletions
diff --git a/gaming/stepmania/style.css b/gaming/stepmania/style.css
new file mode 100644
index 0000000..20bca04
--- /dev/null
+++ b/gaming/stepmania/style.css
@@ -0,0 +1,139 @@
+/* Base */
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #ffd;         /* light yellow */
+  color: #111;
+  font-family: system-ui, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}
+
+/* Header */
+header {
+  padding: 16px;
+  background: #fff6c7;
+  border-bottom: 2px solid #e6d27a;
+  text-align: center;
+}
+h1 {
+  margin: 0 0 8px;
+  font-family: "Comic Sans MS","Chalkboard SE","Comic Neue",sans-serif;
+  font-size: 1.6rem;
+}
+
+/* Nav */
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 8px;
+  justify-content: center;
+}
+nav a {
+  display: inline-block;
+  padding: 6px 8px;
+  text-decoration: none;
+  color: #002;
+  border-radius: 4px;
+  transition: background .15s, color .15s;
+}
+nav a:hover, nav a.is-active {
+  background: red;
+  color: #000;
+}
+
+/* Layout */
+main {
+  max-width: 900px;
+  margin: 20px auto;
+  padding: 0 16px;
+}
+section { margin: 24px 0; }
+h2 { margin: 0 0 8px; }
+
+/* Hero image */
+.hero-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  border: 2px solid #e6d27a;
+  background: #fffbe3;
+}
+
+/* Lists */
+#song-list { padding-left: 18px; }
+
+/* Scoreboard (minimal) */
+#score-board {
+  margin-top: 8px;
+  border: 2px solid #e6d27a;
+  border-radius: 8px;
+  background: #fffbe3;
+  overflow: hidden;
+}
+#score-board table { width: 100%; border-collapse: collapse; }
+#score-board th, #score-board td { padding: 8px; text-align: left; }
+#score-board thead th { background: #ffe06d; }
+#score-board tbody tr:nth-child(odd) { background: #fff6c7; }
+
+/* Button */
+button {
+  padding: 10px 14px;
+  border: 2px solid #e6d27a;
+  border-radius: 8px;
+  background: #ffd;
+  color: #111;
+  cursor: pointer;
+  transition: background .15s, color .15s;
+}
+button:hover { background: red; color: #fff; }
+
+/* Gallery (simple responsive) */
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.gallery img {
+  width: calc(33.333% - 7px);
+  min-width: 160px;
+  flex: 1 1 auto;
+  border: 2px solid #e6d27a;
+  border-radius: 8px;
+  background: #fffbe3;
+}
+
+/* Form */
+form {
+  display: grid;
+  gap: 8px;
+  max-width: 600px;
+}
+input[type="text"], input[type="email"], textarea {
+  width: 100%;
+  padding: 10px;
+  border: 2px solid #e6d27a;
+  border-radius: 8px;
+  background: #fffef0;
+  font: inherit;
+  color: #111;
+}
+textarea { min-height: 120px; resize: vertical; }
+
+/* Footer */
+footer {
+  text-align: center;
+  color: #444;
+  margin: 32px 0 24px;
+}
+
+/* Small screens */
+@media (max-width: 640px) {
+  nav ul { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .gallery img { width: calc(50% - 5px); }
+}