Compare commits
2 commits
8e361050d9
...
26fabc37e9
Author | SHA1 | Date | |
---|---|---|---|
26fabc37e9 | |||
24d01959c1 |
6 changed files with 90 additions and 116 deletions
|
@ -4,7 +4,8 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
|
@ -71,4 +72,3 @@
|
|||
button:hover {
|
||||
background-color: #ff9900;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
/* Base Reset */
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
|
@ -16,7 +17,7 @@ body, html {
|
|||
width: 441px;
|
||||
height: 735px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -43,7 +44,7 @@ body, html {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
@ -73,7 +74,9 @@ h1 {
|
|||
}
|
||||
|
||||
/* Messages */
|
||||
.message, .score, .highScore {
|
||||
.message,
|
||||
.score,
|
||||
.highScore {
|
||||
font-size: 1.4rem; /* Increased font size */
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ body {
|
|||
margin: 0;
|
||||
line-height: 1.6;
|
||||
background-image: url('images/background.jpg');
|
||||
background-size: cover /* Adjust size for tape appearance */
|
||||
background-size: cover; /* Adjust size for tape appearance */
|
||||
}
|
||||
|
||||
header {
|
||||
|
@ -27,51 +27,22 @@ header {
|
|||
/* Create the flickering neon light effect */
|
||||
@keyframes neonFlicker {
|
||||
0% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 10px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 20px #ffcc00,
|
||||
0 0 30px #ffcc00,
|
||||
0 0 40px #ffcc00,
|
||||
0 0 50px #ffcc00;
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00;
|
||||
}
|
||||
20% {
|
||||
text-shadow:
|
||||
0 0 3px #ffcc00,
|
||||
0 0 7px #ffcc00,
|
||||
0 0 10px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 20px #ffcc00;
|
||||
text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00;
|
||||
}
|
||||
40% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 25px #ffcc00;
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00;
|
||||
}
|
||||
60% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 10px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 20px #ffcc00,
|
||||
0 0 30px #ffcc00;
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00;
|
||||
}
|
||||
80% {
|
||||
text-shadow:
|
||||
0 0 3px #ffcc00,
|
||||
0 0 7px #ffcc00,
|
||||
0 0 10px #ffcc00;
|
||||
text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00;
|
||||
}
|
||||
100% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 10px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 20px #ffcc00,
|
||||
0 0 30px #ffcc00,
|
||||
0 0 40px #ffcc00;
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue