File tree Expand file tree Collapse file tree 1 file changed +78
-0
lines changed
Expand file tree Collapse file tree 1 file changed +78
-0
lines changed Original file line number Diff line number Diff line change 1+ @import url ("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" );
2+ * {
3+ margin : 0 ;
4+ padding : 0 ;
5+ box-sizing : border-box;
6+ font-family : "Open Sans" , sans-serif;
7+ }
8+ body {
9+ display : flex;
10+ align-items : center;
11+ justify-content : center;
12+ min-height : 100vh ;
13+ background : # e3f2fd ;
14+ }
15+ .wrapper {
16+ width : 65vmin ;
17+ height : 70vmin ;
18+ display : flex;
19+ overflow : hidden;
20+ flex-direction : column;
21+ justify-content : center;
22+ border-radius : 5px ;
23+ background : # 293447 ;
24+ box-shadow : 0 20px 40px rgba (52 , 87 , 220 , 0.2 );
25+ }
26+ .game-details {
27+ color : # b8c6dc ;
28+ font-weight : 500 ;
29+ font-size : 1.2rem ;
30+ padding : 20px 27px ;
31+ display : flex;
32+ justify-content : space-between;
33+ }
34+ .play-board {
35+ height : 100% ;
36+ width : 100% ;
37+ display : grid;
38+ background : # 212837 ;
39+ grid-template : repeat (30 , 1fr ) / repeat (30 , 1fr );
40+ }
41+ .play-board .food {
42+ background : # ff003d ;
43+ }
44+ .play-board .head {
45+ background : # 60cbff ;
46+ }
47+
48+ .controls {
49+ display : none;
50+ justify-content : space-between;
51+ }
52+ .controls i {
53+ padding : 25px 0 ;
54+ text-align : center;
55+ font-size : 1.3rem ;
56+ color : # b8c6dc ;
57+ width : calc (100% / 4 );
58+ cursor : pointer;
59+ border-right : 1px solid # 171b26 ;
60+ }
61+
62+ @media screen and (max-width : 800px ) {
63+ .wrapper {
64+ width : 90vmin ;
65+ height : 115vmin ;
66+ }
67+ .game-details {
68+ font-size : 1rem ;
69+ padding : 15px 27px ;
70+ }
71+ .controls {
72+ display : flex;
73+ }
74+ .controls i {
75+ padding : 15px 0 ;
76+ font-size : 1rem ;
77+ }
78+ }
You can’t perform that action at this time.
0 commit comments