init commit

assets/scss/_custom.scss

@@ -0,0 +1,65 @@
+:root {
+    --text-color: #fff;
+    --background: #383C4A;
+    --background-darker: #2E323E;
+    --background-darkest: #2A2D38;
+    --blue: #5BCEFA;
+    --pink: #F5A9B8;
+    --blurple: #7289DA;
+    --dark-blurple: #4E5D94;
+    --href: var(--blurple);
+    --href-darker: var(--dark-blurple);
+    --main-font: "OpenDyslexic2";
+}
+
+#shadow img {
+    position: relative;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15);
+    border-radius: 25px;
+}
+
+.pulse {
+    animation: pulse 1s infinite ease-in-out alternate;
+}
+
+@keyframes pulse {
+    from {
+        transform: scale(0.8);
+    }
+    to {
+        transform: scale(1.2);
+    }
+}
+
+#wordmark {
+    filter: drop-shadow(2px 2px 4px #222);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#universe .grid-container {
+    padding-top: 2px;
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#universe figure {
+    text-align: center;
+    padding: 5px;
+}
+
+#universe figcaption {
+    background-color: var(--blurple);
+}
+
+#universe figure img {
+    border-radius: 2px;
+    background-color: var(--dark-blurple);
+    padding-bottom: 0;
+    height: 475px;
+    width: 260px;
+}