Create moeta.css

assets/css/moeta.css

@@ -0,0 +1,205 @@
+@charset "UTF-8";
+
+@font-face {
+    font-family: "System Font";
+    src: url("https://venith.net/assets/fonts/SFUIRounded.woff") format('woff');
+}
+*, a, button, body {cursor:url('https://venith.net/assets/images/cursor.png'), auto!important;}
+:root {
+    --genwidth: 850px;
+    --navwidth: 175px;
+    --fg: #ddd;
+    --altfg: #ccc;
+    --fgemph: white;
+    --bg: #111;
+    --altbg: #333;
+    --emph: #333;
+    --bordercolor: #555;
+    --limish: #0e0;
+}
+
+body {
+    font-family: "System Font";
+    background: linear-gradient(indigo, darkslategray) fixed;
+    background: #100;
+    margin-bottom: 100px;
+    font-weight: 300;
+    color: #fff;
+    padding: 1.5em;
+    max-width: 100%;
+    background: url(https://venith.net/assets/images/bg.gif) center center/cover fixed no-repeat;
+}
+
+html, body {
+    height: 100%;
+}
+
+a {
+    color: #EE4B2B;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #fff;
+}
+
+h1, h2, h3 {
+    font-weight: lighter;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 1em;
+}
+
+header .moeta-name {
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.5);
+    display: inline-block;
+    width: 100%;
+    max-width: 850px;
+}
+
+.moeta-name h1 {
+    margin-bottom: 0;
+}
+
+.moeta-name p {
+    opacity: 0.6;
+    font-size: 0.875em;
+}
+
+main {
+    padding: 1.5em;
+    margin-bottom: 2em;
+    background: rgba(0, 0, 0, 0.5);
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+main h2 {
+    position: relative;
+    margin-top: 3em;
+}
+
+main h2:before {
+    content: '';
+    height: 100%;
+    width: 0.5rem;
+    left: -1.5rem;
+    background: #EE4B2B;
+    position: absolute;
+}
+
+main h2:first-child {
+    margin-top: 0;
+}
+
+footer {
+    padding: 1em;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+/* Modernized Navigation Styling */
+nav {
+    background-color: #222;
+    border-bottom: 1px solid #444;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    justify-content: center; /* Ensures horizontal alignment */
+    flex-wrap: wrap; /* Allows wrapping on smaller screens */
+}
+
+nav li {
+    margin: 0 15px;
+}
+
+nav a {
+    display: block;
+    color: #fff;
+    padding: 14px 16px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    border-radius: 4px;
+}
+
+nav a:hover {
+    background-color: #EE4B2B;
+    color: #fff;
+}
+
+/* Responsive adjustments for smaller screens */
+@media screen and (max-width: 768px) {
+    body {
+        padding: 0;
+        max-width: 100%;
+        float: none;
+        margin-bottom: 0;
+    }
+
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: auto;
+    }
+
+    header .moeta-name {
+        padding: 1.5em;
+        text-align: center;
+        max-width: 100%;
+    }
+
+    main {
+        padding: 1em;
+        margin-bottom: 1em;
+    }
+
+    nav ul {
+        flex-wrap: wrap; /* Allows wrapping for smaller devices */
+    }
+
+    nav li {
+        margin: 10px 5px; /* Reduced margin to fit on smaller screens */
+    }
+
+    nav a {
+        padding: 10px 12px;
+        text-align: center;
+    }
+}
+
+/* For larger screens like desktops */
+@media screen and (min-width: 1024px) {
+    body {
+        max-width: 70%;
+        margin: 0 auto;
+        padding: 2em;
+    }
+
+    header {
+        margin-bottom: 2em;
+    }
+
+    main {
+        padding: 2em;
+        margin-bottom: 3em;
+    }
+
+    nav ul {
+        justify-content: center;
+    }
+}