:root {
    --bg: #5E4C93;
    --bg2: #1b162a;
    --text: #FFFFFF;
    --surface: #3e3261;
    --muted: #C5C1D1;
    --border: #20192a;
    --serif: Georgia, serif;
    --sans: system-ui, sans-serif;
    --nav-w: 230px;
    --nav-mobile-w: 100px;
    --font-size: 1rem;
}

.dark {
    --bg: #130e21;
    --bg2: #090710;
    --text: #FFFFFF;
    --surface: #3e3261;
    --muted: #C5C1D1;
    --border: #726684;
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(135deg, var(--bg), var(--bg2));
    margin: 0;
}

p,
span,
li,
a {
    color: var(--muted);
    line-height: 1.7;
    font-size: var(--font-size);
    font-family: var(--sans);
}

h1,
h2,
h3 {
    color: var(--text);
    font-family: var(--serif);
}

a {

    text-decoration: none;
}

* {
    box-sizing: border-box;
}