├── imgs
    ├── bag.svg
    ├── bottle.svg
    ├── headphones.svg
    ├── phone.svg
    ├── takeout.svg
    ├── team-seas-logo.png
    └── toy-car.svg
├── index.html
├── script.js
└── styles.css


/imgs/bag.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M10,10c0,0.55-0.45,1-1,1s-1-0.45-1-1V8h2V10z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M16,10c0,0.55-0.45,1-1,1 s-1-0.45-1-1V8h2V10z"/></g></svg>


--------------------------------------------------------------------------------
/imgs/bottle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M20.63,8.54l-0.95-0.32C19.28,8.09,19,7.71,19,7.28V3c0-0.55-0.45-1-1-1h-3c-0.55,0-1,0.45-1,1v4.28 c0,0.43-0.28,0.81-0.68,0.95l-0.95,0.32C11.55,8.82,11,9.58,11,10.44V20c0,1.1,0.9,2,2,2h7c1.1,0,2-0.9,2-2v-9.56 C22,9.58,21.45,8.82,20.63,8.54z M16,4h1v1h-1V4z M13,10.44l0.95-0.32C15.18,9.72,16,8.57,16,7.28V7h1v0.28 c0,1.29,0.82,2.44,2.05,2.85L20,10.44V12h-7V10.44z M20,20h-7v-2h7V20z"/></g></g></g></svg>


--------------------------------------------------------------------------------
/imgs/headphones.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,3c-4.97,0-9,4.03-9,9v7c0,1.1,0.9,2,2,2h4v-8H5v-1c0-3.87,3.13-7,7-7s7,3.13,7,7v1h-4v8h4c1.1,0,2-0.9,2-2v-7 C21,7.03,16.97,3,12,3z"/></g></svg>


--------------------------------------------------------------------------------
/imgs/phone.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>


--------------------------------------------------------------------------------
/imgs/takeout.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M5.26,11h13.48l-0.67,9H5.93L5.26,11z M9.02,4h5.95L19,7.38l1.59-1.59L22,7.21 L19.21,10H4.79L2,7.21l1.41-1.41L5,7.38L9.02,4z" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/imgs/team-seas-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WebDevSimplified/team-seas-ocean/3d5a2f73bf0be5ed461e47bf366462f8032dc3e9/imgs/team-seas-logo.png


