Extract base styles

1 files changed, 187 insertions, 398 deletions

diff --git a/styles.css b/styles.css
index d2891d5..264b6f7 100644
--- a/styles.css
+++ b/styles.css
@@ -1,82 +1,17 @@
 /* Morse Hero Main Styles */
-:root {
-    --primary-color: #3498db;
-    --primary-dark: #2980b9;
-    --secondary-color: #f39c12;
-    --secondary-dark: #e67e22;
-    --accent-color: #e74c3c;
-    --accent-dark: #c0392b;
-    --success-color: #2ecc71;
-    --success-dark: #27ae60;
-    --bg-dark: #2c3e50;
-    --bg-darker: #1a2530;
-    --bg-light: #34495e;
-    --text-light: #ecf0f1;
-    --text-dim: rgba(255, 255, 255, 0.7);
-    --border-radius-sm: 12px;
-    --border-radius-md: 20px;
-    --border-radius-lg: 30px;
-    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.15);
-    --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.2);
-    --transition-fast: 0.2s ease;
-    --transition-normal: 0.3s ease;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: 'Poppins', 'Fredoka', sans-serif;
-    margin: 0;
-    padding: 0;
-    background: radial-gradient(ellipse at top, var(--bg-dark) 0%, var(--bg-darker) 100%);
-    color: var(--text-light);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 30px 20px;
-    text-align: center;
-    width: 100%;
-}
 
 h1 {
-    color: var(--secondary-color);
-    text-shadow:
-        0 0 15px rgba(243, 156, 18, 0.4),
-        3px 3px 0px rgba(231, 76, 60, 0.6);
     font-size: 4.5em;
-    margin-bottom: 20px;
     margin-top: 0.5rem;
     letter-spacing: 2px;
     font-weight: 700;
-    font-family: 'Fredoka', sans-serif;
-    position: relative;
-    display: inline-block;
+    text-shadow:
+        0 0 15px rgba(243, 156, 18, 0.4),
+        3px 3px 0px rgba(231, 76, 60, 0.6);
 }
 
 h1::after {
-    content: "";
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
     width: 80px;
-    height: 4px;
-    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
-    border-radius: 2px;
 }
 
 .game-container {
@@ -107,35 +42,6 @@ h1::after {
     margin-top: 40px;
 }
 
-button {
-    cursor: pointer;
-    font-family: 'Poppins', 'Fredoka', sans-serif;
-    transition: all var(--transition-normal);
-    font-weight: 600;
-    letter-spacing: 1px;
-    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
-    border: none;
-    outline: none;
-    position: relative;
-    overflow: hidden;
-}
-
-button::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
-    opacity: 0;
-    transition: opacity var(--transition-fast);
-}
-
-button:hover::after {
-    opacity: 1;
-}
-
 .start-button {
     background: linear-gradient(145deg, var(--accent-color) 0%, #c0392b 100%);
     color: white;
@@ -200,7 +106,7 @@ button:hover::after {
     background: linear-gradient(145deg, var(--success-color), var(--success-dark));
     box-shadow: 0 8px 0 var(--success-dark),
         0 0 30px rgba(46, 204, 113, 0.5);
-    animation: pulse-green 0.8s infinite alternate;
+    animation: pulse 0.5s;
 }
 
 .option-button.incorrect {
@@ -243,201 +149,9 @@ button:hover::after {
     transition: transform 0.05s, box-shadow 0.05s;
 }
 
-@keyframes pulse-green {
-    from {
-        box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5);
-    }
-
-    to {
-        box-shadow: 0 8px 0 var(--success-dark), 0 0 40px rgba(46, 204, 113, 0.8);
-    }
-}
-
-@keyframes shake {
-
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-
-    20%,
-    60% {
-        transform: translateX(-10px);
-    }
-
-    40%,
-    80% {
-        transform: translateX(10px);
-    }
-}
-
-.progress-container {
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 20px;
-    height: 10px;
-    width: 100%;
-    margin: 20px 0;
-    overflow: hidden;
-    position: relative;
-}
-
-.progress-bar {
-    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-    height: 100%;
-    border-radius: 20px;
-    transition: width 0.5s ease;
-}
-
-.score-display {
-    font-size: 24px;
-    font-weight: bold;
-    margin: 15px 0;
-    color: var(--secondary-color);
-}
-
-.controls {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 30px;
-}
-
-.control-button {
-    background: linear-gradient(145deg, var(--bg-light), #2d3e50);
-    color: var(--text-light);
-    border-radius: var(--border-radius-sm);
-    padding: 12px 25px;
-    font-size: 16px;
-    box-shadow: var(--shadow-sm);
-    transition: all var(--transition-normal);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}
-
-.control-button:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-md);
-    background: linear-gradient(145deg, #3a5269, var(--bg-light));
-}
-
-.control-button:active {
-    transform: translateY(1px);
-    box-shadow: var(--shadow-sm);
-}
-
-.play-again-button {
-    background: linear-gradient(145deg, var(--secondary-color), var(--secondary-dark));
-    color: white;
-    border-radius: var(--border-radius-md);
-    padding: 15px 30px;
-    font-size: 20px;
-    margin-top: 20px;
-    box-shadow: 0 6px 0 var(--secondary-dark),
-        var(--shadow-md);
-}
-
-.play-again-button:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 11px 0 var(--secondary-dark),
-        var(--shadow-lg);
-}
-
-.play-again-button:active {
-    transform: translateY(3px);
-    box-shadow: 0 3px 0 var(--secondary-dark),
-        var(--shadow-sm);
-}
-
-.title-link {
-    color: inherit;
-    text-decoration: none;
-    transition: all var(--transition-normal);
-    position: relative;
-    display: inline-block;
-}
-
-.title-link:hover {
-    color: var(--secondary-color);
-    text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
-}
-
-.footer {
-    margin-top: 40px;
-    padding: 20px;
-    text-align: center;
-    font-size: 16px;
-    color: var(--text-dim);
-    width: 100%;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.footer a {
-    color: var(--primary-color);
-    text-decoration: none;
-    font-weight: bold;
-    transition: color var(--transition-normal);
-    position: relative;
-}
-
-.footer a::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    transform: scaleX(0);
-    height: 2px;
-    bottom: -2px;
-    left: 0;
-    background-color: var(--primary-color);
-    transform-origin: bottom right;
-    transition: transform 0.3s ease-out;
-}
-
-.footer a:hover {
-    color: var(--secondary-color);
-}
-
-.footer a:hover::after {
-    transform: scaleX(1);
-    transform-origin: bottom left;
-}
-
-.instructions {
-    background-color: rgba(255, 255, 255, 0.05);
-    border-radius: var(--border-radius-md);
-    padding: 25px;
-    margin-bottom: 30px;
-    text-align: left;
-    box-shadow: var(--shadow-sm);
-    border-left: 4px solid var(--primary-color);
-}
-
-.instructions h2 {
-    color: var(--secondary-color);
-    margin-bottom: 15px;
-    font-size: 24px;
-}
-
-.instructions p {
-    margin-bottom: 10px;
-    font-size: 16px;
-    line-height: 1.6;
-}
-
-.instructions ul {
-    margin-left: 20px;
-    margin-bottom: 10px;
-}
-
-.instructions li {
-    margin-bottom: 5px;
-}
-
 .chart-link {
-    margin-top: 25px;
+    margin-top: 20px;
     font-size: 18px;
-    display: inline-block;
 }
 
 .chart-link a {
@@ -447,6 +161,11 @@ button:hover::after {
     position: relative;
 }
 
+.chart-link a:hover {
+    color: var(--secondary-color);
+    text-decoration: underline;
+}
+
 .chart-link a::after {
     content: '';
     position: absolute;
@@ -460,10 +179,6 @@ button:hover::after {
     transition: transform 0.3s ease-out;
 }
 
-.chart-link a:hover {
-    color: var(--secondary-color);
-}
-
 .chart-link a:hover::after {
     transform: scaleX(1);
     transform-origin: bottom left;
@@ -616,7 +331,13 @@ button:hover::after {
         0 0 10px rgba(243, 156, 18, 0.3);
 }
 
-/* Settings */
+.score-display {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 15px 0;
+    color: var(--secondary-color);
+}
+
 .settings {
     background: linear-gradient(145deg, rgba(52, 73, 94, 0.7) 0%, rgba(44, 62, 80, 0.7) 100%);
     padding: 25px;
@@ -663,6 +384,11 @@ button:hover::after {
     margin-left: 30px;
 }
 
+.hint-icon {
+    display: inline-block;
+    margin-right: 8px;
+}
+
 .hint-setting input[type="checkbox"] {
     width: 20px;
     height: 20px;
@@ -671,146 +397,209 @@ button:hover::after {
     margin-right: 8px;
 }
 
-.chart-link a {
-    color: var(--primary-color);
-    text-decoration: none;
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.control-button {
+    background: linear-gradient(145deg, var(--bg-light), #2d3e50);
+    color: var(--text-light);
+    border-radius: var(--border-radius-sm);
+    padding: 12px 25px;
+    font-size: 16px;
+    box-shadow: var(--shadow-sm);
     transition: all var(--transition-normal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
 }
 
-.chart-link a:hover {
-    color: var(--secondary-color);
-    text-decoration: underline;
+.control-button:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    background: linear-gradient(145deg, #3a5269, var(--bg-light));
 }
 
-@media (max-width: 768px) {
-    .container {
-        padding: 20px 15px;
-    }
+.control-button:active {
+    transform: translateY(1px);
+    box-shadow: var(--shadow-sm);
+}
 
-    h1 {
-        font-size: 3.5em;
-    }
+.play-again-button {
+    background: linear-gradient(145deg, var(--secondary-color), var(--secondary-dark));
+    color: white;
+    border-radius: var(--border-radius-md);
+    padding: 15px 30px;
+    font-size: 20px;
+    margin-top: 20px;
+    box-shadow: 0 6px 0 var(--secondary-dark),
+        var(--shadow-md);
+}
 
-    .game-container {
-        padding: 30px 20px;
-    }
+.play-again-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 11px 0 var(--secondary-dark),
+        var(--shadow-lg);
+}
 
-    .options {
-        gap: 15px;
-    }
+.play-again-button:active {
+    transform: translateY(3px);
+    box-shadow: 0 3px 0 var(--secondary-dark),
+        var(--shadow-sm);
+}
 
-    .option-button {
-        font-size: 28px;
-        padding: 20px 10px;
-        min-height: 110px;
-    }
+.progress-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    height: 10px;
+    width: 100%;
+    margin: 20px 0;
+    overflow: hidden;
+    position: relative;
+}
 
-    .start-button {
-        font-size: 26px;
-        padding: 18px 30px;
-        max-width: 250px;
-    }
+.progress-bar {
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    height: 100%;
+    border-radius: 20px;
+    transition: width 0.5s ease;
+}
 
-    #startScreen {
-        padding: 30px 20px;
-        margin: 30px 0;
-    }
+.instructions {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius-md);
+    padding: 25px;
+    margin-bottom: 30px;
+    text-align: left;
+    box-shadow: var(--shadow-sm);
+    border-left: 4px solid var(--primary-color);
+}
 
-    #startScreen p {
-        font-size: 24px;
-        margin-bottom: 30px;
-    }
+.instructions h2 {
+    color: var(--secondary-color);
+    margin-bottom: 15px;
+    font-size: 24px;
+}
 
-    #startScreen .chart-link {
-        max-width: 250px;
-    }
+.instructions p {
+    margin-bottom: 10px;
+    font-size: 16px;
+    line-height: 1.6;
+}
 
-    #startScreen .chart-link a {
-        padding: 10px 20px;
-        font-size: 16px;
-    }
+.instructions ul {
+    margin-left: 20px;
+    margin-bottom: 10px;
+}
 
-    .settings {
-        padding: 20px 15px;
-    }
+.instructions li {
+    margin-bottom: 5px;
+}
 
-    .settings label {
-        font-size: 18px;
+@keyframes pulse {
+    0% {
+        box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5);
     }
-
-    .settings select {
-        padding: 10px 15px;
-        font-size: 16px;
+    50% {
+        box-shadow: 0 8px 0 var(--success-dark), 0 0 40px rgba(46, 204, 113, 0.8);
     }
-
-    .hint-setting {
-        margin-left: 15px;
+    100% {
+        box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5);
     }
 }
 
-@media (max-width: 480px) {
-    h1 {
-        font-size: 2.8em;
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    20%, 60% {
+        transform: translateX(-10px);
+    }
+    40%, 80% {
+        transform: translateX(10px);
     }
+}
+
+/* Game Area */
+#gameArea {
+    display: none;
+}
+
+/* When game is active, JavaScript will override this */
+body.game-active #gameArea {
+    display: block;
+}
 
+body.game-active #startScreen {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .game-container {
+        padding: 30px 20px;
+    }
+    
     .options {
         grid-template-columns: 1fr;
+        gap: 20px;
     }
-
+    
     .option-button {
-        font-size: 24px;
-        min-height: 90px;
+        font-size: 30px;
+        padding: 20px 15px;
+        min-height: 110px;
     }
-
+    
+    h1 {
+        font-size: 3.5em;
+    }
+    
     .start-button {
-        font-size: 22px;
-        padding: 15px 25px;
-        max-width: 220px;
-        margin-bottom: 20px;
+        font-size: 28px;
+        padding: 15px 40px;
     }
-
-    #startScreen {
-        padding: 25px 15px;
-        margin: 20px 0;
+    
+    .score-container {
+        flex-direction: column;
+        align-items: center;
     }
-
-    #startScreen p {
-        font-size: 20px;
-        margin-bottom: 25px;
+    
+    .score-widget {
+        margin-bottom: 15px;
     }
-
-    #startScreen .chart-link {
-        max-width: 220px;
+    
+    .settings-toggle {
+        margin-left: 0;
+        margin-top: 10px;
     }
+}
 
-    #startScreen .chart-link a {
-        padding: 8px 16px;
-        font-size: 15px;
+@media (max-width: 480px) {
+    .game-container {
+        padding: 25px 15px;
     }
-
-    .settings {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 15px;
+    
+    .option-button {
+        font-size: 24px;
+        padding: 15px 10px;
+        min-height: 90px;
     }
-
+    
+    h1 {
+        font-size: 2.8em;
+    }
+    
+    .start-button {
+        font-size: 24px;
+        padding: 12px 30px;
+    }
+    
     .hint-setting {
         margin-left: 0;
         margin-top: 10px;
     }
-}
-
-/* Game Area */
-#gameArea {
-    display: none;
-}
-
-/* When game is active, JavaScript will override this */
-body.game-active #gameArea {
-    display: block;
-}
-
-body.game-active #startScreen {
-    display: none;
 }
\ No newline at end of file