1.scrolldown {
2  --color: white;
3  --sizeX: 30px;
4  --sizeY: 50px;
5  position: relative;
6  width: var(--sizeX);
7  height: var(--sizeY);
8  margin-left: var(sizeX / 2);
9  border: calc(var(--sizeX) / 10) solid var(--color);
10  border-radius: 50px;
11  box-sizing: border-box;
12  margin-bottom: 16px;
13  cursor: pointer;
14}
15
16.scrolldown::before {
17  content: "";
18  position: absolute;
19  bottom: 30px;
20  left: 50%;
21  width: 6px;
22  height: 6px;
23  margin-left: -3px;
24  background-color: var(--color);
25  border-radius: 100%;
26  animation: scrolldown-anim 2s infinite;
27  box-sizing: border-box;
28  box-shadow: 0px -5px 3px 1px #2a547066;
29}
30
31@keyframes scrolldown-anim {
32  0% {
33    opacity: 0;
34    height: 6px;
35  }
36
37  40% {
38    opacity: 1;
39    height: 10px;
40  }
41
42  80% {
43    transform: translate(0, 20px);
44    height: 10px;
45    opacity: 0;
46  }
47
48  100% {
49    height: 3px;
50    opacity: 0;
51  }
52}
53
54.chevrons {
55  padding: 6px 0 0 0;
56  margin-left: -3px;
57  margin-top: 48px;
58  width: 30px;
59  display: flex;
60  flex-direction: column;
61  align-items: center;
62}
63
64.chevrondown {
65  margin-top: -6px;
66  position: relative;
67  border: solid var(--color);
68  border-width: 0 3px 3px 0;
69  display: inline-block;
70  width: 10px;
71  height: 10px;
72  transform: rotate(45deg);
73}
74
75.chevrondown:nth-child(odd) {
76  animation: pulse54012 500ms ease infinite alternate;
77}
78
79.chevrondown:nth-child(even) {
80  animation: pulse54012 500ms ease infinite alternate 250ms;
81}
82
83@keyframes pulse54012 {
84  from {
85    opacity: 0;
86  }
87
88  to {
89    opacity: 0.5;
90  }
91}