|
@import 'https://fonts.googleapis.com/css?family=Shrikhand'; |
|
body, |
|
html { |
|
width: 100%; |
|
height: 100%; |
|
background: radial-gradient(ellipse at center, #330a2d 0%, #0e1449 54%, #000000 100%); |
|
} |
|
|
|
#space { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
float: left; |
|
background: rgba(0, 0, 0, 0.6); |
|
} |
|
|
|
.stars { |
|
position: absolute; |
|
left: 50%; |
|
top: 23%; |
|
border-radius: 50%; |
|
box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, 1); |
|
animation: starglow1 8s ease-in-out infinite; |
|
opacity: 0; |
|
} |
|
|
|
.titleholder { |
|
position: absolute; |
|
color: white; |
|
font-family: 'Shrikhand', cursive; |
|
width: 100%; |
|
text-align: center; |
|
top: 45%; |
|
transform: translateY(-50%); |
|
height: auto; |
|
display: block; |
|
} |
|
|
|
.titleholder h1 { |
|
font-size: 50px; |
|
} |
|
|
|
.shootingstar { |
|
width: 4px; |
|
height: 4px; |
|
position: absolute; |
|
border-radius: 50%; |
|
background: rgba(255, 205, 205, 1); |
|
right: 10px; |
|
top: 10px; |
|
animation: shootingstar 5s ease-in-out infinite; |
|
transform: translate3d(0, 0, 0); |
|
opacity: 0; |
|
} |
|
|
|
@-webkit-keyframes shootingstar { |
|
0% { |
|
transform: scale(0) translate3d(0, 0, 0); |
|
opacity: 0; |
|
} |
|
25% { |
|
opacity: 1; |
|
} |
|
35% { |
|
transform: scale(1) translate3d(-800px, 800px, 0); |
|
opacity: 0; |
|
} |
|
100% { |
|
transform: translate3d(0px, 0px, 0); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@-webkit-keyframes starglow1 { |
|
0% { |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.3); |
|
transform: rotate(0deg); |
|
} |
|
19% { |
|
opacity: 1; |
|
} |
|
20% { |
|
opacity: 0.7; |
|
} |
|
21% { |
|
opacity: 1; |
|
} |
|
50% { |
|
box-shadow: 0px 0px 12px 6px rgba(255, 255, 255, 0.3); |
|
} |
|
100% { |
|
transform: rotate(360deg); |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1); |
|
} |
|
} |
|
|
|
@-webkit-keyframes starglow2 { |
|
0% { |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.3); |
|
transform: rotate(0deg); |
|
} |
|
19% { |
|
opacity: 1; |
|
} |
|
50% { |
|
box-shadow: 0px 0px 8px 3px rgba(255, 255, 255, 0.3); |
|
} |
|
69% { |
|
opacity: 1; |
|
} |
|
70% { |
|
opacity: 0.7; |
|
} |
|
71% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: rotate(360deg); |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1); |
|
} |
|
} |
|
|
|
@-webkit-keyframes starglow3 { |
|
0% { |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.3); |
|
transform: rotate(0deg); |
|
} |
|
19% { |
|
opacity: 1; |
|
} |
|
20% { |
|
opacity: 0.9; |
|
} |
|
21% { |
|
opacity: 1; |
|
} |
|
50% { |
|
box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.3); |
|
} |
|
100% { |
|
transform: rotate(360deg); |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1); |
|
} |
|
} |
|
|
|
@-webkit-keyframes starglow4 { |
|
0% { |
|
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.3); |
|
transform: rotate(0deg); |
|
} |
|
19% { |
|
opacity: 1; |
|
} |
|
50% { |
|
box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.3); |
|
} |
|
69% { |
|
opacity: 1; |
|
} |
|
70% { |
|
opacity: 0.8; |
|
} |
|
71% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: rotate(360deg); |
|
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1); |
|
} |
|
} |