diff --git a/style.css b/style.css index dbe979a..88b8150 100644 --- a/style.css +++ b/style.css @@ -272,13 +272,14 @@ .progress-fill { height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold)); width: 0%; transition: width 0.5s; } .equation { font-size: 3.5rem; margin: 5px 0; min-height: 60px; } - #answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: #fff8e0; display: flex; align-items: center; justify-content: center; } + #answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: #fffdf2; display: flex; align-items: center; justify-content: center; } .equation, #answer-display { - color: #fff8e0; + color: #fffdf2; text-shadow: - 0 0 calc(5px + 14px * var(--focus-glow)) rgba(255, 245, 220, calc(0.4 + 0.5 * var(--focus-glow))), - 0 0 calc(10px + 20px * var(--focus-glow)) rgba(255, 230, 120, calc(0.3 + 0.4 * var(--focus-glow))); + 0 0 calc(6px + 16px * var(--focus-glow)) rgba(255, 250, 235, calc(0.45 + 0.45 * var(--focus-glow))), + 0 0 calc(12px + 22px * var(--focus-glow)) rgba(255, 230, 140, calc(0.35 + 0.4 * var(--focus-glow))); + -webkit-text-stroke: 1px rgba(0,0,0,0.5); position: relative; z-index: 200; } @@ -288,9 +289,10 @@ @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; position: relative; z-index: 200; } - .key-btn { background: rgba(116, 0, 1, 0.05); border: 1px solid var(--gold); color: #fff8dc; font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer; - text-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 245, 215, calc(0.35 + 0.45 * var(--focus-glow))); - box-shadow: 0 0 calc(3px + 10px * var(--focus-glow)) rgba(255, 205, 90, calc(0.2 + 0.35 * var(--focus-glow))); + .key-btn { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold); color: #fffdf2; font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer; + text-shadow: 0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 245, 225, calc(0.4 + 0.45 * var(--focus-glow))); + box-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 205, 90, calc(0.25 + 0.35 * var(--focus-glow))); + -webkit-text-stroke: 1px rgba(0,0,0,0.55); } .key-btn:active { background: var(--gold); } .key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; }