241 lines
4.2 KiB
CSS
241 lines
4.2 KiB
CSS
:root {
|
|
--lightBlue: #9ae7c9;
|
|
--pink: #ff99a9;
|
|
--black: #17111a;
|
|
--red: #d04153;
|
|
--brighterGreen: #d5f66e;
|
|
--offWhite: #dfcbbf;
|
|
--filterColor: rgba(241, 139, 105, 0.15);
|
|
}
|
|
|
|
footer,
|
|
footer a {
|
|
position: absolute;
|
|
top: 2%;
|
|
right: 2%;
|
|
z-index: 200;
|
|
color: var(--pink);
|
|
}
|
|
|
|
.image {
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.field1 {
|
|
z-index: -2;
|
|
width: 101%;
|
|
height: 100%;
|
|
background-image: url(../media/images/field.svg);
|
|
background-attachment: scroll;
|
|
background-repeat: repeat-x;
|
|
background-size: 75% auto;
|
|
filter: drop-shadow(0 -15px 50px var(--brighterGreen));
|
|
animation: dandelionField 25s infinite alternate forwards;
|
|
}
|
|
|
|
.mountain {
|
|
z-index: -3;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../media/images/mountain.svg);
|
|
background-repeat: repeat-x;
|
|
background-size: 75% auto;
|
|
filter: drop-shadow(0 -15px 50px var(--pink));
|
|
animation: dandelionField 50s infinite alternate-reverse forwards;
|
|
}
|
|
|
|
.dandelionSeed {
|
|
z-index: -2;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: -50% -50%;
|
|
background-image: url(../media/images/dandelion_seed.svg);
|
|
background-repeat: repeat;
|
|
background-size: 576px auto;
|
|
filter: drop-shadow(0 0 25px var(--offWhite));
|
|
animation: dandelionSeed 50s infinite linear forwards;
|
|
}
|
|
|
|
.star1 {
|
|
z-index: -6;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../media/images/stars.svg);
|
|
background-repeat: repeat;
|
|
background-size: 576px auto;
|
|
animation: star1 24s infinite linear forwards;
|
|
}
|
|
|
|
.staticPlanet {
|
|
width: 100%;
|
|
height: auto;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
filter: drop-shadow(0 -15px 50px #c766b2);
|
|
}
|
|
|
|
.scanlines {
|
|
position: absolute;
|
|
z-index: 98;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 0.1;
|
|
background-image: url(../media/images/scanline.svg);
|
|
background-repeat: repeat;
|
|
background-size: 100% 0.5%;
|
|
|
|
animation: moveBGDown 50s infinite linear;
|
|
}
|
|
.brightLine {
|
|
position: absolute;
|
|
z-index: 97;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 0.5;
|
|
background-image: url(../media/images/brightline.svg);
|
|
background-repeat: repeat-x;
|
|
background-size: 100% 3%;
|
|
filter: drop-shadow(0 10px 15px var(--lightBlue));
|
|
|
|
animation: moveBGDown 50s infinite linear;
|
|
}
|
|
|
|
.outerGradient {
|
|
z-index: 100;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: radial-gradient(circle, var(--filterColor) 70%, var(--black) 95%);
|
|
}
|
|
|
|
.grain {
|
|
z-index: 95;
|
|
height: 300%;
|
|
left: -50%;
|
|
opacity: 0.6;
|
|
position: fixed;
|
|
top: -100%;
|
|
width: 300%;
|
|
opacity: 0.05;
|
|
background-size: 2048px auto;
|
|
background-image: url(../media/images/noise.png);
|
|
animation: grain 8s steps(10) infinite;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: black;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--black);
|
|
}
|
|
|
|
.image {
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image * {
|
|
user-select: none;
|
|
position: absolute;
|
|
vertical-align: middle;
|
|
padding: 0;
|
|
margin: 0;
|
|
align-self: center;
|
|
}
|
|
|
|
@keyframes moveBGDown {
|
|
0% {
|
|
background-position: 0% 0%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes moveBGRight {
|
|
0% {
|
|
background-position: 0% 0%;
|
|
}
|
|
100% {
|
|
background-position: 100% 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes dandelionSeed {
|
|
0% {
|
|
background-position: 0px 0px;
|
|
}
|
|
100% {
|
|
background-position: 576px -1152px;
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes dandelionField {
|
|
0% {
|
|
background-position: 100% 95%;
|
|
}
|
|
|
|
100% {
|
|
background-position: -100% 103%;
|
|
}
|
|
}
|
|
|
|
@keyframes grain {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
10% {
|
|
transform: translate(-5%, -10%);
|
|
}
|
|
20% {
|
|
transform: translate(-15%, 5%);
|
|
}
|
|
30% {
|
|
transform: translate(7%, -25%);
|
|
}
|
|
40% {
|
|
transform: translate(-5%, 25%);
|
|
}
|
|
50% {
|
|
transform: translate(-15%, 10%);
|
|
}
|
|
60% {
|
|
transform: translate(15%, 0%);
|
|
}
|
|
70% {
|
|
transform: translate(0%, 15%);
|
|
}
|
|
80% {
|
|
transform: translate(3%, 35%);
|
|
}
|
|
90% {
|
|
transform: translate(-10%, 10%);
|
|
}
|
|
}
|
|
@keyframes star1 {
|
|
0% {
|
|
background-position: 576px 0;
|
|
filter: drop-shadow(0 0 25px var(--offWhite));
|
|
}
|
|
|
|
50% {
|
|
filter: drop-shadow(0 0 5px var(--offWhite));
|
|
}
|
|
|
|
100% {
|
|
background-position: 0px 0;
|
|
filter: drop-shadow(0 0 25px var(--offWhite));
|
|
}
|
|
}
|