Configured and redid the base website structure

html/assets/mobile.css

@@ -0,0 +1,68 @@
+/*
+ * Freed.place
+ * Version 3.0
+ * Copyright (c) 2025 FreedTapestry21
+ */
+
+/* Responsive layout for mobile */
+@media (max-width: 768px) {
+    /* Menu */
+    .menu {	
+        width: 90%;
+
+        margin: auto;
+    }
+
+    .menu p {user-select: none; font-size: 20px;}
+
+    .menu a {
+        color: var(--background-color);
+        text-decoration: none; 
+    }
+
+    .menu a:hover {
+        color: var(--accent-color-dark);
+        background-color: var(--background-color);
+    }
+
+    .name {
+        text-align: center; width: 100%;
+
+        background-color: var(--accent-color);
+        color: var(--text-color);
+    }
+    .index {
+        text-align: center; width: 100%;
+
+        background-color: var(--accent-color-dark);
+        color: var(--text-color);
+    }
+
+    /* Footer */
+    .footer {	
+        background-color: var(--accent-color);
+        color: var(--background-color);
+    
+        width: 100%;
+    
+        margin: auto;
+    }
+    
+    .footer p {font-size:12px;}
+    
+    .info {text-align: center; width: 100%;}
+    
+    /* Boxes */
+    .box {
+        width: 100%;
+    
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    .item {
+        padding: 10px;
+        width: 80%;
+    }
+}

html/assets/style.css

@@ -0,0 +1,94 @@
+/*
+ * Freed.place
+ * Version 3.0
+ * Copyright (c) 2025 FreedTapestry21
+ */
+
+@font-face {
+    font-family: 'Jetbrains Mono';
+    src: local(''),
+        url('./fonts/jbmono.woff2')
+}
+
+:root {
+	--accent-color: #b4befe;
+	--accent-color-dark: #9198cd;
+    --background-color: #191724;
+}
+
+body {
+	background-color: var(--background-color);
+	color: var(--accent-color);
+	font-family: Verdana, sans-serif;
+}
+
+p {font-size: 16px;}
+h1 {font-size: 32px;}
+h2 {font-size: 28px;}
+h3 {font-size: 24px;}
+h4 {font-size: 20px;}
+
+/* Custom */
+.center {
+	display: flex;
+  	justify-content: center;
+}
+
+.img {
+	width: min(512px, 45%);
+}
+
+/* Menu */
+.menu {	
+	background-color: var(--accent-color);
+	color: var(--background-color);
+
+	width: 90%;
+
+	margin: auto;
+}
+
+.menu p {user-select: none; font-size: 20px;}
+
+.menu a {
+	color: var(--background-color);
+	text-decoration: none; 
+}
+
+.menu a:hover {
+	color: var(--accent-color);
+	background-color: var(--background-color);
+}
+
+.name {text-align: left; width: 45%;}
+.index {text-align: right; width: 45%;}
+
+/* Footer */
+.footer {	
+	background-color: var(--accent-color);
+	color: var(--background-color);
+
+	width: 90%;
+
+	margin: auto;
+}
+
+.footer p {font-size:12px;}
+
+.info {text-align: left; width: 90%;}
+
+/* Boxes */
+.box {
+	width: 100%;
+
+	display: flex;
+  	flex-direction: row;
+	justify-content: center;
+}
+
+.item {
+	padding: 10px;
+	width: 40%;
+
+	margin: auto;
+}