-
Arcaena — The Silent Flame
-
- Drop Arcaena’s backstory here. Her elven grace, her path, her hidden heart.
-
-
- - Race: Elf
- - Class: ???
- - Alignment: ???
-
+
+
-
+
+
+
+
Arcaena — The Silent Flame
+
+ Arcaena is a short 1.5m tall elf with a slender build.
+ Her vibe is empty, mysterious, and a bit eerie.
+ She reads books out of habit, not passion.
+ Usually just wanders into situations, and then asks herself "Why am I in this mess?"
+
+ Incredibly intelligent and useful, but non talkative, never eager and just plain weird.
+
+
+
+ - Race: Elf
+ - Class: Wizard
+ - Alignment: Chaotic neutral.
+
+
+
+

+
+
+
+
diff --git a/style.css b/style.css
index 9367198..afb77e9 100644
--- a/style.css
+++ b/style.css
@@ -1,126 +1,149 @@
+/* Global */
body {
- font-family: 'Georgia', serif;
- margin: 0;
- background: #0d0d0d;
- color: #eee;
- line-height: 1.6;
+ font-family: 'Georgia', serif;
+ margin: 0;
+ background: #0d0d0d;
+ color: #eee;
+ line-height: 1.6;
+}
+
+h1, h2 {
+ font-family: 'Cinzel', serif;
+ margin: 0.5em 0;
}
header {
- background: #222;
- padding: 1em;
- text-align: center;
- position: sticky;
- top: 0;
- z-index: 1000;
+ background: #222;
+ padding: 1em;
+ text-align: center;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
}
nav a {
- color: #ffcc66;
- margin: 0 1em;
- text-decoration: none;
+ color: #ffcc66;
+ margin: 0 0.8em;
+ text-decoration: none;
}
nav a:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
.intro {
- text-align: center;
- padding: 3em 1em;
- background: #111;
+ text-align: center;
+ padding: 3em 1em;
+ background: #111;
}
+/* Character Sections */
.character {
- display: flex;
- align-items: flex-start;
- padding: 3em 2em;
- border-bottom: 1px solid #333;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding: 3em 1em;
+ gap: 2em;
+ border-bottom: 1px solid #333;
}
-.character img {
- width: 250px;
- margin-right: 2em;
- border-radius: 8px;
- box-shadow: 0 0 10px rgba(0,0,0,0.7);
+.char-text {
+ flex: 1 1 300px;
+ max-width: 500px;
}
-.character.alt {
- flex-direction: row-reverse;
- background: #1a1a1a;
+.char-img img {
+ width: 100%;
+ max-width: 300px;
+ border-radius: 8px;
+ box-shadow: 0 0 12px rgba(0,0,0,0.7);
}
-.character.alt img {
- margin-right: 0;
- margin-left: 2em;
+/* 🌿 Ulud — Turtle Druid */
+#ulud {
+ background: linear-gradient(135deg, #030504, #0c2216);
}
+#ulud h2 {
+ color: #4de68a;
+}
+
+#ulud ul li strong {
+ color: #39c16d;
+}
+
+/* 🌌 Arcaena — Wizard Elf */
+#arcaena {
+ background: linear-gradient(135deg, #030303, #1a233f);
+}
+
+#arcaena h2 {
+ color: #6da7ff;
+}
+
+#arcaena ul li strong {
+ color: #3e72d9;
+}
+
+/* Gallery */
.gallery {
- padding: 3em 2em;
- text-align: center;
+ padding: 3em 1em;
+ text-align: center;
}
.gallery .grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
- gap: 1em;
- margin-top: 1.5em;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1em;
+ margin-top: 2em;
}
.gallery img {
- width: 100%;
- border-radius: 8px;
- box-shadow: 0 0 10px rgba(0,0,0,0.7);
+ width: 100%;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
+/* Footer */
footer {
- text-align: center;
- padding: 1em;
- background: #111;
- font-size: 0.9em;
+ text-align: center;
+ padding: 1em;
+ background: #111;
+ font-size: 0.9em;
}
-/* 📱 RESPONSIVE TWEAKS */
+/* Responsive Tweaks */
@media (max-width: 768px) {
- .character {
- flex-direction: column;
- text-align: center;
- }
+ nav a {
+ display: inline-block;
+ margin: 0.5em;
+ }
- .character img {
- margin: 0 0 1.5em 0;
- width: 70%;
- max-width: 300px;
- }
+ .character {
+ flex-direction: column;
+ text-align: center;
+ }
- .character.alt {
- flex-direction: column;
- }
-
- .character.alt img {
- margin: 0 0 1.5em 0;
- }
-
- nav a {
- display: inline-block;
- margin: 0.5em;
- }
+ .char-img img {
+ max-width: 250px;
+ }
}
@media (max-width: 480px) {
- body {
- font-size: 0.95em;
- }
+ body {
+ font-size: 0.95em;
+ }
- h1 {
- font-size: 1.5em;
- }
+ h1 {
+ font-size: 1.6em;
+ }
- h2 {
- font-size: 1.2em;
- }
+ h2 {
+ font-size: 1.2em;
+ }
- nav a {
- font-size: 0.9em;
- }
+ nav a {
+ font-size: 0.9em;
+ }
}