|
|
@@ -1,23 +1,38 @@
|
|
|
+*,
|
|
|
+::before,
|
|
|
+::after {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
body {
|
|
|
font-family: sans-serif;
|
|
|
background: #000;
|
|
|
color: #ddd;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
main {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- translate: -50% -50%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 1rem;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
+main>h1,main>p,footer>p {
|
|
|
+ max-width: 30rem;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+}
|
|
|
+
|
|
|
footer {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
- left: 50%;
|
|
|
- translate: -50%;
|
|
|
+ width: 100%;
|
|
|
font-size: .8rem;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.flash {
|
|
|
@@ -26,7 +41,9 @@ footer {
|
|
|
color: #aaa;
|
|
|
animation: flash 3s infinite;
|
|
|
}
|
|
|
+
|
|
|
@keyframes flash {
|
|
|
+
|
|
|
from,
|
|
|
50%,
|
|
|
to {
|
|
|
@@ -105,4 +122,4 @@ Credit to https://misspriyankadas.medium.com/space-travel-animation-using-html-a
|
|
|
opacity: 0;
|
|
|
transform: scale(3.5);
|
|
|
}
|
|
|
-}
|
|
|
+}
|
