1/* Spotify music card made by: csozi | Website: www.csozi.hu*/
2
3.card {
4  position: relative;
5  width: 250px;
6  height: 120px;
7  background: #191414;
8  border-radius: 10px;
9  padding: 10px;
10}
11
12.top {
13  position: relative;
14  width: 100%;
15  display: flex;
16  gap: 10px;
17}
18
19.pfp {
20  position: relative;
21  top: 5px;
22  left: 5px;
23  height: 40px;
24  width: 40px;
25  background-color: #d2d2d2;
26  border-radius: 5px;
27  display: flex;
28  justify-content: center;
29  align-items: center;
30}
31
32.title-1 {
33  color: white;
34  font-size: 25px;
35  font-weight: bolder;
36}
37
38.title-2 {
39  color: white;
40  font-size: 12px;
41  font-weight: bold;
42}
43
44.time {
45  width: 90%;
46  background-color: #5e5e5e;
47  height: 6px;
48  border-radius: 3px;
49  position: absolute;
50  left: 5%;
51  bottom: 22px;
52}
53
54.elapsed {
55  width: 42%;
56  background-color: #1db954;
57  height: 100%;
58  border-radius: 3px;
59}
60
61.controls {
62  color: white;
63  display: flex;
64  position: absolute;
65  bottom: 30px;
66  left: 0;
67  width: 100%;
68  justify-content: center;
69}
70
71.volume {
72  height: 100%;
73  width: 48px;
74}
75
76.air {
77  height: 100%;
78  width: 48px;
79}
80
81.controls svg {
82  cursor: pointer;
83  transition: 0.1s;
84}
85
86.controls svg:hover {
87  color: #1db954;
88}
89
90.volume {
91  opacity: 0;
92  position: relative;
93  transition: 0.2s;
94}
95
96.volume .slider {
97  height: 4px;
98  background-color: #5e5e5e;
99  width: 80%;
100  border-radius: 2px;
101  margin-top: 8px;
102  margin-left: 10%;
103}
104
105.volume .slider .green {
106  background-color: #1db954;
107  height: 100%;
108  width: 80%;
109  border-radius: 3px;
110}
111
112.volume .circle {
113  background-color: white;
114  height: 6px;
115  width: 6px;
116  border-radius: 3px;
117  position: absolute;
118  right: 20%;
119  top: 60%;
120}
121
122.volume_button:hover ~ .volume {
123  opacity: 1;
124}
125
126.timetext {
127  color: white;
128  font-size: 8px;
129  position: absolute;
130}
131
132.time_now {
133  bottom: 11px;
134  left: 10px;
135}
136
137.time_full {
138  bottom: 11px;
139  right: 10px;
140}
141
142.playing {
143  display: flex;
144  position: relative;
145  justify-content: center;
146  gap: 1px;
147  width: 30px;
148  height: 20px;
149}
150
151.greenline {
152  background-color: #1db954;
153  height: 20px;
154  width: 2px;
155  position: relative;
156  transform-origin: bottom;
157}
158
159.line-1 {
160  animation: infinite playing 1s ease-in-out;
161  animation-delay: 0.2s;
162}
163
164.line-2 {
165  animation: infinite playing 1s ease-in-out;
166  animation-delay: 0.5s;
167}
168
169.line-3 {
170  animation: infinite playing 1s ease-in-out;
171  animation-delay: 0.6s;
172}
173
174.line-4 {
175  animation: infinite playing 1s ease-in-out;
176  animation-delay: 0s;
177}
178
179.line-5 {
180  animation: infinite playing 1s ease-in-out;
181  animation-delay: 0.4s;
182}
183
184@keyframes playing {
185  0% {
186    transform: scaleY(0.1);
187  }
188
189  33% {
190    transform: scaleY(0.6);
191  }
192
193  66% {
194    transform: scaleY(0.9);
195  }
196
197  100% {
198    transform: scaleY(0.1);
199  }
200}