GarGerry commited on
Commit
07a8913
·
verified ·
1 Parent(s): 459f8c6

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +45 -5
style.css CHANGED
@@ -5,16 +5,16 @@
5
  }
6
 
7
  body {
8
- background: linear-gradient(to bottom, #1e1e1e, #0a0a0a);
9
  font-family: 'Arial', sans-serif;
10
  color: white;
 
11
  }
12
 
13
  .game-container {
14
  position: relative;
15
  width: 100vw;
16
  height: 100vh;
17
- overflow: hidden;
18
  display: flex;
19
  justify-content: center;
20
  align-items: center;
@@ -25,24 +25,43 @@ body {
25
  position: absolute;
26
  width: 30px;
27
  height: 30px;
28
- background-color: #00FFAB;
29
  border-radius: 50%;
30
- animation: fall 3s linear infinite;
 
31
  }
32
 
33
  .platform {
34
  position: absolute;
35
  width: 100px;
36
  height: 20px;
37
- background-color: #FF007A;
38
  bottom: 0;
39
  border-radius: 10px;
 
40
  }
41
 
42
  #score {
43
  position: absolute;
44
  top: 20px;
45
  font-size: 24px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  }
47
 
48
  @keyframes fall {
@@ -52,4 +71,25 @@ body {
52
  100% {
53
  top: 100%;
54
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  }
 
5
  }
6
 
7
  body {
8
+ background: linear-gradient(to bottom, #0f0f0f, #131313);
9
  font-family: 'Arial', sans-serif;
10
  color: white;
11
+ overflow: hidden;
12
  }
13
 
14
  .game-container {
15
  position: relative;
16
  width: 100vw;
17
  height: 100vh;
 
18
  display: flex;
19
  justify-content: center;
20
  align-items: center;
 
25
  position: absolute;
26
  width: 30px;
27
  height: 30px;
28
+ background: radial-gradient(circle, #00FFAB, #00B89C);
29
  border-radius: 50%;
30
+ box-shadow: 0 0 20px rgba(0, 255, 171, 0.8);
31
+ animation: fall 3s linear infinite, neon 1.5s ease-in-out infinite alternate;
32
  }
33
 
34
  .platform {
35
  position: absolute;
36
  width: 100px;
37
  height: 20px;
38
+ background: linear-gradient(to left, #FF007A, #E5006D);
39
  bottom: 0;
40
  border-radius: 10px;
41
+ box-shadow: 0 0 20px rgba(255, 0, 122, 0.8);
42
  }
43
 
44
  #score {
45
  position: absolute;
46
  top: 20px;
47
  font-size: 24px;
48
+ text-shadow: 0 0 10px rgba(0, 255, 171, 0.8);
49
+ }
50
+
51
+ /* Grid Background */
52
+ body::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ width: 100%;
58
+ height: 100%;
59
+ background: linear-gradient(90deg, rgba(0,255,255,0.1) 1px, transparent 1px),
60
+ linear-gradient(rgba(0,255,255,0.1) 1px, transparent 1px);
61
+ background-size: 40px 40px;
62
+ pointer-events: none;
63
+ z-index: -1;
64
+ animation: gridMove 1s linear infinite;
65
  }
66
 
67
  @keyframes fall {
 
71
  100% {
72
  top: 100%;
73
  }
74
+ }
75
+
76
+ @keyframes neon {
77
+ 0% {
78
+ box-shadow: 0 0 20px rgba(0, 255, 171, 0.8);
79
+ }
80
+ 50% {
81
+ box-shadow: 0 0 40px rgba(0, 255, 171, 1.2), 0 0 60px rgba(0, 255, 171, 0.8);
82
+ }
83
+ 100% {
84
+ box-shadow: 0 0 20px rgba(0, 255, 171, 0.8);
85
+ }
86
+ }
87
+
88
+ @keyframes gridMove {
89
+ 0% {
90
+ background-position: 0 0;
91
+ }
92
+ 100% {
93
+ background-position: 40px 40px;
94
+ }
95
  }