first commit

style.css

@@ -0,0 +1,110 @@
+@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Anta", sans-serif;
+    user-select: none;
+}
+html,body {
+    width: 100vw;
+    height: 100vh;
+}
+html {
+    background-color: #0f0f0f;
+}
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: white;
+}
+#particles-js {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    z-index: -100000;
+    border: none;
+    overflow-y: hidden;
+    top: 0;
+}
+.main {
+    color: #f0b892;
+}
+h1 {
+    font-size: 64px;
+    margin: 8px;
+}
+h2 {
+    font-size: 36px;
+    margin: 8px;
+}
+p {
+    font-size: 20px;
+}
+
+cards {
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+card {
+    backdrop-filter: blur(4px);
+    width: 30%;
+    border-radius: 8px;
+    margin: 16px;
+}
+card img {
+    width: 100%;
+    mask-image: linear-gradient(0deg,rgba(0,0,0, 0) 0%, rgba(0,0,0, 1) 30%);
+    border-radius: 8px;
+    height: 200px;
+    object-fit: cover;
+}
+.text {
+    margin: 8px;
+}
+p.text {
+    font-size: 16px;
+    height: 48px;
+}
+a {
+    color: white;
+    text-decoration: none;
+}
+.buttons {
+    display: flex;
+    width: auto;
+}
+.button {
+    padding: 8px;
+    margin: 4px;
+    align-items: center;
+    transition-duration: 0.5s;
+    border-radius: 8px;
+    backdrop-filter: blur(4px);
+    flex: 1;
+    text-align: center;
+}
+.button:hover {
+    transform: scale(1.03);
+    filter:brightness(1.1);
+}
+.selenite {
+    background-color: #5A189A66;
+    filter: drop-shadow(0px 0px 6px #5A189A66);
+}
+.ethereal {
+    background-color: #0096C766;
+    filter: drop-shadow(0px 0px 6px #0096C766);
+}
+.purple {
+    background-color: #C77DFF44;
+}
+.light-purple {
+    background-color: #b06ee360;
+}
+.blue {
+    background-color: #00B4D866;
+}