--------------------------------------------------------------------------------
/imgs/toy-car.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g display="none"><rect display="inline" fill="none" height="24" width="24" y="0"/></g><g><path d="M22,14c0-1.95-1.4-3.57-3.25-3.92L17.4,6.05C17,4.82,15.85,4,14.56,4H9.44C8.15,4,7,4.82,6.6,6.05L5.81,8.4L4.41,7 l0.29-0.29c0.39-0.39,0.39-1.02,0-1.41c-0.39-0.39-1.02-0.39-1.41,0l-2,2c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,1.02,0.39,1.41,0 L3,8.41l1.79,1.79C3.18,10.72,2,12.22,2,14c0,1.5,0.83,2.79,2.05,3.48C4.28,18.9,5.51,20,7,20c1.3,0,2.4-0.84,2.82-2h4.37 c0.41,1.16,1.51,2,2.82,2c1.49,0,2.72-1.1,2.95-2.52C21.17,16.79,22,15.5,22,14z M7,18c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1 S7.55,18,7,18z M11,10H7.41L7.39,9.98l1.1-3.3C8.63,6.27,9.01,6,9.44,6H11V10z M13,6h1.56c0.43,0,0.81,0.27,0.95,0.68L16.61,10H13 V6z M17,18c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S17.55,18,17,18z"/></g></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 8 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 9 |   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
10 |   <link rel="stylesheet" href="styles.css">
11 |   <script src="script.js" defer></script>
12 |   <title>Document</title>
13 | </head>
14 | <body>
15 |   <div class="landscape">
16 |     <div class="mountain"></div>
17 |     <div class="mountain mountain-2"></div>
18 |     <div class="mountain mountain-3"></div>
19 |     <div class="sun-container sun-container-1">
20 |     </div>
21 |     <div class="sun-container">
22 |       <div class="sun"></div>
23 |     </div>
24 |     <div class="cloud"></div>
25 |     <div class="cloud cloud-1"></div>
26 |     <div class="sun-container sun-container-reflection">
27 |       <div class="sun"></div>
28 |     </div>
29 |     <div class="light"></div>
30 |     <div class="light light-1"></div>
31 |     <div class="light light-2"></div>
32 |     <div class="light light-3"></div>
33 |     <div class="light light-4"></div>
34 |     <div class="light light-5"></div>
35 |     <div class="light light-6"></div>
36 |     <div class="light light-7"></div>
37 |     <div class="water"></div>
38 |     <div class="splash"></div>
39 |     <div class="splash delay-1"></div>
40 |     <div class="splash delay-2"></div>
41 |     <div class="splash splash-4 delay-2"></div>
42 |     <div class="splash splash-4 delay-3"></div>
43 |     <div class="splash splash-4 delay-4"></div>
44 |     <div class="splash splash-stone delay-3"></div>
45 |     <div class="splash splash-stone splash-4"></div>
46 |     <div class="splash splash-stone splash-5"></div>
47 |     <div class="lotus lotus-1"></div>
48 |     <div class="lotus lotus-2"></div>
49 |     <div class="lotus lotus-3"></div>
50 |     <div class="trash-container"></div>
51 |     <div class="front">
52 |       <div class="stone"></div>
53 |       <div class="grass"></div>
54 |       <div class="grass grass-1"></div>
55 |       <div class="grass grass-2"></div>
56 |       <div class="reed"></div>
57 |       <div class="reed reed-1"></div>
58 |     </div>
59 |   </div>
60 |   <div class="logo"></div>
61 |   <h1 class="money"></h1>
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | const trashContainer = document.querySelector(".trash-container")
 2 | const moneyElem = document.querySelector(".money")
 3 | const currencyFormatter = new Intl.NumberFormat("en-us", {
 4 |   style: "currency",
 5 |   currency: "USD",
 6 |   maximumFractionDigits: 0,
 7 | })
 8 | const trashFormatter = new Intl.NumberFormat("en-us", {
 9 |   minimumIntegerDigits: 8,
10 |   maximumFractionDigits: 0,
11 |   useGrouping: false,
12 | })
13 | 
14 | const MAX_MONEY_RAISED = 30000000
15 | 
16 | setupTrash()
17 | 
18 | async function setupTrash() {
19 |   const amountRaised = await fetch("https://tscache.com/donation_total.json")
20 |     .then(res => res.json())
21 |     .then(data => data.count)
22 |   moneyElem.innerText = currencyFormatter.format(amountRaised)
23 | 
24 |   const amountLeftToRaise = Math.max(MAX_MONEY_RAISED - amountRaised, 0)
25 |   const stringifiedAmount = trashFormatter.format(amountLeftToRaise)
26 |   const trashAmount = {
27 |     xxl: {
28 |       amount: parseInt(`${stringifiedAmount[0]}${stringifiedAmount[1]}`),
29 |       icon: "bag",
30 |     },
31 |     xl: {
32 |       amount: parseInt(stringifiedAmount[2]),
33 |       icon: "takeout",
34 |     },
35 |     lg: {
36 |       amount: parseInt(stringifiedAmount[3]),
37 |       icon: "headphones",
38 |     },
39 |     md: {
40 |       amount: parseInt(stringifiedAmount[4]),
41 |       icon: "phone",
42 |     },
43 |     sm: {
44 |       amount: parseInt(stringifiedAmount[5]),
45 |       icon: "toy-car",
46 |     },
47 |     xs: {
48 |       amount: parseInt(stringifiedAmount[6]),
49 |       icon: "bottle",
50 |     },
51 |   }
52 | 
53 |   Object.values(trashAmount).forEach(({ amount, icon }) => {
54 |     for (let i = 0; i < amount; i++) {
55 |       createTrash(icon)
56 |     }
57 |   })
58 | }
59 | 
60 | function createTrash(icon) {
61 |   const img = document.createElement("img")
62 |   const top = randomNumberBetween(0, 50)
63 |   const size = top / 5 + 1
64 |   img.classList.add("trash")
65 |   img.src = `/imgs/${icon}.svg`
66 |   img.style.width = `${size}vmin`
67 |   img.style.height = `${size}vmin`
68 |   img.style.top = `${top}vh`
69 |   img.style.left = `${randomNumberBetween(0, 100)}vw`
70 |   img.style.setProperty("--rotation", `${randomNumberBetween(-30, 30)}deg`)
71 |   trashContainer.appendChild(img)
72 | }
73 | 
74 | function randomNumberBetween(min, max) {
75 |   return Math.floor(Math.random() * (max - min + 1) + min)
76 | }
77 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | *, *::before, *::after {
  2 |   font-family: 'Open Sans', sans-serif;
  3 |   user-select: none;
  4 | }
  5 | 
  6 | body {
  7 |   margin: 0;
  8 | }
  9 | 
 10 | .logo {
 11 |   position: absolute;
 12 |   top: .5rem;
 13 |   left: .5rem;
 14 |   width: 5rem;
 15 |   height: 5rem;
 16 |   border-radius: 100%;
 17 |   overflow: hidden;
 18 |   z-index: 100;
 19 | }
 20 | 
 21 | .logo::before {
 22 |   content: "";
 23 |   background: url(/imgs/team-seas-logo.png);
 24 |   position: absolute;
 25 |   width: 100%;
 26 |   height: 100%;
 27 |   background-size: cover;
 28 | }
 29 | 
 30 | .logo::after {
 31 |   content: '';
 32 |   position: absolute;
 33 |   width: 200%;
 34 |   height: 200%;
 35 |   background-color: hsla(290, 31%, 67%, .9);
 36 |   bottom: 0;
 37 |   left: -50%;
 38 |   border-radius: 35%;
 39 |   animation: waves 5s ease-in-out alternate infinite;
 40 | }
 41 | 
 42 | @keyframes waves {
 43 |   to {
 44 |     transform: translateY(-50%) rotate(540deg);
 45 |   }
 46 | }
 47 | 
 48 | .money {
 49 |   position: absolute;
 50 |   bottom: 50vh;
 51 |   left: 50vmin;
 52 |   font-size: 6vmin;
 53 |   z-index: 100;
 54 |   color: white;
 55 |   margin: 0;
 56 |   opacity: .5;
 57 |   text-shadow: 0 0 5px hsl(0, 0%, 0%, .5);
 58 | }
 59 | 
 60 | .trash-container {
 61 |   position: absolute;
 62 |   width: 100%;
 63 |   height: 50vh;
 64 |   bottom: 0;
 65 |   left: 0;
 66 | }
 67 | 
 68 | .trash {
 69 |   position: absolute;
 70 |   opacity: .75;
 71 |   animation: bob 2s ease-in-out infinite alternate;
 72 | }
 73 | 
 74 | @keyframes bob {
 75 |   from {
 76 |     transform: rotate(var(--rotation)) translateY(1vh);
 77 |   }
 78 | 
 79 |   to {
 80 |     transform: rotate(calc(var(--rotation) + 10deg)) translateY(0);
 81 |   }
 82 | }
 83 | 
 84 | /*
 85 |   Below code from Paulina Hetman
 86 |   https://codepen.io/pehaa/pen/yLVeLNg
 87 | */
 88 | 
 89 | :root {
 90 |   --v1: #be91c6;
 91 |   --v2: #8a65cc;
 92 |   --v3: #5e30d9;
 93 |   --transparentv3: #5e30d900;
 94 |   --v4: #3b1895;
 95 |   --s1: #fea798;
 96 |   --s2: #ff846e;
 97 |   --cloud: #fea798;
 98 | }
 99 | 
