1- html , body {
2- height : 100% ;
3- width : 100% ;
4- padding : 0 ;
5- margin : 0 ;
6- }
7-
8- .wrapper {
9- background : # 1c1c1c ;
10- color : rgb (255 , 255 , 255 );
11- display : flex;
12- align-items : center;
13- justify-content : center;
14- width : 100% ;
15- height : 100% ;
16- flex-direction : column;
17- }
18-
19- .buttons {
20- display : flex;
21- gap : 50px ;
22- }
23-
24- .button {
25- height : 100px ;
26- width : 100px ;
27- font-size : 48px ;
28- border-radius : 40% ;
29- cursor : pointer;
30- background-color : # 1c1c1c ;
31- }
32-
33- .button : hover , .button : focus {
34- background : # e0e0e0 ;
35- box-shadow : 20px -20px 80px # 65f5df,
1+ html ,
2+ body {
3+ height : 100% ;
4+ width : 100% ;
5+ padding : 0 ;
6+ margin : 0 ;
7+ }
8+
9+ .wrapper {
10+ background : # 1c1c1c ;
11+ color : rgb (255 , 255 , 255 );
12+ display : flex;
13+ align-items : center;
14+ justify-content : center;
15+ width : 100% ;
16+ height : 100% ;
17+ flex-direction : column;
18+ }
19+
20+ .buttons {
21+ display : flex;
22+ gap : 50px ;
23+ }
24+
25+ .button {
26+ height : 100px ;
27+ width : 100px ;
28+ font-size : 48px ;
29+ border-radius : 40% ;
30+ cursor : pointer;
31+ background-color : # 1c1c1c ;
32+ }
33+
34+ .button : hover ,
35+ .button : focus {
36+ background : # e0e0e0 ;
37+ box-shadow :
38+ 20px -20px 80px # 65f5df,
3639 -10px -10px 60px # 65f5df ;
37- transform : translateY (-6px );
38- transition : transform
40+ transform : translateY (-6px );
41+ transition :
42+ transform
3943 250ms
40- cubic-bezier (.3 , .7 , .4 , 1.5 );
41- }
42-
43- .resultContainer {
44- font-size : 2rem ;
45- text-align : center;
46- margin-top : 20px ;
44+ cubic-bezier (0.3 , 0.7 , 0.4 , 1.5 );
45+ }
46+
47+ .resultContainer {
48+ font-size : 2rem ;
49+ text-align : center;
50+ margin-top : 20px ;
51+ }
52+
53+ # endGameButton {
54+ height : 100px ;
55+ width : 100px ;
56+ font-size : 48px ;
57+ border-radius : 40% ;
58+ cursor : pointer;
59+ background-color : # 1c1c1c ;
60+ position : relative;
61+ animation : beat 2s infinite;
62+ }
63+
64+ @keyframes beat {
65+ 0% {
66+ transform : scale (1 );
4767 }
48- # endGameButton {
49- height : 100px ;
50- width : 100px ;
51- font-size : 48px ;
52- border-radius : 40% ;
53- cursor : pointer;
54- background-color : # 1c1c1c ;
55- position : relative;
56- animation : beat 2s infinite;
68+
69+ 50% {
70+ transform : scale (1.2 );
5771 }
58- @keyframes beat {
59- 0% {
60- transform : scale (1 );
61- }
62-
63- 50% {
64- transform : scale (1.2 );
65- }
66-
67- 100% {
68- transform : scale (1 );
69- }
72+
73+ 100% {
74+ transform : scale (1 );
7075 }
76+ }
7177
72- # endGameButton : hover {
73- background : # e0e0e0 ;
74- box-shadow : 20 px -20 px 80 px # 65f5df ,
75- -10 px -10 px 60 px # 65f5df;
76-
77- }
78+ # endGameButton : hover {
79+ background : # e0e0e0 ;
80+ box-shadow :
81+ 20 px -20 px 80 px # 65f5df,
82+ -10 px -10 px 60 px # 65f5df ;
83+ }
0 commit comments