2022-09-14 09:06:00 +00:00
|
|
|
/*
|
|
|
|
Copyright (c) 2022 by sarazond (https://codepen.io/sarazond/pen/LYGbwj)
|
|
|
|
|
2022-09-14 09:55:33 +00:00
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
|
|
this software and associated documentation files (the "Software"), to deal in
|
|
|
|
the Software without restriction, including without limitation the rights to
|
|
|
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
|
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
|
|
subject to the following conditions:
|
2022-09-14 09:06:00 +00:00
|
|
|
|
2022-09-14 09:55:33 +00:00
|
|
|
The above copyright notice and this permission notice shall be included in all
|
|
|
|
copies or substantial portions of the Software.
|
2022-09-14 09:06:00 +00:00
|
|
|
|
2022-09-14 09:55:33 +00:00
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
|
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
|
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
|
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
|
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
2022-09-14 09:06:00 +00:00
|
|
|
*/
|
2022-09-14 09:55:33 +00:00
|
|
|
|
2022-09-14 09:06:00 +00:00
|
|
|
html {
|
|
|
|
height: 100%;
|
|
|
|
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
#stars {
|
|
|
|
width: 1px;
|
|
|
|
height: 1px;
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: 138vw 82vh #FFF, 11vw 46vh #FFF, 84vw 100vh #FFF, 129vw 190vh #FFF, 66vw 104vh #FFF, 131vw 98vh #FFF, 45vw 123vh #FFF, 141vw 126vh #FFF, 100vw 78vh #FFF, 158vw 153vh #FFF, 130vw 98vh #FFF, 167vw 100vh #FFF, 66vw 175vh #FFF, 13vw 133vh #FFF, 194vw 63vh #FFF, 62vw 21vh #FFF, 127vw 18vh #FFF, 93vw 145vh #FFF, 167vw 145vh #FFF, 181vw 186vh #FFF, 159vw 194vh #FFF, 187vw 125vh #FFF, 48vw 46vh #FFF, 175vw 5vh #FFF, 132vw 45vh #FFF, 85vw 175vh #FFF, 138vw 89vh #FFF, 37vw 182vh #FFF, 112vw 180vh #FFF, 47vw 76vh #FFF, 20vw 19vh #FFF, 105vw 61vh #FFF, 179vw 97vh #FFF, 163vw 40vh #FFF, 99vw 17vh #FFF, 195vw 190vh #FFF, 39vw 7vh #FFF, 196vw 8vh #FFF, 112vw 132vh #FFF, 136vw 121vh #FFF, 174vw 59vh #FFF, 128vw 17vh #FFF, 133vw 9vh #FFF, 144vw 118vh #FFF, 54vw 132vh #FFF, 66vw 144vh #FFF, 152vw 121vh #FFF, 151vw 4vh #FFF, 89vw 85vh #FFF, 171vw 123vh #FFF, 171vw 133vh #FFF, 173vw 73vh #FFF, 193vw 9vh #FFF, 139vw 176vh #FFF, 68vw 140vh #FFF, 150vw 174vh #FFF, 17vw 86vh #FFF, 74vw 77vh #FFF, 146vw 192vh #FFF, 109vw 174vh #FFF, 185vw 51vh #FFF, 48vw 82vh #FFF, 176vw 159vh #FFF, 18vw 94vh #FFF, 37vw 121vh #FFF, 124vw 93vh #FFF, 134vw 12vh #FFF, 6vw 115vh #FFF, 116vw 171vh #FFF, 24vw 111vh #FFF, 95vw 99vh #FFF, 66vw 177vh #FFF, 5vw 104vh #FFF, 134vw 10vh #FFF, 152vw 96vh #FFF, 37vw 91vh #FFF, 52vw 69vh #FFF, 70vw 2vh #FFF, 55vw 5vh #FFF, 74vw 184vh #FFF, 66vw 38vh #FFF, 175vw 31vh #FFF, 53vw 47vh #FFF, 28vw 12vh #FFF, 67vw 120vh #FFF, 120vw 146vh #FFF, 144vw 125vh #FFF, 7vw 79vh #FFF, 77vw 112vh #FFF, 142vw 129vh #FFF, 175vw 42vh #FFF, 153vw 3vh #FFF, 39vw 122vh #FFF, 28vw 47vh #FFF, 134vw 47vh #FFF, 164vw 119vh #FFF, 42vw 38vh #FFF, 19vw 120vh #FFF, 143vw 154vh #FFF, 37vw 127vh #FFF;
|
|
|
|
animation: animStar 50s linear infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
#stars:after {
|
|
|
|
content: " ";
|
|
|
|
position: absolute;
|
|
|
|
top: 2000px;
|
|
|
|
width: 1px;
|
|
|
|
height: 1px;
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: 138vw 82vh #FFF, 11vw 46vh #FFF, 84vw 100vh #FFF, 129vw 190vh #FFF, 66vw 104vh #FFF, 131vw 98vh #FFF, 45vw 123vh #FFF, 141vw 126vh #FFF, 100vw 78vh #FFF, 158vw 153vh #FFF, 130vw 98vh #FFF, 167vw 100vh #FFF, 66vw 175vh #FFF, 13vw 133vh #FFF, 194vw 63vh #FFF, 62vw 21vh #FFF, 127vw 18vh #FFF, 93vw 145vh #FFF, 167vw 145vh #FFF, 181vw 186vh #FFF, 159vw 194vh #FFF, 187vw 125vh #FFF, 48vw 46vh #FFF, 175vw 5vh #FFF, 132vw 45vh #FFF, 85vw 175vh #FFF, 138vw 89vh #FFF, 37vw 182vh #FFF, 112vw 180vh #FFF, 47vw 76vh #FFF, 20vw 19vh #FFF, 105vw 61vh #FFF, 179vw 97vh #FFF, 163vw 40vh #FFF, 99vw 17vh #FFF, 195vw 190vh #FFF, 39vw 7vh #FFF, 196vw 8vh #FFF, 112vw 132vh #FFF, 136vw 121vh #FFF, 174vw 59vh #FFF, 128vw 17vh #FFF, 133vw 9vh #FFF, 144vw 118vh #FFF, 54vw 132vh #FFF, 66vw 144vh #FFF, 152vw 121vh #FFF, 151vw 4vh #FFF, 89vw 85vh #FFF, 171vw 123vh #FFF, 171vw 133vh #FFF, 173vw 73vh #FFF, 193vw 9vh #FFF, 139vw 176vh #FFF, 68vw 140vh #FFF, 150vw 174vh #FFF, 17vw 86vh #FFF, 74vw 77vh #FFF, 146vw 192vh #FFF, 109vw 174vh #FFF, 185vw 51vh #FFF, 48vw 82vh #FFF, 176vw 159vh #FFF, 18vw 94vh #FFF, 37vw 121vh #FFF, 124vw 93vh #FFF, 134vw 12vh #FFF, 6vw 115vh #FFF, 116vw 171vh #FFF, 24vw 111vh #FFF, 95vw 99vh #FFF, 66vw 177vh #FFF, 5vw 104vh #FFF, 134vw 10vh #FFF, 152vw 96vh #FFF, 37vw 91vh #FFF, 52vw 69vh #FFF, 70vw 2vh #FFF, 55vw 5vh #FFF, 74vw 184vh #FFF, 66vw 38vh #FFF, 175vw 31vh #FFF, 53vw 47vh #FFF, 28vw 12vh #FFF, 67vw 120vh #FFF, 120vw 146vh #FFF, 144vw 125vh #FFF, 7vw 79vh #FFF, 77vw 112vh #FFF, 142vw 129vh #FFF, 175vw 42vh #FFF, 153vw 3vh #FFF, 39vw 122vh #FFF, 28vw 47vh #FFF, 134vw 47vh #FFF, 164vw 119vh #FFF, 42vw 38vh #FFF, 19vw 120vh #FFF, 143vw 154vh #FFF, 37vw 127vh #FFF;
|
|
|
|
}
|
|
|
|
|
|
|
|
#stars2 {
|
|
|
|
width: 2px;
|
|
|
|
height: 2px;
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: 15vw 70vh #FFF, 128vw 67vh #FFF, 181vw 150vh #FFF, 42vw 58vh #FFF, 160vw 128vh #FFF, 148vw 51vh #FFF, 79vw 186vh #FFF, 47vw 37vh #FFF, 200vw 25vh #FFF, 128vw 6vh #FFF, 149vw 15vh #FFF, 55vw 127vh #FFF, 139vw 99vh #FFF, 86vw 197vh #FFF, 131vw 189vh #FFF, 131vw 20vh #FFF, 83vw 196vh #FFF, 35vw 60vh #FFF, 57vw 152vh #FFF, 124vw 6vh #FFF, 9vw 39vh #FFF, 132vw 109vh #FFF, 124vw 123vh #FFF, 176vw 96vh #FFF, 27vw 147vh #FFF, 57vw 106vh #FFF, 59vw 53vh #FFF, 177vw 65vh #FFF, 126vw 168vh #FFF, 174vw 152vh #FFF, 102vw 45vh #FFF, 29vw 188vh #FFF, 125vw 42vh #FFF, 184vw 154vh #FFF, 199vw 75vh #FFF, 165vw 108vh #FFF, 29vw 10vh #FFF, 190vw 185vh #FFF, 20vw 73vh #FFF, 179vw 117vh #FFF, 44vw 95vh #FFF, 26vw 191vh #FFF, 170vw 32vh #FFF, 34vw 120vh #FFF, 126vw 187vh #FFF, 49vw 121vh #FFF, 156vw 122vh #FFF, 80vw 188vh #FFF, 107vw 75vh #FFF, 60vw 195vh #FFF;
|
|
|
|
animation: animStar 100s linear infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
#stars2:after {
|
|
|
|
content: " ";
|
|
|
|
position: absolute;
|
|
|
|
top: 2000px;
|
|
|
|
width: 2px;
|
|
|
|
height: 2px;
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: 15vw 70vh #FFF, 128vw 67vh #FFF, 181vw 150vh #FFF, 42vw 58vh #FFF, 160vw 128vh #FFF, 148vw 51vh #FFF, 79vw 186vh #FFF, 47vw 37vh #FFF, 200vw 25vh #FFF, 128vw 6vh #FFF, 149vw 15vh #FFF, 55vw 127vh #FFF, 139vw 99vh #FFF, 86vw 197vh #FFF, 131vw 189vh #FFF, 131vw 20vh #FFF, 83vw 196vh #FFF, 35vw 60vh #FFF, 57vw 152vh #FFF, 124vw 6vh #FFF, 9vw 39vh #FFF, 132vw 109vh #FFF, 124vw 123vh #FFF, 176vw 96vh #FFF, 27vw 147vh #FFF, 57vw 106vh #FFF, 59vw 53vh #FFF, 177vw 65vh #FFF, 126vw 168vh #FFF, 174vw 152vh #FFF, 102vw 45vh #FFF, 29vw 188vh #FFF, 125vw 42vh #FFF, 184vw 154vh #FFF, 199vw 75vh #FFF, 165vw 108vh #FFF, 29vw 10vh #FFF, 190vw 185vh #FFF, 20vw 73vh #FFF, 179vw 117vh #FFF, 44vw 95vh #FFF, 26vw 191vh #FFF, 170vw 32vh #FFF, 34vw 120vh #FFF, 126vw 187vh #FFF, 49vw 121vh #FFF, 156vw 122vh #FFF, 80vw 188vh #FFF, 107vw 75vh #FFF, 60vw 195vh #FFF;
|
|
|
|
}
|
|
|
|
|
|
|
|
#stars3 {
|
|
|
|
width: 3px;
|
|
|
|
height: 3px;
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: 144vw 104vh #FFF, 12vw 50vh #FFF, 28vw 153vh #FFF, 175vw 134vh #FFF, 82vw 112vh #FFF, 177vw 200vh #FFF, 45vw 154vh #FFF, 5vw 39vh #FFF, 82vw 59vh #FFF, 153vw 100vh #FFF;
|
|
|
|
animation: animStar 150s linear infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
#stars3:after {
|
|
|
|
content: " ";
|
|
|
|
position: absolute;
|
|
|
|
top: 2000px;
|
|
|
|
width: 3px;
|
|
|
|
height: 3px;
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: 144vw 104vh #FFF, 12vw 50vh #FFF, 28vw 153vh #FFF, 175vw 134vh #FFF, 82vw 112vh #FFF, 177vw 200vh #FFF, 45vw 154vh #FFF, 5vw 39vh #FFF, 82vw 59vh #FFF, 153vw 100vh #FFF;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes animStar {
|
|
|
|
from {
|
|
|
|
transform: translateY(0px);
|
|
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
|
|
transform: translateY(-2000px);
|
|
|
|
}
|
|
|
|
}
|