1+ /* General Styling */
2+ body {
3+ background-image : url ('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png' );
4+ display : flex;
5+ justify-content : center;
6+ align-items : center;
7+ min-height : 100vh ;
8+ font-family : 'Montserrat' , sans-serif;
9+ color : # 85796b
10+ }
11+ 112.grid {
2- display : flex;
3- flex-wrap : wrap;
4- height : 560px ;
5- min-width : 560px ;
6- margin-left : 80px ;
7- margin-top : 50px ;
8- background-color : rgba (109 , 127 , 151 , 0.5 );
9- padding : 5px ;
10- color : # 85796b
11- border-radius : 10px ;
12- box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.5 ) inset, 0 1px 0 # fff
13- }
14- 15- .grid div {
16- height : 70px ;
17- width : 70px ;
18- }
19- 20- h3 {
21- font-family : "Montserrat" , sans-serif;
22- text-transform : uppercase;
23- }
24- 25- h1 {
26- font-family : "Montserrat" , sans-serif;
27- text-transform : uppercase;
28- margin-top : -10px ;
29- }
30- 31- .invisible {
32- background-color : white;
33- }
34- 35- body {
36- background-image : url ('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png' );
37- max-width : 100vh ;
38- display : flex;
39- }
40- 41- .scoreBoard {
42- background-color : cyan;
43- border-radius : 20px ;
44- margin-top : 200px ;
45- margin-left : 200px ;
46- width : auto;
47- height : 120px ;
48- padding : 20px ;
49- display : flex;
50- flex-direction : column;
51- justify-content : space-between;
52- align-items : center;
53- text-align : center;
54- color : # 85796b
55- }
13+ display : flex;
14+ flex-wrap : wrap;
15+ height : 560px ;
16+ width : 560px ;
17+ background-color : rgba (109 , 127 , 151 , 0.5 );
18+ padding : 5px ;
19+ border-radius : 10px ;
20+ box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.5 ) inset, 0 1px 0 # fff
21+ margin-left : 80px ;
22+ margin-top : 50px ;
23+ }
24+ 25+ .grid div {
26+ height : 70px ;
27+ width : 70px ;
28+ background-size : cover;
29+ background-position : center;
30+ border-radius : 5px ;
31+ transition : transform 0.2s ease; /* Smooth animation for interactions */
32+ }
33+ 34+ /* Hover effect for interactivity */
35+ .grid div : hover {
36+ transform : scale (1.05 ); /* Slightly enlarge on hover */
37+ }
38+ 39+ /* Scoreboard Styling */
40+ .scoreBoard {
41+ background-color : cyan;
42+ border-radius : 20px ;
43+ margin-top : 200px ;
44+ margin-left : 200px ;
45+ width : auto;
46+ height : 120px ;
47+ padding : 20px ;
48+ display : flex;
49+ flex-direction : column;
50+ justify-content : space-between;
51+ align-items : center;
52+ text-align : center;
53+ color : # 85796b
54+ }
55+ 56+ h3 , h1 {
57+ font-family : 'Montserrat' , sans-serif;
58+ text-transform : uppercase;
59+ margin : 0 ;
60+ }
61+ 62+ h1 {
63+ margin-top : -10px ;
64+ }
65+ 66+ .grid div : hover {
67+ transform : scale (1.05 ); /* Slightly enlarge on hover */
68+ }
69+ 70+ /* Mode Selection Styling */
71+ # modeSelection {
72+ display : flex;
73+ flex-direction : column;
74+ align-items : center;
75+ justify-content : center;
76+ height : 100vh ;
77+ background-color : # f0f0f0
78+ font-family : 'Montserrat' , sans-serif;
79+ position : absolute;
80+ top : 0 ;
81+ left : 0 ;
82+ width : 100% ;
83+ z-index : 10 ;
84+ }
85+ 86+ # modeSelection h2 {
87+ margin-bottom : 20px ;
88+ color : # 333
89+ }
90+ 91+ # modeSelection button {
92+ margin : 10px ;
93+ padding : 10px 20px ;
94+ font-size : 16px ;
95+ cursor : pointer;
96+ background-color : # 87ceeb
97+ border : none;
98+ border-radius : 5px ;
99+ color : white;
100+ }
101+ 102+ /* Timer and Change Mode Button */
103+ # timer {
104+ font-size : 18px ;
105+ margin-top : 10px ;
106+ }
107+ 108+ # changeMode {
109+ margin-top : 10px ;
110+ padding : 5px 10px ;
111+ background-color : # ff6347
112+ color : white;
113+ border : none;
114+ border-radius : 5px ;
115+ cursor : pointer;
116+ }
117+ 118+ /* Initially Hide Game Elements */
119+ .grid , .scoreBoard {
120+ display : none;
121+ }
0 commit comments