100 | .landscape:after,
101 | .landscape:before,
102 | .landscape *,
103 | .landscape *:after,
104 | .landscape *:before {
105 |   position: absolute;
106 | }
107 | 
108 | .front {
109 |   z-index: 1;
110 |   bottom: 0;
111 |   left: 0;
112 |   right: 0;
113 | }
114 | 
115 | .landscape {
116 |   height: 100vh;
117 |   background-image: linear-gradient(var(--v1), var(--s1), var(--v1));
118 |   position: relative;
119 |   z-index: 1;
120 |   overflow: hidden;
121 | }
122 | 
123 | .mountain {
124 |   border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;
125 |   width: 40vmin;
126 |   height: 30vmin;
127 |   bottom: 50%;
128 |   left: -10vmin;
129 |   background: var(--s1);
130 |   background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));
131 |   box-shadow: inset -10px 0 10px -10px var(--s1);
132 | }
133 | .mountain:before {
134 |   content: "";
135 |   bottom: 0;
136 |   width: inherit;
137 |   height: inherit;
138 |   background: inherit;
139 |   border-radius: inherit;
140 |   transform-origin: bottom center;
141 |   transform: scaleX(1) scaleY(-0.6);
142 |   filter: blur(3px);
143 | }
144 | 
145 | .mountain-2 {
146 |   left: 5vmin;
147 |   height: 15vmin;
148 |   width: 40vmin;
149 |   box-shadow: inset -15px 0 10px -14px var(--s1);
150 |   border-radius: 120% 50% 0% 0%/25vmin 25vmin 0% 0%;
151 |   background-image: linear-gradient(var(--v3), var(--v4));
152 | }
153 | 
154 | .mountain-3 {
155 |   border-radius: 80% 0% 0 0/100% 100% 0 0;
156 |   right: -85vmin;
157 |   width: 100vmin;
158 |   left: auto;
159 |   height: 12vmin;
160 |   color: var(--v3);
161 |   background-image: linear-gradient(var(--s1), var(--v4));
162 |   box-shadow: inset 15px 0 10px -10px var(--s1);
163 | }
164 | 
165 | .mountain-3:after {
166 |   content: "";
167 |   border-radius: 60% 0 0 0/100% 0 0 0;
168 |   background: inherit;
169 |   width: 100%;
170 |   height: 0;
171 |   bottom: 0;
172 |   right: 20%;
173 | }
174 | 
175 | .lotus {
176 |   width: 10vmin;
177 |   height: 5vmin;
178 |   background: conic-gradient(var(--v3) 0deg 40deg, var(--transparentv3) 50deg 70deg, var(--v3) 80deg);
179 |   border-radius: 50%;
180 | }
181 | 
182 | .lotus-1 {
183 |   bottom: 10vmin;
184 |   right: 5vmin;
185 |   width: 20vmin;
186 | }
187 | 
188 | .lotus-2 {
189 |   bottom: 20vmin;
190 |   right: 15vmin;
191 |   height: 3vmin;
192 |   transform: skew(-10deg);
193 |   opacity: 0.5;
194 |   mix-blend-mode: multiply;
195 | }
196 | 
197 | .lotus-3 {
198 |   bottom: 10vmin;
199 |   right: 35vmin;
200 |   transform: rotate(180deg) skew(-20deg);
201 |   opacity: 0.8;
202 |   width: 15vmin;
203 | }
204 | 
205 | .cloud {
206 |   width: 80vmin;
207 |   height: 6vmin;
208 |   background: currentcolor;
209 |   color: var(--cloud);
210 |   top: 24vmin;
211 |   left: 20vmin;
212 |   border-radius: 50%;
213 |   box-shadow: 30vmin 0.5vmin 0 -1vmin currentcolor, -25vmin 0 0 -0.6vmin currentcolor;
214 |   opacity: 0.3;
215 |   transform: translate3d(-150vmin, 0, 0);
216 |   -webkit-animation: clouds 120s infinite;
217 |           animation: clouds 120s infinite;
218 |   -webkit-animation-delay: -10s;
219 |           animation-delay: -10s;
220 | }
221 | 
222 | @-webkit-keyframes clouds {
223 |   50% {
224 |     transform: translate3d(0, 0, 0);
225 |   }
226 |   100% {
227 |     transform: translate3d(150vmin, 0, 0);
228 |   }
229 | }
230 | 
231 | @keyframes clouds {
232 |   50% {
233 |     transform: translate3d(0, 0, 0);
234 |   }
235 |   100% {
236 |     transform: translate3d(150vmin, 0, 0);
237 |   }
238 | }
239 | .cloud-1 {
240 |   left: 60vmin;
241 |   top: 15vmin;
242 |   opacity: 0.2;
243 |   filter: blur(1px);
244 |   -webkit-animation-delay: 0;
245 |           animation-delay: 0;
246 |   -webkit-animation-duration: 100s;
247 |           animation-duration: 100s;
248 | }
249 | 
250 | .water {
251 |   top: 50%;
252 |   bottom: 0;
253 |   left: 0;
254 |   right: 0;
255 |   background: linear-gradient(#fea79855, var(--v2));
256 |   overflow: hidden;
257 |   box-shadow: inset 0 1px 4px -3px white;
258 | }
259 | 
260 | .stone {
261 |   bottom: -5vh;
262 |   left: 0;
263 |   height: 20vmin;
264 |   width: 40vmin;
265 |   background: var(--v4);
266 |   box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.2);
267 |   border-radius: 0% 200% 0 0/0% 200%;
268 | }
269 | 
270 | .stone:after {
271 |   content: "";
272 |   background: var(--v3);
273 |   width: 100%;
274 |   height: 100%;
275 |   right: -15%;
276 |   border-radius: inherit;
277 |   z-index: -1;
278 |   transform: scaleX(1.3) skew(10deg);
279 |   box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.4);
280 | }
281 | 
282 | .grass {
283 |   height: 40vmin;
284 |   width: 10vmin;
285 |   border-radius: 0 60% 0 0/0 100% 0 0;
286 |   bottom: 0;
287 |   border-right: 5px solid var(--v4);
288 |   box-shadow: 1px 0 0 var(--s1);
289 |   filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2)) drop-shadow(-4.5vmin 10vmin 0 var(--v3));
290 | }
291 | 
292 | .grass-1 {
293 |   left: 14vmin;
294 |   bottom: -2vmin;
295 |   transform: scaleX(-1);
296 |   box-shadow: 2px 0 0 var(--v4);
297 |   border-color: var(--v3);
298 |   filter: drop-shadow(-1vmin 5vmin 0 var(--v3)) drop-shadow(-80vmin 5vmin 0 var(--v4));
299 | }
300 | 
301 | .grass-2 {
302 |   right: 0;
303 |   left: auto;
304 |   height: 20vmin;
305 |   bottom: -2vmin;
306 |   transform: scaleX(-1);
307 | }
308 | 
309 | .sun {
310 |   background: white;
311 |   border-radius: 50%;
312 |   width: 20vmin;
313 |   height: 20vmin;
314 |   left: calc(60% - 10vmin);
315 |   top: 100%;
316 |   transform: translate3d(0, 0, 0);
317 |   -webkit-animation: rise 20s infinite;
318 |           animation: rise 20s infinite;
319 |   box-shadow: 0 0 10px white;
320 | }
321 | 
322 | .reed {
323 |   height: 40vmin;
324 |   width: 0.5vmin;
325 |   bottom: 0;
326 |   left: 10vmin;
327 |   color: var(--v4);
328 |   background: currentColor;
329 |   transform-origin: bottom center;
330 |   transform: rotate(4deg);
331 |   box-shadow: inset -1px 0 0 var(--s2), -6vmin 3vmin 0 0, 80vmin 0 0 0;
332 |   -webkit-animation: verticalise 20s infinite;
333 |           animation: verticalise 20s infinite;
334 | }
335 | 
336 | .reed-1 {
337 |   color: var(--s2);
338 |   left: 15vmin;
339 |   height: 50vmin;
340 |   bottom: -5vmin;
341 |   transform: rotate(-2deg);
342 |   -webkit-animation: verticalise-1 20s infinite;
343 |           animation: verticalise-1 20s infinite;
344 |   box-shadow: inset -1px 0 0 var(--s1), 6vmin 13vmin 0 0 var(--s1), 80vmin 10vmin 0 0 var(--v3);
345 | }
346 | 
347 | .reed:after {
348 |   content: "";
349 |   width: 1.5vmin;
350 |   height: 10vmin;
351 |   background: currentcolor;
352 |   border-radius: 0.75vmin;
353 |   top: 0;
354 |   left: -0.5vmin;
355 |   box-shadow: inherit;
356 | }
357 | 
358 | @-webkit-keyframes verticalise {
359 |   0%, 10% {
360 |     transform: rotate(4deg);
361 |   }
362 |   30%, 70% {
363 |     transform: rotate(0);
364 |   }
365 | }
366 | 
367 | @keyframes verticalise {
368 |   0%, 10% {
369 |     transform: rotate(4deg);
370 |   }
371 |   30%, 70% {
372 |     transform: rotate(0);
373 |   }
374 | }
375 | @-webkit-keyframes verticalise-1 {
376 |   0%, 10% {
377 |     transform: rotate(-2deg);
378 |   }
379 |   45%, 70% {
380 |     transform: rotate(0) translateY(-6vmin);
381 |   }
382 | }
383 | @keyframes verticalise-1 {
384 |   0%, 10% {
385 |     transform: rotate(-2deg);
386 |   }
387 |   45%, 70% {
388 |     transform: rotate(0) translateY(-6vmin);
389 |   }
390 | }
391 | @-webkit-keyframes rise {
392 |   100% {
393 |     transform: translate3d(0, -100vh, 20vmin);
394 |   }
395 | }
396 | @keyframes rise {
397 |   100% {
398 |     transform: translate3d(0, -100vh, 20vmin);
399 |   }
400 | }
401 | @-webkit-keyframes rise-reflection {
402 |   30% {
403 |     opacity: 0;
404 |     transform: translate3d(0, 5vmin, 0);
405 |   }
406 |   100% {
407 |     opacity: 0;
408 |     transform: translate3d(0, 80vmin, 0);
409 |   }
410 | }
411 | @keyframes rise-reflection {
412 |   30% {
413 |     opacity: 0;
414 |     transform: translate3d(0, 5vmin, 0);
415 |   }
416 |   100% {
417 |     opacity: 0;
418 |     transform: translate3d(0, 80vmin, 0);
419 |   }
420 | }
421 | .sun-container {
422 |   overflow: hidden;
423 |   width: 100%;
424 |   height: 50%;
425 | }
426 | 
427 | .sun-container-1:after {
428 |   content: "";
429 |   left: 0;
430 |   right: 0;
431 |   top: 0;
432 |   bottom: 0;
433 |   background: radial-gradient(circle at 60% 100%, var(--s2), transparent);
434 |   -webkit-animation: fade 20s infinite;
435 |           animation: fade 20s infinite;
436 |   mix-blend-mode: color-burn;
437 | }
438 | 
439 | @-webkit-keyframes fade {
440 |   10% {
441 |     opacity: 1;
442 |   }
443 |   30%, 70% {
444 |     opacity: 0;
445 |   }
446 | }
447 | 
448 | @keyframes fade {
449 |   10% {
450 |     opacity: 1;
451 |   }
452 |   30%, 70% {
453 |     opacity: 0;
454 |   }
455 | }
456 | .sun-container-reflection {
457 |   top: 50%;
458 |   background: radial-gradient(circle at 60% 0%, var(--s2), transparent);
459 | }
460 | 
461 | .sun-container-reflection .sun {
462 |   background: linear-gradient(white, rgba(255, 255, 255, 0));
463 |   box-shadow: none;
464 |   filter: blur(5px);
465 |   opacity: 1;
466 |   top: 0;
467 |   transform: translate3d(0, -20vmin, 0);
468 |   -webkit-animation-name: rise-reflection;
469 |           animation-name: rise-reflection;
470 | }
471 | 
472 | .light {
473 |   height: 0.5vmin;
474 |   width: 20vmin;
475 |   background: white;
476 |   left: 20%;
477 |   right: 0;
478 |   margin: auto;
479 |   top: calc(50% + 1vmin);
480 |   -webkit-animation: light 20s infinite;
481 |           animation: light 20s infinite;
482 |   opacity: 0;
483 |   transform: scaleX(0.1) translate3d(0%, 0, 0);
484 |   border-radius: 0.25vh;
485 |   filter: blur(1px);
486 | }
487 | 
488 | @-webkit-keyframes light {
489 |   5% {
490 |     opacity: 1;
491 |     transform: scaleX(1);
492 |   }
493 |   10% {
494 |     opacity: 0.6;
495 |     transform: scaleX(1) translate3d(5%, 0, 0);
496 |   }
497 |   15% {
498 |     opacity: 0.6;
499 |     transform: scaleX(1) translate3d(-5%, 0, 0);
500 |   }
501 |   20% {
502 |     opacity: 0;
503 |     transform: scaleX(0.1) translate3d(0, 0, 0);
504 |   }
505 | }
506 | @keyframes light {
507 |   5% {
508 |     opacity: 1;
509 |     transform: scaleX(1);
510 |   }
511 |   10% {
512 |     opacity: 0.6;
513 |     transform: scaleX(1) translate3d(5%, 0, 0);
514 |   }
515 |   15% {
516 |     opacity: 0.6;
517 |     transform: scaleX(1) translate3d(-5%, 0, 0);
518 |   }
519 |   20% {
520 |     opacity: 0;
521 |     transform: scaleX(0.1) translate3d(0, 0, 0);
522 |   }
523 | }
524 | .light-1 {
525 |   top: calc(50% + 2vmin);
526 |   -webkit-animation-delay: 0.5s;
527 |           animation-delay: 0.5s;
528 | }
529 | 
530 | .light-2 {
531 |   top: calc(50% + 3vmin);
532 |   width: 18vmin;
533 |   -webkit-animation-delay: 1s;
534 |           animation-delay: 1s;
535 | }
536 | 
537 | .light-3 {
538 |   top: calc(50% + 4vmin);
539 |   width: 18vmin;
540 |   -webkit-animation-delay: 1.5s;
541 |           animation-delay: 1.5s;
542 | }
543 | 
544 | .light-4 {
545 |   top: calc(50% + 5vmin);
546 |   width: 16vmin;
547 |   -webkit-animation-delay: 2s;
548 |           animation-delay: 2s;
549 | }
550 | 
551 | .light-5 {
552 |   top: calc(50% + 8vmin);
553 |   width: 14vmin;
554 |   -webkit-animation-delay: 2.5s;
555 |           animation-delay: 2.5s;
556 | }
557 | 
558 | .light-6 {
559 |   top: calc(50% + 9vmin);
560 |   width: 10vmin;
561 |   -webkit-animation-delay: 3s;
562 |           animation-delay: 3s;
563 | }
564 | 
565 | .light-7 {
566 |   top: calc(50% + 7vmin);
567 |   width: 12vmin;
568 |   -webkit-animation-delay: 3.5s;
569 |           animation-delay: 3.5s;
570 | }
571 | 
572 | .splash {
573 |   width: 8vmin;
574 |   height: 3vmin;
575 |   border: 2px solid var(--s1);
576 |   box-shadow: 0 0 2px var(--s1);
577 |   border-radius: 50%;
578 |   bottom: 5vmin;
579 |   left: 70%;
580 |   -webkit-animation: splash 9s infinite;
581 |           animation: splash 9s infinite;
582 |   transform: scale(0);
583 | }
584 | 
585 | .splash-stone {
586 |   bottom: 15vh;
587 |   left: -3vmin;
588 |   height: 10vmin;
589 |   width: 30vmin;
590 | }
591 | 
592 | .splash-4 {
593 |   bottom: 5vmin;
594 |   left: auto;
595 |   bottom: 15vmin;
596 |   right: -2vmin;
597 | }
598 | 
599 | @-webkit-keyframes splash {
600 |   50%, 100% {
601 |     transform: scale(1);
602 |     opacity: 0;
603 |   }
604 | }
605 | 
606 | @keyframes splash {
607 |   50%, 100% {
608 |     transform: scale(1);
609 |     opacity: 0;
610 |   }
611 | }
612 | .delay-1 {
613 |   -webkit-animation-delay: 1s;
614 |           animation-delay: 1s;
615 | }
616 | 
617 | .delay-2 {
618 |   -webkit-animation-delay: 2s;
619 |           animation-delay: 2s;
620 | }
621 | 
622 | .delay-3 {
623 |   -webkit-animation-delay: 3s;
624 |           animation-delay: 3s;
625 | }
626 | 
627 | .delay-4 {
628 |   -webkit-animation-delay: 4s;
629 |           animation-delay: 4s;
630 | }
631 | 
632 | .delay-5 {
633 |   -webkit-animation-delay: 5s;
634 |           animation-delay: 5s;
635 | }
636 | 
637 | .delay-6 {
638 |   -webkit-animation-delay: 6s;
639 |           animation-delay: 6s;
640 | }


--------------------------------------------------------------------------------