1.container {
2  width: 190px;
3  height: 254px;
4  background: transparent;
5  position: relative;
6  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.438);
7  overflow: hidden;
8  border-radius: 10px;
9}
10
11.card {
12  cursor: default;
13  width: 100%;
14  height: 100%;
15  position: relative;
16  z-index: 2;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  font-size: 34px;
21  text-transform: uppercase;
22  letter-spacing: 2px;
23  color: #212121;
24  background-color: rgba(255, 255, 255, 0.074);
25  border: 1px solid rgba(255, 255, 255, 0.222);
26  -webkit-backdrop-filter: blur(20px);
27  backdrop-filter: blur(20px);
28  border-radius: 10px;
29  transition: all ease .3s;
30}
31
32.container::after,
33.container::before {
34  width: 100px;
35  height: 100px;
36  content: '';
37  position: absolute;
38  border-radius: 50%;
39  transition: .5s linear;
40}
41
42.container::after {
43  top: -20px;
44  left: -20px;
45  background-color: rgba(125, 214, 66, 0.603);
46  animation: animFirst 5s linear infinite;
47}
48
49.container::before {
50  background-color: rgb(226, 223, 54);
51  top: 70%;
52  left: 70%;
53  animation: animSecond 5s linear infinite;
54  animation-delay: 3s;
55}
56
57.container:hover {
58  box-shadow: 0px 0px 10px rgba(0, 77, 32, 0.432)
59}
60
61.container:hover::after {
62  left: 80px;
63  transform: scale(1.2);
64}
65
66.container:hover::before {
67  left: -10px;
68  transform: scale(1.2);
69}