main.css (2551B) download
1body{
2 margin: 0;
3 padding: 0;
4}
5.container{
6 display: flex;
7 flex-direction: column;
8 align-items: center;
9 min-height: 100vh;
10 background: #282828;
11}
12
13.header{
14 display: flex;
15 justify-content: space-between;
16 align-items: center;
17 width:100%;
18 height:65px;
19 margin-bottom: 5px;
20}
21
22.menu{
23 display: flex;
24 flex-direction: column;
25}
26
27#menu{
28 color: #fea400;
29}
30
31
32#menu div{
33 border-bottom: 1px solid #8a8a82;
34 margin: 2px;
35 padding: 2px;
36}
37
38.menu_btn{
39 cursor: pointer;
40 margin-left: 20px;
41 height: 40px;
42 width: 40px;
43 display: flex;
44 justify-content: space-between;
45 flex-direction: column;
46}
47
48.line{
49 display: block;
50 height: 5px;
51 width: 100%;
52 border-radius: 10px;
53 background: #fea400;
54}
55.title{
56 font-size:x-large;
57 font-weight: bold;
58 color:#fea400;
59}
60.restart_button{
61 cursor: pointer;
62 height: 40px;
63 margin-right: 20px;
64}
65.restart{
66 width: 40px;
67 height: 40px;
68}
69
70.game_state{
71 display: grid;
72 width: 95%;
73 grid-template-columns: auto auto;
74 margin: 10px;
75 font-weight: bold;
76 color:#fea400;
77 justify-content: space-between;
78}
79#game_time{
80 grid-row: 1;
81}
82#found_pairs{
83 grid-row: 1;
84}
85
86#progress_bar{
87 grid-row: 2;
88 grid-column-start: 1;
89 grid-column-end: 3;
90 margin-top:10px;
91 display: block;
92 height: 5px;
93 width: 100%;
94 border-radius: 10px;
95 background: #fea400;
96}
97.game_info .div{
98 margin: 5px;
99}
100.game_board{
101 margin-left: auto;
102 margin-right: auto;
103 display: flex;
104 flex-wrap: wrap;
105 aspect-ratio: 1 / 1;
106 width: 95%;
107 align-items: center;
108 justify-content: space-between;
109}
110
111.card{
112 cursor: pointer;
113 width: calc(16.66% - 10px);
114 height: calc(16.66% - 10px);
115 margin: 5px;
116 display: flex;
117 align-items: center;
118 justify-content: center;
119 background:#df9a06;
120 box-shadow: 1px 1px 1px rgba(42, 42, 42, 0.3);
121}
122
123.card p{
124 color: #282828;
125}
126
127.card.inactive {
128 background:#278704;
129}
130
131.card.open {
132 background:#5e3ccdd5;
133}
134
135.footer{
136 color:#fea400;
137 width: 95%;
138 justify-content: center;
139 display: flex;
140 margin-bottom: 25px;
141}
142
143.footer ul{
144 list-style-type: none;
145 margin: 0;
146 padding: 0;
147}
148
149@media (orientation: landscape) {
150 .game_board{
151 width: 80vh;
152 }
153 .header{
154 width: 650px;
155 }
156}
157
158@media (min-width: 650px) {
159 .game_board{
160 width: 630px;
161 }
162 .game_state{
163 width: 600px;
164 }
165 .header{
166 width: 650px;
167 }
168 .menu{
169 width: 630px;
170 }
171}
172
173@media (min-width: 1400px) {
174 .footer{
175 position: absolute;
176 width: auto;
177 top: 100px;
178 right: 5%;
179 flex-direction: column;
180 }
181}
182
183.done {
184 border: 5px solid green;
185 box-sizing: border-box;
186}
187
188.clicked {
189 border: 5px solid red;
190 box-sizing: border-box;
191}
192
193#login {
194 color: #df9a06;
195}