diff --git a/Games/Mastemind/styles.css b/Games/Mastemind/styles.css
index d5a02f4225..37a203576a 100644
--- a/Games/Mastemind/styles.css
+++ b/Games/Mastemind/styles.css
@@ -3,6 +3,9 @@
src: url(./FredokaOne-Regular.ttf);
}
+body{
+ overflow:hidden;
+}
html {
width: 100%;
height: 100%;
diff --git a/Games/Master_Typing/index.html b/Games/Master_Typing/index.html
index a7caad6c8b..dd2d010e02 100644
--- a/Games/Master_Typing/index.html
+++ b/Games/Master_Typing/index.html
@@ -6,9 +6,13 @@
Hands on the keyboard 👀
diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css
index 36bce1e6d0..1b106a1018 100644
--- a/Games/Master_Typing/style.css
+++ b/Games/Master_Typing/style.css
@@ -1,306 +1,306 @@
body {
- background: rgb(0,194,32);
- background: linear-gradient(90deg, rgba(0,194,32,1) 0%, rgba(113,77,231,1) 0%, rgba(93,220,255,1) 72%);
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 500;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
+ background: rgb(0,194,32);
+ background: linear-gradient(90deg, rgba(0,194,32,1) 0%, rgba(113,77,231,1) 0%, rgba(93,220,255,1) 72%);
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 500;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
- .container{
- background-image: linear-gradient(to left, #3f4c77, #3c4871, #39446b, #364165, #333d5f, #303a5a, #2e3654, #2b334f, #283049, #252c44, #23293e, #202639);
- box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
- padding-right: 60px;
- padding-left: 30px;
- border-radius: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .title {
- color: mintcream;
- text-transform: uppercase;
- margin-top: 3em;
- margin-bottom: 3em;
- font-size: 1em;
- letter-spacing: 0.3em;
- }
+.container{
+ background-image: linear-gradient(to left, #3f4c77, #3c4871, #39446b, #364165, #333d5f, #303a5a, #2e3654, #2b334f, #283049, #252c44, #23293e, #202639);
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+ padding-right: 60px;
+ padding-left: 30px;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
- .timer{
- color:mintcream;
- margin-top: 1em;
- margin-bottom: 1em;
- font-size: 25px;
- font-weight: 500;
- letter-spacing: 4px;
- }
-
- .keyboard {
- display: flex;
- flex-direction: column;
- }
-
- .row {
- list-style: none;
- display: flex;
- }
-
- li {
- height: 3em;
- width: 3em;
- color: rgba(0,0,0,0.7);
- border-radius: 0.4em;
- line-height: 3em;
- letter-spacing: 1px;
- margin: 0.4em;
- transition: 0.3s;
- text-align: center;
- font-size: 1em;
- }
-
- #tab {
- width: 5em;
- }
-
- #caps {
- width: 6em;
- }
-
- #left-shift {
- width: 8em;
- }
-
- #enter {
- width: 6em;
- }
-
- #right-shift {
- width: 8em;
- }
-
- #back {
- width: 5em;
- }
-
- .pinky {
- background-color: crimson;
- border: 2px solid crimson;
- }
- .pinky.selected {
- color: crimson;
+.title {
+ color: mintcream;
+ text-transform: uppercase;
+ margin-top: 3em;
+ margin-bottom: 3em;
+ font-size: 1em;
+ letter-spacing: 0.3em;
+}
+
+.timer{
+ color:mintcream;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ font-size: 25px;
+ font-weight: 500;
+ letter-spacing: 4px;
+}
+
+.keyboard {
+ display: flex;
+ flex-direction: column;
+}
+
+.row {
+ list-style: none;
+ display: flex;
+}
+
+li {
+ height: 3em;
+ width: 3em;
+ color: rgba(0,0,0,0.7);
+ border-radius: 0.4em;
+ line-height: 3em;
+ letter-spacing: 1px;
+ margin: 0.4em;
+ transition: 0.3s;
+ text-align: center;
+ font-size: 1em;
+}
+
+#tab {
+ width: 5em;
+}
+
+#caps {
+ width: 6em;
+}
+
+#left-shift {
+ width: 8em;
+}
+
+#enter {
+ width: 6em;
+}
+
+#right-shift {
+ width: 8em;
+}
+
+#back {
+ width: 5em;
+}
+
+.pinky {
+ background-color: crimson;
+ border: 2px solid crimson;
+}
+.pinky.selected {
+ color: crimson;
+}
+
+.ring {
+ background-color: coral;
+ border: 2px solid coral;
+}
+.ring.selected {
+ color: coral;
+}
+
+.middle {
+ background-color: darkorange;
+ border: 2px solid darkorange;
+}
+.middle.selected {
+ color: darkorange;
+}
+
+.pointer1st {
+ background-color: gold;
+ border: 2px solid gold;
+}
+.pointer1st.selected {
+ color: gold;
+}
+
+.pointer2nd {
+ background-color: khaki;
+ border: 2px solid khaki;
+}
+.pointer2nd.selected {
+ color: khaki;
+}
+
+.fill-out-key {
+ background-color: slategrey;
+ border: 2px solid slategrey;
+}
+
+.selected {
+ background-color: transparent;
+ -webkit-animation: vibrate-1 0.3s linear infinite both;
+ animation: vibrate-1 0.3s linear infinite both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+.hit {
+ -webkit-animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+ animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+
+@-webkit-keyframes hit {
+ 0% {
+ -webkit-transform: scale(1.2);
+ transform: scale(1.2);
}
-
- .ring {
- background-color: coral;
- border: 2px solid coral;
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
}
- .ring.selected {
- color: coral;
+}
+@keyframes hit {
+ 0% {
+ -webkit-transform: scale(1.2);
+ transform: scale(1.2);
}
-
- .middle {
- background-color: darkorange;
- border: 2px solid darkorange;
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
}
- .middle.selected {
- color: darkorange;
+}
+
+@-webkit-keyframes vibrate-1 {
+ 0% {
+ -webkit-transform: translate(0);
+ transform: translate(0);
}
-
- .pointer1st {
- background-color: gold;
- border: 2px solid gold;
+ 20% {
+ -webkit-transform: translate(-2px, 2px);
+ transform: translate(-2px, 2px);
}
- .pointer1st.selected {
- color: gold;
+ 40% {
+ -webkit-transform: translate(-2px, -2px);
+ transform: translate(-2px, -2px);
}
-
- .pointer2nd {
- background-color: khaki;
- border: 2px solid khaki;
+ 60% {
+ -webkit-transform: translate(2px, 2px);
+ transform: translate(2px, 2px);
}
- .pointer2nd.selected {
- color: khaki;
+ 80% {
+ -webkit-transform: translate(2px, -2px);
+ transform: translate(2px, -2px);
}
-
- .fill-out-key {
- background-color: slategrey;
- border: 2px solid slategrey;
+ 100% {
+ -webkit-transform: translate(0);
+ transform: translate(0);
}
-
- .selected {
- background-color: transparent;
- -webkit-animation: vibrate-1 0.3s linear infinite both;
- animation: vibrate-1 0.3s linear infinite both;
+}
+@keyframes vibrate-1 {
+ 0% {
+ -webkit-transform: translate(0);
+ transform: translate(0);
}
-
- /* ----------------------------------------------
- * Generated by Animista
- * Licensed under FreeBSD License.
- * See http://animista.net/license for more info.
- * w: http://animista.net, t: @cssanimista
- * ---------------------------------------------- */
-
- .hit {
- -webkit-animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
- animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+ 20% {
+ -webkit-transform: translate(-2px, 2px);
+ transform: translate(-2px, 2px);
}
-
- @-webkit-keyframes hit {
- 0% {
- -webkit-transform: scale(1.2);
- transform: scale(1.2);
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
+ 40% {
+ -webkit-transform: translate(-2px, -2px);
+ transform: translate(-2px, -2px);
}
- @keyframes hit {
- 0% {
- -webkit-transform: scale(1.2);
- transform: scale(1.2);
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
+ 60% {
+ -webkit-transform: translate(2px, 2px);
+ transform: translate(2px, 2px);
}
-
- @-webkit-keyframes vibrate-1 {
- 0% {
- -webkit-transform: translate(0);
- transform: translate(0);
- }
- 20% {
- -webkit-transform: translate(-2px, 2px);
- transform: translate(-2px, 2px);
- }
- 40% {
- -webkit-transform: translate(-2px, -2px);
- transform: translate(-2px, -2px);
- }
- 60% {
- -webkit-transform: translate(2px, 2px);
- transform: translate(2px, 2px);
- }
- 80% {
- -webkit-transform: translate(2px, -2px);
- transform: translate(2px, -2px);
- }
- 100% {
- -webkit-transform: translate(0);
- transform: translate(0);
- }
+ 80% {
+ -webkit-transform: translate(2px, -2px);
+ transform: translate(2px, -2px);
}
- @keyframes vibrate-1 {
- 0% {
- -webkit-transform: translate(0);
- transform: translate(0);
- }
- 20% {
- -webkit-transform: translate(-2px, 2px);
- transform: translate(-2px, 2px);
- }
- 40% {
- -webkit-transform: translate(-2px, -2px);
- transform: translate(-2px, -2px);
- }
- 60% {
- -webkit-transform: translate(2px, 2px);
- transform: translate(2px, 2px);
- }
- 80% {
- -webkit-transform: translate(2px, -2px);
- transform: translate(2px, -2px);
- }
- 100% {
- -webkit-transform: translate(0);
- transform: translate(0);
- }
+ 100% {
+ -webkit-transform: translate(0);
+ transform: translate(0);
}
+}
+
+/* ------------for button----------------------------- */
- /* ------------for button----------------------------- */
-
.btn{
- margin-top: 30px;
- margin-bottom: 50px;
- padding-left: 60px;
- text-align: center;
- display: flex;
- justify-content: space-between;
+margin-top: 30px;
+margin-bottom: 50px;
+padding-left: 60px;
+text-align: center;
+display: flex;
+justify-content: space-between;
}
.button {
- align-items: center;
- appearance: none;
- margin-right: 30px;
- background-color: #FCFCFD;
- border-radius: 4px;
- border-width: 0;
- box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
- box-sizing: border-box;
- color: #36395A;
- cursor: pointer;
- display: inline-flex;
- font-family: "JetBrains Mono",monospace;
- height: 48px;
- justify-content: center;
- line-height: 1;
- list-style: none;
- overflow: hidden;
- padding-left: 16px;
- padding-right: 16px;
- position: relative;
- text-align: left;
- text-decoration: none;
- transition: box-shadow .15s,transform .15s;
- user-select: none;
- -webkit-user-select: none;
- touch-action: manipulation;
- white-space: nowrap;
- will-change: box-shadow,transform;
- font-size: 18px;
+align-items: center;
+appearance: none;
+margin-right: 30px;
+background-color: #FCFCFD;
+border-radius: 4px;
+border-width: 0;
+box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
+box-sizing: border-box;
+color: #36395A;
+cursor: pointer;
+display: inline-flex;
+font-family: "JetBrains Mono",monospace;
+height: 48px;
+justify-content: center;
+line-height: 1;
+list-style: none;
+overflow: hidden;
+padding-left: 16px;
+padding-right: 16px;
+position: relative;
+text-align: left;
+text-decoration: none;
+transition: box-shadow .15s,transform .15s;
+user-select: none;
+-webkit-user-select: none;
+touch-action: manipulation;
+white-space: nowrap;
+will-change: box-shadow,transform;
+font-size: 18px;
}
.button:focus {
- box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
.button:hover {
- box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
- transform: translateY(-2px);
+box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+transform: translateY(-2px);
}
.button:active {
- box-shadow: #D6D6E7 0 3px 7px inset;
- transform: translateY(2px);
+box-shadow: #D6D6E7 0 3px 7px inset;
+transform: translateY(2px);
}
- /* CSS for the popup and backdrop */
- .popup-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 9999;
- }
+ /* CSS for the popup and backdrop */
+ .popup-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+}
- .popup {
- background-color: white;
- padding: 20px;
- border-radius: 5px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- text-align: center;
- }
+.popup {
+ background-color: white;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
- .popup-overlay.hidden {
- display: none;
- }
\ No newline at end of file
+.popup-overlay.hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/Games/Mastermind_Mania/css/style.css b/Games/Mastermind_Mania/css/style.css
index a88e717278..0aa874549c 100644
--- a/Games/Mastermind_Mania/css/style.css
+++ b/Games/Mastermind_Mania/css/style.css
@@ -12,7 +12,7 @@ body {
height: 100vh;
/* background: radial-gradient(circle, #2b1818, #c36767); */
background-color: black;
-
+ overflow: hidden;
}
diff --git a/Games/Mastermind_Mania/index.html b/Games/Mastermind_Mania/index.html
index 6f693d6bb3..9d5d44e572 100644
--- a/Games/Mastermind_Mania/index.html
+++ b/Games/Mastermind_Mania/index.html
@@ -5,10 +5,15 @@
The Math Game
+
+
Mastermind_Mania
diff --git a/Games/Math_Game/index.html b/Games/Math_Game/index.html
index 0101c5ae98..855697aaa8 100644
--- a/Games/Math_Game/index.html
+++ b/Games/Math_Game/index.html
@@ -10,11 +10,13 @@
-
+
+
Please provide the correct numerical value or mathematical operator to complete the given blank.
diff --git a/Games/Math_Game/style.css b/Games/Math_Game/style.css
index 29d4992447..194b609cd5 100644
--- a/Games/Math_Game/style.css
+++ b/Games/Math_Game/style.css
@@ -1,155 +1,155 @@
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Ubuntu', sans-serif;
-
- }
-
- body {
- background-color: #7c07db9f;
- }
-
- /* container styling */
-
- .container {
- background-color: #e2f8ffbc;
- width: 90%;
- max-width: 30.25em;
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- padding: 6em 3em;
- border-radius: 1em;
- }
-
- .container h3 {
- font-size: 1.1em;
- color: #23234c;
- text-align: center;
- font-weight: 550;
- line-height: 1.6em;
- }
-
- .container #submitBtn {
- width: 100%;
- font-size: 1.4em;
- font-weight: 550;
- display: block;
- margin: 0 auto;
- background-color: rgb(68, 186, 49);
- border-radius: 1em;
- border: none;
- outline: none;
- cursor: pointer;
- color: #23234c;
- padding: 0.8em 1em;
- }
-
- .container #submitBtn:hover {
- letter-spacing: .1em;
- color: #ffff
- }
-
- #errorMsg {
- text-align: center;
- margin-top: 1em;
- background-color: #ffdde0;
- color: #d62f2f;
- padding: 0.2em 0;
- }
-
- .container #question {
- background-color: #ffff;
- font-size: 2.2em;
- font-weight: 600;
- color: #23234c;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 1.2em 0 1.2em 0;
- padding: 1.2em 0;
- border-radius: 1em;
- }
-
- .container input {
- font-size: 1em;
- font-weight: 600;
- width: 2.35em;
- color: #23234c;
- text-align: center;
- padding: 0 0.2em;
- border: none;
- background-color: transparent;
- border-bottom: 0.12em solid #23234c;
- margin: 0 0.25em;
- }
-
- .container input:focus {
- border-color: #7c07db9f;
- outline: none;
- }
-
- /* Hide Number Arrows */
-
-
- .container input[type="number"] {
- -moz-appearance: textfield;
- }
-
- .container input[type="number"]::-webkit-outer-spin-button,
- .container input[type="number"]::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
-
- .controlsContainer {
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- background-color: rgb(68, 186, 49);
- height: 100%;
- width: 100%;
- top: 0;
- }
-
- /* Start button styling */
-
- #startBtn {
- font-size: 2em;
- font-weight: 550;
- background-color: #ffffff;
- color: #23234c;
- border: none;
- outline: none;
- cursor: pointer;
- padding: 1em 1.8em;
- border-radius: 2.5em;
- }
-
- /* Hover effect on start button */
-
- #startBtn:hover {
-
- background-color: #7c07db9f;
- color: rgb(255, 255, 255);
-
- }
-
- #result {
- margin-bottom: 1em;
- font-size: 1.5em;
- color: #23234c;
- }
-
- #result span {
- font-weight: 600;
- }
-
- .hide {
- display: none;
- }
\ No newline at end of file
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Ubuntu', sans-serif;
+
+}
+
+body {
+ background-color: #7c07db9f;
+}
+
+/* container styling */
+
+.container {
+ background-color: #e2f8ffbc;
+ width: 90%;
+ max-width: 30.25em;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ top: 50%;
+ left: 50%;
+ padding: 6em 3em;
+ border-radius: 1em;
+}
+
+.container h3 {
+ font-size: 1.1em;
+ color: #23234c;
+ text-align: center;
+ font-weight: 550;
+ line-height: 1.6em;
+}
+
+.container #submitBtn {
+ width: 100%;
+ font-size: 1.4em;
+ font-weight: 550;
+ display: block;
+ margin: 0 auto;
+ background-color: rgb(68, 186, 49);
+ border-radius: 1em;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ color: #23234c;
+ padding: 0.8em 1em;
+}
+
+.container #submitBtn:hover {
+ letter-spacing: .1em;
+ color: #ffff
+}
+
+#errorMsg {
+ text-align: center;
+ margin-top: 1em;
+ background-color: #ffdde0;
+ color: #d62f2f;
+ padding: 0.2em 0;
+}
+
+.container #question {
+ background-color: #ffff;
+ font-size: 2.2em;
+ font-weight: 600;
+ color: #23234c;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 1.2em 0 1.2em 0;
+ padding: 1.2em 0;
+ border-radius: 1em;
+}
+
+.container input {
+ font-size: 1em;
+ font-weight: 600;
+ width: 2.35em;
+ color: #23234c;
+ text-align: center;
+ padding: 0 0.2em;
+ border: none;
+ background-color: transparent;
+ border-bottom: 0.12em solid #23234c;
+ margin: 0 0.25em;
+}
+
+.container input:focus {
+ border-color: #7c07db9f;
+ outline: none;
+}
+
+/* Hide Number Arrows */
+
+
+.container input[type="number"] {
+ -moz-appearance: textfield;
+}
+
+.container input[type="number"]::-webkit-outer-spin-button,
+.container input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+.controlsContainer {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ background-color: rgb(68, 186, 49);
+ height: 100%;
+ width: 100%;
+ top: 0;
+}
+
+/* Start button styling */
+
+#startBtn {
+ font-size: 2em;
+ font-weight: 550;
+ background-color: #ffffff;
+ color: #23234c;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ padding: 1em 1.8em;
+ border-radius: 2.5em;
+}
+
+/* Hover effect on start button */
+
+#startBtn:hover {
+
+ background-color: #7c07db9f;
+ color: rgb(255, 255, 255);
+
+}
+
+#result {
+ margin-bottom: 1em;
+ font-size: 1.5em;
+ color: #23234c;
+}
+
+#result span {
+ font-weight: 600;
+}
+
+.hide {
+ display: none;
+}
\ No newline at end of file
diff --git a/Games/MaximiseBoxes/index.html b/Games/MaximiseBoxes/index.html
index da7b504b90..9c48279afe 100644
--- a/Games/MaximiseBoxes/index.html
+++ b/Games/MaximiseBoxes/index.html
@@ -4,6 +4,7 @@
+
@@ -15,6 +16,10 @@