|
|
@@ -1,17 +1,15 @@
|
|
|
-*,
|
|
|
-::before,
|
|
|
-::after {
|
|
|
- box-sizing: border-box;
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
-body {
|
|
|
- font-family: sans-serif;
|
|
|
+.random {
|
|
|
background: #000;
|
|
|
color: #ddd;
|
|
|
- margin: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
|
|
|
-main {
|
|
|
+.random .center {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
@@ -19,23 +17,22 @@ main {
|
|
|
padding: 1rem;
|
|
|
transform: translate(-50%, -50%);
|
|
|
text-align: center;
|
|
|
+ z-index: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-main>h1,main>p,footer>p {
|
|
|
- max-width: 30rem;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
-}
|
|
|
-
|
|
|
-footer {
|
|
|
+.random .footer {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
+ padding: 0 1rem;
|
|
|
font-size: .8rem;
|
|
|
text-align: center;
|
|
|
+ z-index: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.flash {
|
|
|
+.random .flash {
|
|
|
font-weight: bolder;
|
|
|
font-size: .8rem;
|
|
|
color: #aaa;
|
|
|
@@ -60,18 +57,18 @@ footer {
|
|
|
Space Travel Animated Background
|
|
|
Credit to https://misspriyankadas.medium.com/space-travel-animation-using-html-and-css-676f4232754c
|
|
|
*/
|
|
|
-#space,
|
|
|
-.stars {
|
|
|
+.random #space,
|
|
|
+.random .stars {
|
|
|
overflow: hidden;
|
|
|
position: absolute;
|
|
|
- z-index: -1;
|
|
|
+ z-index: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
|
|
|
-.stars {
|
|
|
+.random .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)),
|
|
|
@@ -85,22 +82,22 @@ Credit to https://misspriyankadas.medium.com/space-travel-animation-using-html-a
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
-.stars:nth-child(1) {
|
|
|
+.random .stars:nth-child(1) {
|
|
|
background-position: 50% 50%;
|
|
|
animation-delay: 0s;
|
|
|
}
|
|
|
|
|
|
-.stars:nth-child(2) {
|
|
|
+.random .stars:nth-child(2) {
|
|
|
background-position: 20% 60%;
|
|
|
animation-delay: 1s;
|
|
|
}
|
|
|
|
|
|
-.stars:nth-child(3) {
|
|
|
+.random .stars:nth-child(3) {
|
|
|
background-position: -20% -30%;
|
|
|
animation-delay: 2s;
|
|
|
}
|
|
|
|
|
|
-.stars:nth-child(4) {
|
|
|
+.random .stars:nth-child(4) {
|
|
|
background-position: 40% -80%;
|
|
|
animation-delay: 3s;
|
|
|
}
|
