:root {
    --version: "0.0.1";
    --author: "Lonaasan (https://lona.moe)";
}

/* if we ever need it, its there :3 */
html {
    scroll-behavior: smooth;
}

/* get the body in shape nya~ */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    max-width: 100vw;
    text-decoration: none;
    color: var(--text-color);

    background: radial-gradient(circle at bottom left, var(--bg-color) 0, var(--bg-color-2) 100%);
}


* {
    margin: 0;
    padding: 0;
    font-family: "Quantico", monospace, sans-serif;
    font-weight: normal;
    font-style: normal;
    list-style: none;
}


/* ---------------- Text formatting ---------------- */

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.85rem;
}

h6 {
    font-size: 0.7rem;
}


b,
strong,
.bold {
    font-weight: bold;

}

i,
em,
.italic {
    font-style: italic;
}

i b,
i strong,
em b,
em strong,
b i,
strong i,
b em,
strong em,
.bolditalic {
    font-weight: bold;
    font-style: italic;
}

blockquote {
    /* h2 */
    font-size: 1.5rem;
}

a {
    font-weight: bold;
    text-decoration: dotted underline;
    color: var(--highlight-color);
}

a:hover {
    font-weight: bold;
    color: var(--text-color);
    background-color: var(--highlight-color);
    transition-duration: 0.5s;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 1rem;
    overflow-x: auto;
}

code {
    display: block;
    word-break: break-all;
}


/* ---------------- Overwrites ---------------- */


.default-text {
    color: unset;
    text-decoration: unset;
    font-weight: unset;
}

.default-text:hover {
    color: unset;
    text-decoration: unset;
    font-weight: unset;
    background-color: unset;
}

/* ---------------- Highlighting ---------------- */


::selection {
    background: var(--highlight-color);
    color: var(--text-color);
}

.highlight-bg::selection,
.highlight-bg ::selection {
    background: var(--text-color);
    color: var(--bg-color);
}

.highlight-text {
    color: var(--highlight-color);
}

.highlight-bg {
    background-color: var(--highlight-color);
}

.highlight-bg-15 {
    background-color: rgba(var(--highlight-color-rgb), 0.15);
}

.default-bg {
    background-color: var(--bg-color);
}