-
Question
-
-
+
diff --git a/style.css b/style.css
index f38f043..af4f70b 100644
--- a/style.css
+++ b/style.css
@@ -1,90 +1,96 @@
-*, *::before, *::after {
- box-sizing: border-box;
- font-family: Gotham Rounded;
- }
-
- :root {
- --hue-neutral: 200;
- --hue-wrong: 0;
- --hue-correct: 145;
- }
-
- body {
- --hue: var(--hue-neutral);
- padding: 0;
- margin: 0;
- display: flex;
- width: 100vw;
- height: 100vh;
- justify-content: center;
- align-items: center;
- background-color: hsl(var(--hue), 100%, 20%);
- }
-
- body.correct {
- --hue: var(--hue-correct);
- }
-
- body.wrong {
- --hue: var(--hue-wrong);
- }
-
- .container {
- width: 800px;
- max-width: 80%;
- background-color: white;
- border-radius: 5px;
- padding: 10px;
- box-shadow: 0 0 10px 2px;
- }
-
- .btn-grid {
- display: grid;
- grid-template-columns: repeat(2, auto);
- gap: 10px;
- margin: 20px 0;
- }
-
- .btn {
- --hue: var(--hue-neutral);
- border: 1px solid hsl(var(--hue), 100%, 30%);
- background-color: hsl(var(--hue), 100%, 50%);
- border-radius: 5px;
- padding: 5px 10px;
- color: white;
- outline: none;
- }
-
- .btn:hover {
- border-color: black;
- }
-
- .btn.correct {
- --hue: var(--hue-correct);
- color: black;
- }
-
- .btn.wrong {
- --hue: var(--hue-wrong);
- }
-
- .start-btn, .next-btn {
- font-size: 1.5rem;
- font-weight: bold;
- padding: 10px 20px;
- }
-
- .controls {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .hide {
- display: none;
- }
- /* change font size of questions and style=italic by Sweety*/
- #question{
- font-size: large;
- font-style: italic;
- }
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ font-family: Gotham Rounded;
+}
+
+:root {
+ --hue-neutral: 200;
+ --hue-wrong: 0;
+ --hue-correct: 145;
+}
+
+body {
+ --hue: var(--hue-neutral);
+ padding: 0;
+ margin: 0;
+ display: flex;
+ width: 100vw;
+ height: 100vh;
+ justify-content: center;
+ align-items: center;
+ background-color: hsl(var(--hue), 100%, 20%);
+ background-repeat: no-repeat;
+ background-size: 100vw 100vh;
+ object-fit:contain;
+}
+
+body.correct {
+ --hue: var(--hue-correct);
+}
+
+body.wrong {
+ --hue: var(--hue-wrong);
+}
+
+.container {
+ width: 800px;
+ max-width: 80%;
+ background-color: white;
+ border-radius: 5px;
+ padding: 10px;
+ box-shadow: 0 0 10px 2px;
+}
+
+.btn-grid {
+ display: grid;
+ grid-template-columns: repeat(2, auto);
+ gap: 10px;
+ margin: 20px 0;
+}
+
+.btn {
+ --hue: var(--hue-neutral);
+ border: 1px solid hsl(var(--hue), 100%, 30%);
+ background-color: hsl(var(--hue), 100%, 50%);
+ border-radius: 5px;
+ padding: 5px 10px;
+ color: white;
+ outline: none;
+}
+
+.btn:hover {
+ border-color: black;
+}
+
+.btn.correct {
+ --hue: var(--hue-correct);
+ color: black;
+}
+
+.btn.wrong {
+ --hue: var(--hue-wrong);
+}
+
+.start-btn,
+.next-btn {
+ font-size: 1.5rem;
+ font-weight: bold;
+ padding: 10px 20px;
+}
+
+.controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.hide {
+ display: none;
+}
+/* change font size of questions and style=italic by Sweety*/
+#question {
+ font-size: large;
+ font-style: italic;
+}