*{margin:0;padding:0;box-sizing:border-box}.main-header{width:100%;background:#222;padding:12px 20px}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:flex-end;align-items:center}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px}.nav-container{display:flex;gap:20px;align-items:center}.nav-item{color:#ddd;font-size:15px;padding:8px 14px;text-decoration:none}.nav-item.active{color:#fff}button.nav-item{background:#fff;border:none;cursor:pointer;color:#000}.main-content{padding:20px}@media(max-width:768px){.menu-toggle{display:block}.nav-container{position:fixed;top:50px;right:0;background:#222;flex-direction:column;width:200px;padding:20px;gap:10px;display:none}.nav-container.open{display:flex}.nav-item{width:100%;text-align:center}}body{background-color:#f5f5f5;margin:0;padding:0}.home-container{padding:30px;max-width:1100px;margin:0 auto;min-height:100vh}.scramble-box{border:2px solid #444;padding:20px;text-align:center;margin-bottom:40px;background-color:#fff;border-radius:4px}.scramble-box h3{margin:0 0 12px;font-size:18px;color:#333}.scramble-box p{margin:0;font-size:20px;font-weight:500;letter-spacing:1px;color:#222}.main-row{display:flex;gap:40px}.left-side{flex:0 0 320px;display:flex;flex-direction:column;gap:25px}.stats-table{background-color:#fff;border-radius:4px;overflow:hidden}.stats-table table{width:100%;border-collapse:collapse;border:2px solid #444}.stats-table th,.stats-table td{padding:12px 14px;text-align:left;border:1px solid #444}.stats-table th{background:#e8e8e8;font-weight:600;font-size:14px;color:#333}.stats-table td{font-size:14px;color:#444}.stats-table td:first-child{font-weight:500}.timer-display{flex:1;border:3px solid #444;padding:100px 40px;text-align:center;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:4px}.timer-display h1{margin:0;font-size:80px;font-weight:400;color:#222}.avg-display{border:2px solid #444;padding:25px 30px;text-align:center;background-color:#fff;border-radius:4px}.avg-display h4{margin:0 0 10px;font-size:15px;color:#555;font-weight:500}.avg-display p{margin:0;font-size:28px;font-weight:600;color:#222}@media(max-width:768px){.home-container{padding:20px}.main-row{flex-direction:column;gap:25px}.left-side{flex:unset;width:100%;order:2}.timer-display{order:1;padding:120px 20px}.timer-display h1{font-size:60px}.scramble-box p{font-size:16px;word-break:break-word}.stats-table th,.stats-table td{padding:10px 8px;font-size:13px}.avg-display{padding:20px}.avg-display p{font-size:24px}}.login{background-color:#e4e2f5;display:flex;justify-content:center;align-items:center;height:98vh}.loginForm{background-color:#fff;padding:32px;border-radius:12px;box-shadow:0 4px 10px #0000001a;width:320px;display:flex;flex-direction:column;gap:16px}.loginForm h2{text-align:center;font-size:24px;color:#000}.loginForm input{padding:10px;font-size:14px;border:1px solid #ddd;border-radius:6px}.loginButton{padding:10px;background-color:#2563eb;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px}.loginButton:hover{background-color:#1e40af}.signup{background-color:#e4e2f5;display:flex;justify-content:center;align-items:center;height:98vh}.signupForm{background-color:#fff;padding:32px;border-radius:12px;box-shadow:0 4px 10px #0000001a;width:320px;display:flex;flex-direction:column;gap:16px}.signupForm h2{text-align:center;font-size:24px;color:#000}.signupForm input{padding:10px;font-size:14px;border:1px solid #ddd;border-radius:6px}.signupButton{padding:10px;background-color:#2563eb;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px}.signupButton:hover{background-color:#1e40af}.about{max-width:1200px;margin:0 auto;padding:40px 20px}.hero-section{display:flex;align-items:center;justify-content:space-between;gap:60px;margin-bottom:60px;padding:40px;background-color:#fff;border:1px solid #ddd}.hero-content{flex:1;display:flex;flex-direction:column;gap:24px}.hero-content h1{font-size:48px;margin:0;color:#222;font-weight:600}.sub-heading{font-size:20px;color:#555;margin:0;line-height:1.6}.cta-button{display:block;width:fit-content;padding:10px 16px;background-color:#2563eb;color:#fff;text-decoration:none;font-size:16px;font-weight:500}.hero-image{flex:0 0 400px;display:flex;align-items:center;justify-content:center}.hero-image img{width:100%;height:auto}.intro-section{background-color:#fff;padding:40px;border:1px solid #ddd}.intro-section h2{font-size:32px;margin:0 0 24px;color:#222;font-weight:600}.intro-section p{font-size:16px;line-height:1.8;color:#444;margin:0 0 20px}.intro-section p:last-child{margin-bottom:0}@media(max-width:768px){.about{padding:20px}.hero-section{flex-direction:column;gap:30px;padding:30px 20px}.hero-content h1{font-size:36px}.sub-heading{font-size:18px}.hero-image{width:100%;max-width:300px}.intro-section{padding:30px 20px}.intro-section h2{font-size:26px}.intro-section p{font-size:15px}}.admin-container{max-width:1000px;margin:0 auto;padding:30px 20px}.admin-container h1{font-size:28px;margin:0 0 30px;color:#222}.add-scramble{background-color:#fff;padding:25px;margin-bottom:30px;border:1px solid #ddd}.add-scramble h2{font-size:20px;margin:0 0 15px;color:#333}.add-scramble form{display:flex;gap:10px}.add-scramble input{flex:1;padding:10px;font-size:14px;border:1px solid #ccc}.add-scramble button{padding:10px 20px;background-color:#2563eb;color:#fff;border:none;font-size:14px;cursor:pointer}.scrambles-list{background-color:#fff;padding:25px;border:1px solid #ddd}.scrambles-list h2{font-size:20px;margin:0 0 20px;color:#333}.scrambles-list table{width:100%;border-collapse:collapse;border:1px solid #ddd}.scrambles-list th,.scrambles-list td{padding:12px;text-align:left;border:1px solid #ddd}.scrambles-list th{background-color:#f0f0f0;font-weight:600;color:#333}.scrambles-list td{color:#444}.scrambles-list td:first-child{width:60px}.scrambles-list td:last-child{width:100px}.scrambles-list button{padding:6px 12px;background-color:#dc2626;color:#fff;border:none;font-size:13px;cursor:pointer}@media(max-width:768px){.admin-container{padding:20px}.admin-container h1{font-size:24px}.add-scramble,.scrambles-list{padding:20px}.add-scramble form{flex-direction:column}.add-scramble input,.add-scramble button{width:100%}.scrambles-list table{font-size:13px}.scrambles-list th,.scrambles-list td{padding:8px}}.history-container{max-width:900px;margin:0 auto;padding:30px 20px}.history-container h1{font-size:28px;margin:0 0 30px;color:#222}.history-table{background-color:#fff;padding:25px;border:1px solid #ddd}.history-table table{width:100%;border-collapse:collapse;border:1px solid #ddd}.history-table th,.history-table td{padding:12px;text-align:left;border:1px solid #ddd}.history-table th{background-color:#f0f0f0;font-weight:600;color:#333}.history-table td{color:#444}.history-table td:first-child{width:80px}.history-table td:nth-child(2){width:150px}.history-table input{width:100%;padding:6px;border:1px solid #ccc;font-size:14px}.action-buttons,.edit-buttons{display:flex;gap:8px}.action-buttons button:first-child{padding:6px 12px;background-color:#2563eb;color:#fff;border:none;font-size:13px;cursor:pointer}.action-buttons button:last-child{padding:6px 12px;background-color:#dc2626;color:#fff;border:none;font-size:13px;cursor:pointer}.edit-buttons button:first-child{padding:6px 12px;background-color:#16a34a;color:#fff;border:none;font-size:13px;cursor:pointer}.edit-buttons button:last-child{padding:6px 12px;background-color:#6b7280;color:#fff;border:none;font-size:13px;cursor:pointer}@media(max-width:768px){.history-container{padding:20px}.history-container h1{font-size:24px}.history-table{padding:20px}.history-table table{font-size:13px}.history-table th,.history-table td{padding:8px}.action-buttons,.edit-buttons{flex-direction:column;gap:5px}.action-buttons button,.edit-buttons button{width:100%}}body{background-color:#f5f5f5}.contact-container{max-width:800px;margin:0 auto;padding:30px 20px}.contact-container h1{font-size:28px;margin:0 0 30px;color:#222}.contact-info{background-color:#fff;padding:30px;border:1px solid #ddd}.contact-info h2{font-size:22px;margin:0 0 10px;color:#333}.contact-info>p{margin:0 0 30px;color:#555;font-size:16px}.contact-details{display:flex;flex-direction:column;gap:20px}.contact-item{display:flex;flex-direction:column;gap:5px}.contact-item label{font-weight:600;color:#333;font-size:15px}.contact-item p{margin:0;color:#444;font-size:16px}@media(max-width:768px){.contact-container{padding:20px}.contact-container h1{font-size:24px}.contact-info{padding:25px 20px}.contact-info h2{font-size:20px}.contact-info>p{font-size:15px}.contact-item p{font-size:15px}}