/* CSS Reset and Base Styles - Defines color variables for light and dark themes - Applies a minimal reset and base layout for the app - Styles for typography, lists, forms, and checkboxes - Responsive design for mobile */ :root { --color-background: #fff; --color-primary: #007bff; --color-primary-dark: #0056b3; --color-secondary: #6c757d; --color-success: #28a745; --color-success-dark: #218838; --color-danger: #dc3545; --color-danger-dark: #c82333; --color-warning: #ff9800; --color-warning-bg: #ffeb3b; --color-gray: #eee; --color-gray-dark: #ddd; --color-border: #ddd; --color-text: #000; --color-white: #fff; --color-disabled: #6c757d; --color-disabled-bg: #f5f5f5; --color-buzzer: red; --color-buzzer-disabled: rgb(100 0 0); --color-buzzer-border: gray; --color-buzzer-border-disabled: rgb(75 75 75); } /* Dark theme variables */ @media (prefers-color-scheme: dark) { :root { --color-background: #181a1b; --color-primary: #3399ff; --color-primary-dark: #1976d2; --color-secondary: #b0b3b8; --color-success: #43a047; --color-success-dark: #2e7031; --color-danger: #e57373; --color-danger-dark: #b71c1c; --color-warning: #ffa726; --color-warning-bg: #4e3c00; --color-gray: #23272b; --color-gray-dark: #181a1b; --color-border: #333; --color-text: #f5f5f5; --color-white: #222; --color-disabled: #444; --color-disabled-bg: #23272b; --color-buzzer: #b71c1c; --color-buzzer-disabled: #3a0a0a; --color-buzzer-border: rgb(78, 78, 78); --color-buzzer-border-disabled: rgb(34, 34, 34); } } /* Minimal reset for all elements except */ :not(head, head *) { all: unset; display: revert; font-family: sans-serif; box-sizing: border-box; } /* Layout for body and html */ body, html { background-color: var(--color-background); color: var(--color-text); height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Typography styles */ h1 { font-size: min(10vw, 5em); font-weight: bolder; justify-self: center; align-self: center; text-align: center; } h2 { font-weight: bold; text-align: center; border-top: 1px solid; border-bottom: 1px solid; } :is(:has(h2, ol), :has(h2, ul)) h2 { font-weight: bold; } /* List styles */ ol, ul { display: flex; flex-direction: column; align-items: center; list-style: none; overflow-y: auto; } ul li, ol li { border-bottom: 1px solid gray; padding: 0.25em 0; width: 25%; text-align: center; } ul li:last-child, ol li:last-child { border-bottom: none; } /* Form elements */ button { cursor: pointer; border: 3px solid; border-radius: 1em; padding: 1em 2em; text-align: center; } input { border: 1px solid var(--color-border); padding: 0.5em; border-radius: 0.25em; text-align: center; } /* Custom checkbox styling */ .checkbox-container { display: flex; align-items: center; cursor: pointer; font-size: 0.9em; gap: 0.5em; user-select: none; } .checkbox-container input[type="checkbox"] { display: none; } .checkmark { height: 20px; width: 20px; background-color: #eee; border: 2px solid #ddd; border-radius: 3px; position: relative; transition: all 0.2s ease; } .checkbox-container:hover .checkmark { background-color: #ccc; } .checkbox-container input:checked ~ .checkmark { background-color: #007bff; border-color: #007bff; } .checkbox-container input:indeterminate ~ .checkmark { background-color: #6c757d; border-color: #6c757d; } .checkmark:after { content: ""; position: absolute; display: none; } .checkbox-container input:checked ~ .checkmark:after { display: block; } .checkbox-container input:indeterminate ~ .checkmark:after { display: block; left: 6px; top: 2px; width: 6px; height: 6px; background: white; border-radius: 1px; } .checkbox-container .checkmark:after { left: 6px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } /* Responsive design for small screens */ @media (max-width: 480px) { h1 { font-size: 2.5em; } }