@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import "./profile.css";
@import "./questLog.css";
@import "./skills.css";
@import "./links.css";
@import "./reset.css";

body {
    display: grid;
    grid-template-rows: repeat(4, min-content);
    gap: 62px;
    min-height: 100svh;
    min-width: 381px;
    place-items: center;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
}

.mainText {
    font-family: "Quicksand", sans-serif;
    color: white;
}

:root {
    /* Colors */
    --color-background: #050814; /* Midnight Void */
    --color-surface: #1c0e2d; /* Deep Gothic Purple */
    --color-primary: #ff007f; /* Vibrant Pink (Active/Interactive) */
    --color-accent: #00ffff; /* Cyan (Magical Particles/Highlights) */
    --color-secondary: #d902ee; /* Arcane Magenta */
    --color-text: #f0f2ff; /* Starlight White */
    --color-muted: #6b5b95; /* Dusk Purple (Secondary Text) */

    /* Fonts */
    --font-heading: "Cinzel Decorative", serif;
    --font-body: "Crimson Pro", serif;
    --font-mono: "Space Mono", monospace;

    /* Effects */
    --glow-primary: 0 0 15px rgba(255, 0, 127, 0.6);
    --glow-accent: 0 0 15px rgba(0, 255, 255, 0.4);
    --radius: 12px;
    --transition-speed: 0.3s;

    scrollbar-width: thin;
    scrollbar-color: lch(from var(--color-muted) l c h / 0.6) transparent;
    scrollbar-gutter: stable;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
}