-
Notifications
You must be signed in to change notification settings - Fork 20
/
auroral.css
255 lines (242 loc) · 11.4 KB
/
auroral.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
@-webkit-keyframes aura {
0% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: translateY(100px) rotate(1deg);
transform: translateY(100px) rotate(1deg);
}
40% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
60% {
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(16deg);
transform: translateY(-10px) rotate(16deg);
}
100% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
}
@keyframes aura {
0% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: translateY(100px) rotate(1deg);
transform: translateY(100px) rotate(1deg);
}
40% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
60% {
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(16deg);
transform: translateY(-10px) rotate(16deg);
}
100% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
}
@-webkit-keyframes northern {
0% {
-webkit-transform: translate(5%, -2%);
transform: translate(5%, -2%);
}
25% {
-webkit-transform: translate(10%, 7%);
transform: translate(10%, 7%);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: translate(7%, -2%);
transform: translate(7%, -2%);
}
85% {
-webkit-transform: translate(6%, 3%) rotate(12deg);
transform: translate(6%, 3%) rotate(12deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes northern {
0% {
-webkit-transform: translate(5%, -2%);
transform: translate(5%, -2%);
}
25% {
-webkit-transform: translate(10%, 7%);
transform: translate(10%, 7%);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: translate(7%, -2%);
transform: translate(7%, -2%);
}
85% {
-webkit-transform: translate(6%, 3%) rotate(12deg);
transform: translate(6%, 3%) rotate(12deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.auroral-agrabah {
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation-name: aura;
animation-name: aura;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background: -webkit-linear-gradient(110deg, rgba(26, 0, 192, 0.4) 40%, rgba(215, 0, 67, 0.4)), -webkit-linear-gradient(30deg, #1a00c0 10%, #d70043);
background: linear-gradient(-20deg, rgba(26, 0, 192, 0.4) 40%, rgba(215, 0, 67, 0.4)), linear-gradient(60deg, #1a00c0 10%, #d70043);
}
.auroral-northern {
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation-name: northern;
animation-name: northern;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background: -webkit-linear-gradient(80deg, #a1d9b4 20%, #32988a 40%, #000e3c 70%);
background: linear-gradient(10deg, #a1d9b4 20%, #32988a 40%, #000e3c 70%);
}
.auroral-northern-intense {
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation-name: aura;
animation-name: aura;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background: -webkit-linear-gradient(80deg, #b7a841 20%, #a1006a 40%, #371d40 60%);
background: linear-gradient(10deg, #b7a841 20%, #a1006a 40%, #371d40 60%);
}
.auroral-northern-dimmed {
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation-name: northern;
animation-name: northern;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background: -webkit-linear-gradient(135deg, rgba(237, 124, 148, 0.3) 20%, rgba(35, 82, 154, 0.3) 70%), -webkit-linear-gradient(80deg, #916b63 7%, #b8ba6f 20%, #ed7c94 40%, #23529a 60%);
background: linear-gradient(-45deg, rgba(237, 124, 148, 0.3) 20%, rgba(35, 82, 154, 0.3) 70%), linear-gradient(10deg, #916b63 7%, #b8ba6f 20%, #ed7c94 40%, #23529a 60%);
}
.auroral-northern-dusk {
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation-name: northern;
animation-name: northern;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background: -webkit-linear-gradient(125deg, rgba(145, 107, 99, 0.5) 15%, rgba(184, 186, 111, 0.5) 25%, transparent 60%), -webkit-linear-gradient(80deg, #916b63 9%, #b8ba6f 30%, #ed7c94 45%, #23529a 65%);
background: linear-gradient(-35deg, rgba(145, 107, 99, 0.5) 15%, rgba(184, 186, 111, 0.5) 25%, transparent 60%), linear-gradient(10deg, #916b63 9%, #b8ba6f 30%, #ed7c94 45%, #23529a 65%);
}
.auroral-northern-warm {
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation-name: aura;
animation-name: aura;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background: -webkit-linear-gradient(85deg, transparent 70%, #da7712 95%), -webkit-linear-gradient(290deg, #432c24 30%, #d96d7d 62%, #da7712 95%);
background: linear-gradient(5deg, transparent 70%, #da7712 95%), linear-gradient(160deg, #432c24 30%, #d96d7d 62%, #da7712 95%);
}
.auroral-stars {
position: fixed;
top: 0;
left: 0;
display: block;
width: 1px;
height: 1px;
border-radius: 50%;
background: white;
box-shadow: 119vw 46vh 0 1px rgba(255, 255, 255, 0.7), 17vw 47vh 0 2px rgba(255, 255, 255, 0.7), 98vw 35vh 0 1px rgba(255, 255, 255, 0.7), 94vw 25vh 0 1px rgba(255, 255, 255, 0.7), 33vw 46vh 0 1px rgba(255, 255, 255, 0.7), 11vw 5vh 0 2px rgba(255, 255, 255, 0.7), 44vw 47vh 0 2px rgba(255, 255, 255, 0.7), 74vw 4vh 0 2px rgba(255, 255, 255, 0.7), 28vw 18vh 0 2px rgba(255, 255, 255, 0.7), 45vw 45vh 0 1px rgba(255, 255, 255, 0.7), 18vw 26vh 0 1px rgba(255, 255, 255, 0.7), 57vw 44vh 0 2px rgba(255, 255, 255, 0.7), 64vw 28vh 0 2px rgba(255, 255, 255, 0.7), 100vw 17vh 0 1px rgba(255, 255, 255, 0.7), 74vw 36vh 0 1px rgba(255, 255, 255, 0.7), 94vw 16vh 0 1px rgba(255, 255, 255, 0.7), 48vw 34vh 0 2px rgba(255, 255, 255, 0.7), 86vw 5vh 0 2px rgba(255, 255, 255, 0.7), 25vw 7vh 0 1px rgba(255, 255, 255, 0.7), 89vw 34vh 0 1px rgba(255, 255, 255, 0.7), 15vw 32vh 0 2px rgba(255, 255, 255, 0.7), 93vw 25vh 0 2px rgba(255, 255, 255, 0.7), 41vw 9vh 0 2px rgba(255, 255, 255, 0.7), 42vw 36vh 0 1px rgba(255, 255, 255, 0.7), 54vw 23vh 0 1px rgba(255, 255, 255, 0.7), 50vw 46vh 0 1px rgba(255, 255, 255, 0.7), 50vw 19vh 0 2px rgba(255, 255, 255, 0.7), 60vw 40vh 0 1px rgba(255, 255, 255, 0.7), 59vw 4vh 0 2px rgba(255, 255, 255, 0.7), 15vw 23vh 0 2px rgba(255, 255, 255, 0.7), 14vw 38vh 0 1px rgba(255, 255, 255, 0.7), 58vw 41vh 0 1px rgba(255, 255, 255, 0.7), 70vw 7vh 0 1px rgba(255, 255, 255, 0.7), 10vw 25vh 0 1px rgba(255, 255, 255, 0.7), 44vw 33vh 0 1px rgba(255, 255, 255, 0.7), 70vw 37vh 0 2px rgba(255, 255, 255, 0.7), 28vw 33vh 0 1px rgba(255, 255, 255, 0.7), 72vw 7vh 0 2px rgba(255, 255, 255, 0.7), 68vw 34vh 0 1px rgba(255, 255, 255, 0.7), 13vw 17vh 0 2px rgba(255, 255, 255, 0.7), 13vw 7vh 0 2px rgba(255, 255, 255, 0.7), 53vw 36vh 0 1px rgba(255, 255, 255, 0.7), 99vw 24vh 0 1px rgba(255, 255, 255, 0.7), 94vw 23vh 0 2px rgba(255, 255, 255, 0.7), 93vw 38vh 0 1px rgba(255, 255, 255, 0.7), 81vw 18vh 0 2px rgba(255, 255, 255, 0.7), 15vw 33vh 0 1px rgba(255, 255, 255, 0.7), 11vw 29vh 0 1px rgba(255, 255, 255, 0.7), 82vw 23vh 0 1px rgba(255, 255, 255, 0.7), 80vw 32vh 0 1px rgba(255, 255, 255, 0.7), 9vw 2vh 0 2px rgba(255, 255, 255, 0.7), 69vw 2vh 0 1px rgba(255, 255, 255, 0.7), 46vw 39vh 0 1px rgba(255, 255, 255, 0.7), 46vw 15vh 0 1px rgba(255, 255, 255, 0.7), 54vw 48vh 0 1px rgba(255, 255, 255, 0.7), 66vw 34vh 0 1px rgba(255, 255, 255, 0.7), 7vw 42vh 0 2px rgba(255, 255, 255, 0.7), 18vw 17vh 0 1px rgba(255, 255, 255, 0.7), 81vw 14vh 0 2px rgba(255, 255, 255, 0.7), 97vw 16vh 0 1px rgba(255, 255, 255, 0.7), 97vw 8vh 0 2px rgba(255, 255, 255, 0.7), 73vw 35vh 0 2px rgba(255, 255, 255, 0.7), 94vw 7vh 0 2px rgba(255, 255, 255, 0.7), 19vw 41vh 0 2px rgba(255, 255, 255, 0.7), 92vw 38vh 0 2px rgba(255, 255, 255, 0.7), 72vw 2vh 0 2px rgba(255, 255, 255, 0.7), 87vw 45vh 0 2px rgba(255, 255, 255, 0.7), 48vw 45vh 0 1px rgba(255, 255, 255, 0.7), 28vw 11vh 0 1px rgba(255, 255, 255, 0.7), 51vw 50vh 0 2px rgba(255, 255, 255, 0.7), 85vw 2vh 0 2px rgba(255, 255, 255, 0.7), 79vw 39vh 0 1px rgba(255, 255, 255, 0.7), 28vw 4vh 0 2px rgba(255, 255, 255, 0.7), 37vw 11vh 0 2px rgba(255, 255, 255, 0.7), 82vw 34vh 0 2px rgba(255, 255, 255, 0.7), 36vw 48vh 0 1px rgba(255, 255, 255, 0.7), 45vw 46vh 0 1px rgba(255, 255, 255, 0.7), 6vw 44vh 0 2px rgba(255, 255, 255, 0.7), 99vw 11vh 0 2px rgba(255, 255, 255, 0.7), 12vw 46vh 0 1px rgba(255, 255, 255, 0.7), 1vw 3vh 0 1px rgba(255, 255, 255, 0.7), 38vw 34vh 0 1px rgba(255, 255, 255, 0.7), 88vw 4vh 0 1px rgba(255, 255, 255, 0.7), 91vw 17vh 0 1px rgba(255, 255, 255, 0.7), 56vw 34vh 0 2px rgba(255, 255, 255, 0.7), 66vw 6vh 0 1px rgba(255, 255, 255, 0.7), 67vw 41vh 0 1px rgba(255, 255, 255, 0.7), 54vw 34vh 0 2px rgba(255, 255, 255, 0.7), 28vw 17vh 0 1px rgba(255, 255, 255, 0.7), 41vw 17vh 0 2px rgba(255, 255, 255, 0.7), 36vw 22vh 0 1px rgba(255, 255, 255, 0.7), 23vw 2vh 0 1px rgba(255, 255, 255, 0.7), 4vw 9vh 0 1px rgba(255, 255, 255, 0.7), 31vw 23vh 0 2px rgba(255, 255, 255, 0.7), 54vw 26vh 0 2px rgba(255, 255, 255, 0.7), 52vw 14vh 0 1px rgba(255, 255, 255, 0.7), 29vw 45vh 0 1px rgba(255, 255, 255, 0.7), 34vw 45vh 0 2px rgba(255, 255, 255, 0.7), 25vw 19vh 0 1px rgba(255, 255, 255, 0.7), 100vw 43vh 0 1px rgba(255, 255, 255, 0.7), 77vw 46vh 0 0 rgba(255, 255, 255, 0.9);
}