diff --git a/quickdraw-game.html b/quickdraw-game.html index 82e73be..59bca07 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -11,7 +11,13 @@ font-family: sans-serif; } :root { + /** --bg: #161616; + --bg-green: #182118; + --fg-green: #e1ffdb; + */ + --bg: #182118; + --fg: #e1ffdb; } html { height: 100vh; @@ -37,7 +43,7 @@ #center { height: 50px; width: 50px; - background-color: red; + background-color: var(--fg); /** border: 5px solid red; */ border-radius: 50%; position: absolute; @@ -48,7 +54,7 @@ height: 50px; width: 50px; background-color: var(--bg); - border: 10px solid red; + border: 10px solid var(--fg); position: absolute; border-radius: 50%; } @@ -57,7 +63,7 @@ } .target::after { position: absolute; - background-color: red; + background-color: var(--fg); border-radius: 2rem; height: 10px; width: 10px; @@ -69,7 +75,7 @@ .red-dot { height: 50px; width: 50px; - background-color: red; + background-color: var(--fg); position: absolute; border-radius: 50%; } @@ -104,7 +110,7 @@ min-height: 15%; width: 100%; - color: red; + color: var(--fg); text-align: center; line-height: 1rem; @@ -129,9 +135,9 @@ button { background-color: var(--bg); - color: red; + color: var(--fg); padding: 12px 12px; - border: 2px solid red; + border: 2px solid var(--fg); border-radius: 1rem; font-size: .75rem; font-weight: bold; @@ -141,7 +147,7 @@ text-decoration: underline; } button:active { - background-color: red; + background-color: var(--fg); color: var(--bg); font-style: italic; } @@ -526,7 +532,7 @@ if (roundNumber == maxNormalRounds) { if (totalTime < highScore || highScore == 0) { if (highScore == 0) { - alert("high score set!"); + alert("high score set, congratulations! can you go faster?"); } else { alert("NEW FASTEST TIME!!! previous best: " + highScore.toFixed(3) + "s. congratulations cowboy.");