/* Custom font */
@font-face {
    font-family: AdwaitaMono;
    src: url(./fonts/AdwaitaMono-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: AdwaitaMono;
    src: url(./fonts/AdwaitaMono-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: AdwaitaMono;
    src: url(./fonts/AdwaitaMono-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: AdwaitaMono;
    src: url(./fonts/AdwaitaMono-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}


/* Overall page */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    min-height: 100%;
    margin: 0 1ch;

    /* Site colors */
    --text-color: oklch(0.85 0.03 95);
    --box-background-color: oklch(0.57 0.13 50);
    --gradient-top-color: oklch(0.68 0.07 105);
    --gradient-bottom-color: oklch(0.45 0.06 110);
}

body {
    font-family: AdwaitaMono;
    /* font-size: 18px; */
    line-height: 1.5;
    max-width: 102ch;
    margin: 4lh auto;
    color: var(--text-color);
    background: linear-gradient(in oklch 180deg, var(--gradient-top-color) 0.0%, var(--gradient-bottom-color) 100.0%);
}


/* Custom styling for the section boxes and labels */
.box {
    outline: 2px solid;
    margin-bottom: 1lh;
    padding: 0 2ch 1lh 2ch;
    background-color: var(--box-background-color);

    > p:first-child {
        width: fit-content;
        outline: 2px solid;
        margin: 0;
        margin-bottom: 1lh;
        padding: 0 2ch;
        font-weight: bold;
    }
}


/* Section box styling */
#navlist {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#content {
    display: flex;
    gap: 2ch;
}

#sidebar {
    width: 20ch;
}

main {
    width: 80ch;
}


/* Typography (fancy word webdev nuts use. i just means headers and things) */
h1, h2, h3, h4, h5, h6 {
    /* font-size: 1lh; */
    width: fit-content;
}

p {
    width: fit-content;
}


/* Links */
a {
    color: var(--text-color);
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}