@import url(/styles/defaults.css);
@import url(/styles/utility-classes.css);
@import url(/styles/leftbox/base.css);
/* ^ allows generic.css to be used on its own */


:root {
    --page_color-main: ;
    --page_color-accent: ;
    --page_color-text-main: var(--global_color-text-main);
    --page_color-text-accent: var(--global_color-text-accent);
    --page_tile: ;
    --page_font: ;
    --page_color-foreground: ;
}
 

body {
    background-color: var(--page_color-main);
    background-image: var(--page_tile);
    font-family: var(--page_font);
    color: var(--page_color-foreground);
}

.basebox-bg.basebox-theme-default {
	background-color: var(--global_color-background);
	border-color: var(--page_color-main);
	outline-color: var(--global_color-background);
}

.heartpoint {
    color: var(--page_color-main);
}

.note-attention {
    color: var(--page_color-text-accent);
}

a {
    color: var(--page_color-text-main);
    &:hover {
        color: var(--page_color-text-accent);
    }
} 

h1 {
    letter-spacing: 0.1rem;
    font-style: italic;
    text-transform: uppercase;
}

h2, h3, h4, h5, h6 {
    margin-block: 0.5rem;
}

.section {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

img {
    border-width: 0.05rem;
    border-style: solid;
    border-color: var(--page_color-foreground);

    max-width: 30rem;
    max-height: 30rem;
}

.header {
    margin-bottom: 0.5rem;
    
    .title {
        display: inline-block;
    }
    .date {
        font-size: 0.8rem;
    }
}

.footer {
    margin-top: 1rem;
    .date {
        display: block;
        margin-top: 0.25em;
        font-size: 0.8rem;
    }
}