1.card {
2  width: 300px;
3  height: 200px;
4  background: #252525;
5  border-radius: 8px;
6  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
7}
8
9.ups {
10  display: flex;
11}
12
13.screw1 {
14  display: flex;
15  color: black;
16  border: 1px solid black;
17  background-color: lightgrey;
18  height: 0.75em;
19  width: 0.75em;
20  margin: 0.5em;
21  border-radius: 50%;
22  align-items: center;
23  justify-content: center;
24}
25
26.screw2 {
27  display: flex;
28  color: black;
29  border: 1px solid black;
30  background-color: lightgrey;
31  height: 0.75em;
32  width: 0.7em;
33  margin-top: 0.5em;
34  margin-left: 15.8em;
35  border-radius: 50%;
36  align-items: center;
37  justify-content: center;
38}
39
40.downs {
41  display: flex;
42}
43
44.screw3 {
45  display: flex;
46  color: black;
47  border: 1px solid black;
48  background-color: lightgrey;
49  height: 0.75em;
50  width: 0.75em;
51  margin-top: -1.3em;
52  margin-left: 0.5em;
53  border-radius: 50%;
54  align-items: center;
55  justify-content: center;
56}
57
58.screw4 {
59  display: flex;
60  color: black;
61  border: 1px solid black;
62  background-color: lightgrey;
63  height: 0.75em;
64  width: 0.75em;
65  margin-top: -1.3em;
66  margin-left: 16.35em;
67  border-radius: 50%;
68  align-items: center;
69  justify-content: center;
70}
71
72.card1 {
73  width: 230px;
74  height: 115px;
75  margin-top: 0.5em;
76  margin-left: 2.18em;
77  background-color: #FFFDD0;
78  clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);
79  border-radius: 5px;
80}
81
82.line1 {
83  position: relative;
84  width: 200px;
85  height: 1px;
86  background-color: black;
87  top: 1em;
88  left: 0.8em;
89}
90
91.line2 {
92  position: relative;
93  width: 200px;
94  height: 1px;
95  background-color: black;
96  top: 2em;
97  left: 0.8em;
98}
99
100.yl {
101  display: flex;
102  width: 228px;
103  height: 50px;
104  background-color: rgb(242, 188, 0);
105  margin-top: 2.5em;
106  margin-left: 0.06em;
107}
108
109.roll {
110  width: 8em;
111  height: 2em;
112  margin-left: 3em;
113  border-radius: 15px;
114  background-color: #171717;
115  display: flex;
116}
117
118.tape {
119  width: 3em;
120  height: 1.5em;
121  position: relative;
122  left: 0.9em;
123  background-color: #252525;
124}
125
126.s_wheel {
127  display: flex;
128  align-items: center;
129  justify-content: center;
130  position: relative;
131  top: 0.215em;
132  left: 0.15em;
133  width: 1.55em;
134  height: 1.55em;
135  border: 2px dashed #fff;
136  box-shadow: 0 0 0 4.4px #fff;
137  border-radius: 50%;
138  animation: 2s run infinite linear;
139}
140
141.window {
142  background-color: white;
143  width: auto;
144  height: 2em;
145}
146
147.e_wheel {
148  display: flex;
149  align-items: center;
150  justify-content: center;
151  position: relative;
152  top: 0.215em;
153  left: 1.7em;
154  width: 1.55em;
155  height: 1.55em;
156  border: 2px dashed #fff;
157  box-shadow: 0 0 0 4.4px #fff;
158  border-radius: 50%;
159  animation: 2s run infinite linear;
160}
161
162.num {
163  margin-left: 1.5em;
164  align-self: center;
165}
166
167.or {
168  display: flex;
169  width: 230px;
170  height: 18px;
171  background-color: rgb(241, 90, 37);
172  margin-top: 0.4em;
173  margin-left: 0em;
174  border-bottom-left-radius: 4px;
175  border-bottom-right-radius: 4px;
176  align-items: center;
177  justify-content: center;
178}
179
180.time {
181  font-size: 0.5em;
182}
183
184.card2_main {
185  filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1));
186}
187
188.card2 {
189  width: 150px;
190  height: 50px;
191  margin-top: 0em;
192  margin-left: 4.6em;
193  background-color: #252525;
194  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
195}
196
197.screw5 {
198  position: relative;
199  display: flex;
200  color: black;
201  border: 1px solid black;
202  background-color: lightgrey;
203  height: 0.75em;
204  width: 0.75em;
205  left: 4.25em;
206  top: -0.5em;
207  border-radius: 50%;
208  align-items: center;
209  justify-content: center;
210}
211
212.c1 {
213  position: relative;
214  width: 0.5em;
215  height: 0.5em;
216  background-color: rgb(190, 190, 190);
217  border-radius: 50%;
218  left: 1.5em;
219  top: 2em;
220}
221
222.t1 {
223  position: relative;
224  width: 0.5em;
225  height: 0.5em;
226  background-color: rgb(190, 190, 190);
227  border-radius: 2px;
228  left: 3em;
229  top: 1em;
230}
231
232.t2 {
233  position: relative;
234  width: 0.5em;
235  height: 0.5em;
236  background-color: rgb(190, 190, 190);
237  border-radius: 2px;
238  left: 5.7em;
239  top: -0.2em;
240}
241
242.c2 {
243  position: relative;
244  width: 0.5em;
245  height: 0.5em;
246  background-color: rgb(190, 190, 190);
247  border-radius: 50%;
248  left: 7.2em;
249  top: -0.2em;
250}
251
252@keyframes run {
253  100% {
254    transform: rotate(360deg);
255  }
256}