diff --git a/03-midu-typing-game/index.html b/03-midu-typing-game/index.html
index 83e5488..233c421 100644
--- a/03-midu-typing-game/index.html
+++ b/03-midu-typing-game/index.html
@@ -28,7 +28,9 @@
}
time {
- color: var(--yellow)
+ color: var(--yellow);
+ opacity: 1;
+ transition: 0.1s;
}
input {
@@ -52,16 +54,18 @@
position: relative;
&.active::before {
- content: '|';
+ content: "|";
color: var(--yellow);
font-size: 14px;
position: absolute;
left: -65%;
+ transition: 0.1s;
animation: 1s blink infinite ease-in-out;
}
&.active.is-last::before {
left: 65%;
+ transition: 0.1s;
}
&.correct {
@@ -83,7 +87,6 @@
}
@keyframes blink {
-
0%,
25% {
opacity: 1;
@@ -104,9 +107,10 @@
h2 {
font-weight: 400;
- opacity: .4;
+ opacity: 0.4;
margin: 0;
font-size: 16px;
+ color: #fff;
}
h3 {
@@ -121,11 +125,12 @@
border: 0;
margin-top: 32px;
padding: 8px;
- opacity: .4;
+ opacity: 0.4;
display: inline-block;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
cursor: pointer;
border-radius: 16px;
+ color: #fff;
&:hover {
background: #444;
@@ -140,7 +145,7 @@
wpm
@@ -150,10 +155,20 @@ accuracy
@@ -162,186 +177,203 @@