:root {}

/* 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;
    background-color: var(--bg-color);
    color: var(--text-color);
}

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


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


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;
}

noscript {
    display: block;
}

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

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

a:visited {
  color: --text-color;
  text-decoration: underline var(--highlight-color);
}

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

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

article {
    background-color: var(--article-color);
    width: 90vw;
    margin-bottom: 1rem;
}

nav {
    width: 70vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}

footer {
    display: flex;
    position: sticky;
    top: 100vh;
    width: 90vw;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
fieldset {
    border-color: var(--bg-color);
    padding: 5px;
}

legend {
    font-weight: 700;
    font-size: large;
}

/* ---------------- 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);
}