|
|
@@ -0,0 +1,108 @@
|
|
|
+body {
|
|
|
+ font-family: sans-serif;
|
|
|
+ background: #000;
|
|
|
+ color: #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+main {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ translate: -50% -50%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ translate: -50%;
|
|
|
+ font-size: .8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.flash {
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: .8rem;
|
|
|
+ color: #aaa;
|
|
|
+ animation: flash 3s infinite;
|
|
|
+}
|
|
|
+@keyframes flash {
|
|
|
+ from,
|
|
|
+ 50%,
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 25%,
|
|
|
+ 75% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+Space Travel Animated Background
|
|
|
+Credit to https://misspriyankadas.medium.com/space-travel-animation-using-html-and-css-676f4232754c
|
|
|
+*/
|
|
|
+#space,
|
|
|
+.stars {
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.stars {
|
|
|
+ background-image:
|
|
|
+ radial-gradient(2px 2px at 20px 30px, #eee, rgba(0, 0, 0, 0)),
|
|
|
+ radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
|
|
|
+ radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0, 0, 0, 0)),
|
|
|
+ radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
|
|
|
+ radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
|
|
|
+ radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0, 0, 0, 0));
|
|
|
+ background-repeat: repeat;
|
|
|
+ background-size: 200px 200px;
|
|
|
+ animation: zoom 4s infinite;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.stars:nth-child(1) {
|
|
|
+ background-position: 50% 50%;
|
|
|
+ animation-delay: 0s;
|
|
|
+}
|
|
|
+
|
|
|
+.stars:nth-child(2) {
|
|
|
+ background-position: 20% 60%;
|
|
|
+ animation-delay: 1s;
|
|
|
+}
|
|
|
+
|
|
|
+.stars:nth-child(3) {
|
|
|
+ background-position: -20% -30%;
|
|
|
+ animation-delay: 2s;
|
|
|
+}
|
|
|
+
|
|
|
+.stars:nth-child(4) {
|
|
|
+ background-position: 40% -80%;
|
|
|
+ animation-delay: 3s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes zoom {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.5);
|
|
|
+ animation-timing-function: ease-in;
|
|
|
+ }
|
|
|
+
|
|
|
+ 85% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(2.8);
|
|
|
+ animation-timing-function: linear;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(3.5);
|
|
|
+ }
|
|
|
+}
|
