@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap'); /* Für die nebeneinander stehenden Würfelbilder im Würfelspiel */ .dice-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin-bottom: 10px; } /* Import Raleway font */ /* Theme variables */ :root { /* Light theme variables */ --bg: #f5f5f5; --text: #2c3e50; --muted: #666666; --container-bg: #ffffff; --card-bg: #ffffff; --primary: #3498db; /* light-mode primary */ --primary-contrast: #ffffff; --primary-hover: #2980b9; --accent: #007BFF; --success: #2e7d32; --warning: #f57f17; /* Grid background tokens */ --grid-size: 40px; --grid-line: #e4e4e7; /* light grid line */ } body { font-family: 'Raleway', sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; background-color: var(--bg); color: var(--text); transition: background-color 300ms ease, color 300ms ease; } /* Countdown under coin counter (top-right, directly below .coin-display) */ .coin-reset-countdown { position: absolute; top: 110px; /* just below the coins GUI (coin-debug-toggle at 132px) */ right: 10px; z-index: 10; font-size: 13px; line-height: 1.3; color: var(--muted); text-align: right; margin-top: 0; /* no extra gap when absolutely positioned */ } html.dark-mode .coin-reset-countdown, body.dark-mode .coin-reset-countdown { color: var(--muted); } /* Encrypted/reveal styling for the countdown text */ .coin-reset-countdown [data-coin-countdown] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; /* align digits nicely */ font-size: 14px; font-weight: 500; transition: color 150ms ease; } .coin-reset-countdown [data-coin-countdown].is-encrypting { color: var(--muted); } .coin-reset-countdown [data-coin-countdown].is-revealed { color: var(--text); } /* Dark theme overrides - toggled by adding `dark-mode` to html or body */ html.dark-mode, body.dark-mode { --bg: #121212; --text: #e0e0e0; --muted: #b0b0b0; --container-bg: #1e1e1e; --card-bg: #2a2a2a; --primary: #0b3d91; /* dark-mode primary (dark blue) */ --primary-contrast: #ffffff; --primary-hover: #07285a; --accent: #0b3d91; --success: #2e7d32; --warning: #f57f17; --grid-line: #262626; /* dark grid line */ } /* Index grid background (mask-free) Usage: add class "has-grid-bg" to (preferred) on pages that should display the grid. Layers: 1) radial-gradient to softly fade the grid toward the edges by blending into var(--bg) 2) vertical grid lines (to right) 3) horizontal grid lines (to bottom) 4) base fill var(--bg) */ html.has-grid-bg { background-color: var(--bg); background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 20%, var(--bg) 75% ), linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: 0 0, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat; } /* When the grid is on the html element, make sure the body doesn't cover it */ html.has-grid-bg body { background-color: transparent; } /* Dark-mode link color for normal links (exclude buttons) */ html.dark-mode a:not(.game-button):not(.button-link), body.dark-mode a:not(.game-button):not(.button-link) { color: var(--primary); } html.dark-mode a:not(.game-button):not(.button-link):hover, body.dark-mode a:not(.game-button):not(.button-link):hover { color: var(--primary-hover); } .container { background-color: transparent; padding: 30px; border-radius: 10px; box-shadow: none; text-align: center; transition: background-color 300ms ease, box-shadow 300ms ease; } html.dark-mode .container, body.dark-mode .container { background-color: transparent; box-shadow: none; } h1 { color: #1a2942; text-align: center; margin-bottom: 30px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 48px; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } html.dark-mode h1, body.dark-mode h1 { color: var(--text); } h2 { color: var(--text); font-weight: 600; letter-spacing: -0.3px; } .game-selection { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; position: relative; padding: 30px; border-radius: 12px; overflow: hidden; border: 3px solid rgba(0, 0, 0, 0.4); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); } .game-selection::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('../images/blue-background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(8px); z-index: 0; } .game-card { position: relative; z-index: 1; } .game-card { /* Mask-free animated gradient border using layered backgrounds */ border-radius: 8px; border: 3px solid transparent; /* gradient draws the border */ background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(90deg, #1a2942, #3498db, #2d4263, #1a2942) border-box; background-size: auto, 200% 100%; animation: borderRotate 2s linear infinite; /* animates gradient layer */ padding: 22px; /* 25px minus 3px border to keep inner content size similar */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); width: 380px; transition: transform 0.3s ease, background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; display: flex; flex-direction: row; align-items: center; gap: 15px; text-align: left; position: relative; overflow: hidden; } /* Removed ::before mask-based border in favor of layered backgrounds above */ @keyframes borderRotate { to { background-position: 200%; } } .game-card img { width: 120px; height: 120px; object-fit: cover; object-position: center; border-radius: 8px; flex-shrink: 0; display: block; } .game-icon { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 64px; background: linear-gradient(135deg, #1a2942 0%, #2d4263 100%); border-radius: 8px; flex-shrink: 0; } html.dark-mode .game-icon, body.dark-mode .game-icon { background: linear-gradient(135deg, #0b3d91 0%, #07285a 100%); } .game-info { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 8px; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } html.dark-mode .game-card, body.dark-mode .game-card { /* Keep layered backgrounds; inner color already respects var(--card-bg) */ } .game-card h2 { color: #1a2942; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24px; margin: 0; letter-spacing: 0.5px; } html.dark-mode .game-card h2, body.dark-mode .game-card h2 { color: var(--text); } .game-card p { color: #4a5568; font-size: 15px; margin: 0; line-height: 1.6; font-weight: 400; } html.dark-mode .game-card p, body.dark-mode .game-card p { color: var(--muted); } .game-button { display: inline-block; background-color: #1a2942; color: #ffffff; padding: 11px 26px; text-decoration: none; border-radius: 6px; margin-top: 10px; transition: background-color 0.3s ease; font-weight: 500; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; } .game-button:hover { background-color: #2d4263; } html.dark-mode .game-button, body.dark-mode .game-button { background-color: var(--primary); color: var(--primary-contrast); } html.dark-mode .game-button:hover, body.dark-mode .game-button:hover { background-color: var(--primary-hover); } /* Social Media Icons */ .socials-container { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 50px; padding: 30px 0; } .socials-container a { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(26, 41, 66, 0.1); transition: all 0.3s ease; position: relative; } .socials-container a:hover { background-color: var(--accent-color); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .socials-container a svg { width: 24px; height: 24px; fill: #1a2942; transition: fill 0.3s ease; } .socials-container a:hover svg { fill: white; } html.dark-mode .socials-container a, body.dark-mode .socials-container a { background-color: rgba(255, 255, 255, 0.1); } html.dark-mode .socials-container a svg, body.dark-mode .socials-container a svg { fill: var(--text); } html.dark-mode .socials-container a:hover svg, body.dark-mode .socials-container a:hover svg { fill: white; } .back-button { display: inline-block; color: var(--muted); text-decoration: none; margin-bottom: 20px; transition: color 0.3s ease; } html.dark-mode .back-button, body.dark-mode .back-button { color: var(--primary); } .back-button:hover { color: var(--text); } html.dark-mode .back-button:hover, body.dark-mode .back-button:hover { color: var(--primary-hover); } .game-area { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .game-controls { margin: 20px 0; display: flex; flex-direction: column; align-items: center; } /* Blackjack specific styles */ .dealer-hand, .player-hand { margin: 20px 0; padding: 15px; background: var(--card-bg); border-radius: 8px; color: var(--text); transition: background-color 300ms ease, color 300ms ease; } .card { display: inline-block; padding: 10px 15px; margin: 5px; background: var(--card-bg); border: 1px solid rgba(0,0,0,0.08); border-radius: 5px; font-size: 20px; color: var(--text); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; } #messages { margin: 20px 0; padding: 10px; border-radius: 5px; font-weight: bold; color: var(--text); } html.dark-mode #messages, body.dark-mode #messages { color: var(--text); } /* Slot machine styles */ .slot-reels { display: flex; justify-content: center; gap: 15px; margin: 15px 0; } .reel { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border: 2px solid rgba(0,0,0,0.06); border-radius: 8px; font-size: 48px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: background-color 300ms ease, border-color 300ms ease; } html.dark-mode .reel, body.dark-mode .reel { background: var(--card-bg); border-color: rgba(255,255,255,0.06); } #slot-message { margin-top: 12px; font-weight: 700; color: var(--text); } #slot-message.msg-big { color: var(--success); } #slot-message.msg-small { color: var(--warning); } #slot-message.msg-none { color: var(--text); } h3 { color: var(--text); margin-top: 20px; } #output { font-family: monospace; background: var(--card-bg); padding: 8px; border: 1px solid rgba(0,0,0,0.1); width: 60ch; min-height: 4em; margin: 10px 0; color: var(--text); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; } label { display: block; margin: 15px 0 5px; text-align: center; color: var(--text); } input[type="number"] { padding: 5px; font-size: 16px; width: 60px; color: var(--text); background-color: var(--card-bg); border: 1px solid rgba(0,0,0,0.12); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; } button { background-color: var(--primary); color: var(--primary-contrast); padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; margin: 10px 0; font-size: 16px; font-weight: 600; transition: background-color 300ms ease, color 300ms ease; } button:hover { background-color: var(--primary-hover); } .game-card img { margin: 0 10px 0 0; width: 90px; height: 90px; object-fit: contain; flex-shrink: 0; } .game-card h2, .game-card p, .game-card .game-button { margin-left: 0; } .game-card .game-info { display: flex; flex-direction: column; justify-content: center; flex: 1; } /* Styles for the Cockfight game */ .cockfight-container { text-align: center; margin: 20px; } .cockfight-arena { display: flex; justify-content: space-around; align-items: center; margin: 20px 0; border: 2px solid rgba(0,0,0,0.08); padding: 20px; border-radius: 10px; background-color: var(--card-bg); color: var(--text); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; } html.dark-mode .cockfight-arena, body.dark-mode .cockfight-arena { border-color: rgba(255,255,255,0.06); background-color: var(--card-bg); color: var(--text); } /* Cock animations */ .cock { font-size: 60px; transition: transform 0.25s ease, opacity 0.25s ease; will-change: transform, opacity; } @keyframes flap { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes shake { 0% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(-6px) rotate(-6deg); } 40% { transform: translateX(6px) rotate(6deg); } 60% { transform: translateX(-4px) rotate(-4deg); } 80% { transform: translateX(4px) rotate(4deg); } 100% { transform: translateX(0) rotate(0deg); } } @keyframes jump { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-18px) scale(1.08); } 70% { transform: translateY(-8px) scale(1.03); } 100% { transform: translateY(0) scale(1); } } .cock.flap { animation: flap 0.38s ease-in-out infinite; } .cock.shake { animation: shake 0.6s ease-in-out 1; } .cock.jump { animation: jump 0.9s cubic-bezier(.2,.8,.2,1) 1; } .cock.winner { color: var(--primary); filter: drop-shadow(0 6px 8px rgba(11,61,145,0.18)); } .cock.loser { opacity: 0.45; filter: grayscale(30%); } .cockfight-arena.fighting { box-shadow: 0 6px 20px rgba(0,0,0,0.12) inset; } #result { margin-top: 20px; font-size: 18px; font-weight: bold; color: var(--text); } html.dark-mode #result, body.dark-mode #result { color: var(--text); } /* Dark mode switch (neumorphic style) */ .dark-mode-toggle { position: absolute; top: 10px; right: 10px; } /* Structure: label.label > .toggle (contains input.toggle-state + .indicator) + .switch-text */ .dark-mode-toggle .label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; color: var(--text); } .dark-mode-toggle .toggle { isolation: isolate; position: relative; height: 30px; width: 60px; border-radius: 15px; overflow: hidden; background: var(--card-bg); /* soft neu-like shadow */ box-shadow: -6px -4px 10px rgba(255,255,255,0.25), 6px 4px 12px rgba(0,0,0,0.18), inset 3px 3px 6px rgba(0,0,0,0.08), inset -3px -3px 6px rgba(255,255,255,0.18); transition: box-shadow 250ms ease, background-color 250ms ease; } html.dark-mode .dark-mode-toggle .toggle, body.dark-mode .dark-mode-toggle .toggle { /* slightly flatter in dark mode */ box-shadow: -4px -3px 8px rgba(255,255,255,0.05), 6px 4px 10px rgba(0,0,0,0.5), inset 3px 3px 6px rgba(0,0,0,0.35), inset -3px -3px 6px rgba(255,255,255,0.03); } .dark-mode-toggle .toggle-state { display: none; } .dark-mode-toggle .indicator { height: 100%; width: 200%; border-radius: 15px; background: linear-gradient(90deg, rgba(236,240,243,1) 0%, rgba(236,240,243,1) 50%, rgba(32,32,38,1) 50%, rgba(32,32,38,1) 100%); /* start with light (left) visible */ transform: translate3d(-75%, 0, 0); transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35); } /* Checked: slide to reveal dark half */ .dark-mode-toggle .toggle-state:checked ~ .indicator { transform: translate3d(25%, 0, 0); } .dark-mode-toggle .switch-text { font-size: 15px; color: var(--text); } html.dark-mode .dark-mode-toggle .switch-text, body.dark-mode .dark-mode-toggle .switch-text { color: var(--text); } /* Coin display (top-right, left of the dark mode switch) */ .coin-display { position: absolute; top: 60px; /* add extra space below the switch */ right: 10px; /* align with the switch's right edge */ display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--card-bg); color: var(--text); border-radius: 999px; box-shadow: 0 2px 5px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.06); z-index: 10; } html.dark-mode .coin-display, body.dark-mode .coin-display { background: var(--card-bg); color: var(--text); border-color: rgba(255,255,255,0.06); box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .coin-display .coin-icon { font-size: 16px; } .coin-display .coin-amount { font-weight: 700; } /* Button under coin counter */ .coin-actions { position: absolute; top: 100px; /* below coin-display */ right: 10px; z-index: 10; display: none; /* hidden by default; enabled in debug mode */ } .coin-actions .coin-btn { padding: 6px 12px; border-radius: 999px; background: var(--primary); color: var(--primary-contrast); border: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 300ms ease, color 300ms ease; margin-left: 6px; } .coin-actions .coin-btn:hover { background: var(--primary-hover); } /* Secondary style for a minus button */ .coin-actions .coin-btn--secondary { background: transparent; color: var(--text); border: 1px solid rgba(0,0,0,0.12); } html.dark-mode .coin-actions .coin-btn--secondary, body.dark-mode .coin-actions .coin-btn--secondary { border-color: rgba(255,255,255,0.12); } /* Enable coin actions when html has debug class */ html.debug .coin-actions, body.debug .coin-actions { display: block; } /* Debug toggle button (always visible) */ .coin-debug-toggle { position: absolute; top: 132px; /* below coin actions */ right: 10px; z-index: 10; } /* Right-side Changelog card — match site design + theme variables */ .changelog-card { position: absolute; top: 180px; /* sits a little below the coins GUI */ right: 10px; width: 192px; /* w-48 */ height: 256px; /* h-64 */ overflow: hidden; border-radius: 12px; background: var(--card-bg); color: var(--text); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 16px rgba(0,0,0,0.12); z-index: 9; /* under coin controls (10) but above page */ transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } /* Remove decorative glow from original snippet */ .changelog-card::before { display: none; } .changelog-inner { position: relative; inset: 0; display: flex; flex-direction: column; height: 100%; padding: 8px; /* create an inner padding comparable to other cards */ background: transparent; /* card owns the background */ color: inherit; } .changelog-header { font-size: 18px; font-weight: 700; padding: 10px 12px; margin: 0; color: var(--text); border-bottom: 1px solid rgba(0,0,0,0.12); } .changelog-content { padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--text); flex: 1; /* take remaining vertical space */ overflow: auto; /* scroll if content grows */ } .changelog-content ul { padding-left: 16px; margin: 6px 0 0 0; } .changelog-content ul li { list-style: none; position: relative; padding-left: 16px; /* space for custom bullet */ margin: 6px 0; } .changelog-content ul li::before { content: "✔"; position: absolute; left: 0; top: 0; color: var(--primary); font-size: 0.9em; line-height: 1.6; } /* Dark mode — rely on theme vars; only adjust subtle borders/shadows */ html.dark-mode .changelog-card, body.dark-mode .changelog-card { background: var(--card-bg); color: var(--text); border-color: rgba(255,255,255,0.08); box-shadow: 0 6px 16px rgba(0,0,0,0.2); } html.dark-mode .changelog-header, body.dark-mode .changelog-header { border-bottom-color: rgba(255,255,255,0.12); } /* Responsive: on small screens, let the card flow below content */ @media (max-width: 900px) { .changelog-card { position: static; width: 100%; max-width: 420px; height: auto; margin: 16px auto 0; } .changelog-inner { height: auto; padding: 10px; } } .coin-debug-toggle .coin-btn { padding: 6px 12px; border-radius: 999px; background: transparent; color: var(--text); border: 1px solid rgba(0,0,0,0.12); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; } .coin-debug-toggle .coin-btn:hover { background: rgba(0,0,0,0.05); } html.dark-mode .coin-debug-toggle .coin-btn, body.dark-mode .coin-debug-toggle .coin-btn { border-color: rgba(255,255,255,0.12); } html.dark-mode .coin-debug-toggle .coin-btn:hover, body.dark-mode .coin-debug-toggle .coin-btn:hover { background: rgba(255,255,255,0.06); } /* Styles for the button linking to the empty page */ .button-container { text-align: center; margin: 20px 0; } .button-link { display: inline-block; padding: 10px 20px; font-size: 16px; color: var(--primary-contrast); background-color: var(--primary); text-decoration: none; border-radius: 5px; transition: background-color 0.3s; font-weight: 600; } .button-link:hover { background-color: var(--primary-hover); } html.dark-mode .button-link, body.dark-mode .button-link { background-color: var(--primary); color: var(--primary-contrast); } html.dark-mode .button-link:hover, body.dark-mode .button-link:hover { background-color: var(--primary-hover); } /* Contact form styles */ .contact-form { max-width: 600px; margin: 30px auto; display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-weight: 600; color: var(--text); text-align: left; display: block; margin: 0; } html.dark-mode .form-group label, body.dark-mode .form-group label { color: var(--text); } .form-group .required { color: #e74c3c; } .form-group input[type="text"], .form-group input[type="email"], .form-group textarea, .form-group select { padding: 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 4px; font-size: 16px; font-family: Arial, sans-serif; transition: border-color 300ms ease, background-color 300ms ease, color 300ms ease; }.form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 6px rgba(11,61,145,0.18); } html.dark-mode .form-group input[type="text"], html.dark-mode .form-group input[type="email"], html.dark-mode .form-group textarea, html.dark-mode .form-group select, body.dark-mode .form-group input[type="text"], body.dark-mode .form-group input[type="email"], body.dark-mode .form-group textarea, body.dark-mode .form-group select { background-color: var(--card-bg); color: var(--text); border-color: rgba(255,255,255,0.06); } html.dark-mode .form-group input[type="text"]:focus, html.dark-mode .form-group input[type="email"]:focus, html.dark-mode .form-group textarea:focus, html.dark-mode .form-group select:focus, body.dark-mode .form-group input[type="text"]:focus, body.dark-mode .form-group input[type="email"]:focus, body.dark-mode .form-group textarea:focus, body.dark-mode .form-group select:focus { border-color: var(--primary); box-shadow: 0 0 6px rgba(11,61,145,0.18); } .form-group textarea { resize: vertical; } .submit-button { padding: 12px 30px; background-color: var(--primary); color: var(--primary-contrast); border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; } .submit-button:hover { background-color: var(--primary-hover); } html.dark-mode .submit-button, body.dark-mode .submit-button { background-color: var(--primary); color: var(--primary-contrast); } html.dark-mode .submit-button:hover, body.dark-mode .submit-button:hover { background-color: var(--primary-hover); } /* Coin rules text (borderless, like Würfelspiel rules) */ .coin-rules { margin-top: 12px; padding: 0 10px; /* small horizontal breathing room */ background: transparent; /* no card background */ color: var(--text); border: none; /* no border */ border-radius: 0; /* no rounding needed */ text-align: center; /* consistent with Würfelspiel */ line-height: 1.6; font-size: 15px; max-width: 680px; margin-left: auto; margin-right: auto; } html.dark-mode .coin-rules, body.dark-mode .coin-rules { /* keep color via theme var; nothing else needed */ background: transparent; border: none; } .coin-rules p { margin: 6px 0; }