:root {
    --body-background: #1d2021;
    --nav-background: #282828;
    --nav-hover: #fbf1c7;
    --nav-link: #ebdbb2;
    --nav-active-background: #689d6a;
    --text-default: #f9f5d7;
    --title: #fabd2f;
    --subtitle: #83a598;
    --subsubtitle: #8ec07c;
    --subsubtitle-hover: #689d6a;
    --shadow: #d5c4a1;
    --button-hover: #8f3f71;
    --button: #b16286;
    --story-name: #fabd2f;
    --button-background: #3c3836;
    --border: #3c3836;
}

img {
    height: 4rem;
    width: 4rem;
}

body {
    background-color: var(--body-background);
    padding: 0;
    margin: 0;
}

section {
    padding: 0rem 1rem 1rem 1rem;
    box-sizing: border-box;
}

.navbar {
    background-color: var(--nav-background);
    overflow: hidden;
    border-radius: 0.2rem 0.2rem;
}

.navbar a {
    float: left;
    color: var(--nav-link);
    text-align: center;
    padding: 0.7rem 0.7rem;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar a:hover {
    color: var(--nav-hover);
}

.navbar a.navbar-active {
    background-color: var(--nav-active-background);
}

.hz-space {
    width: 100%;
    padding-top: 1rem;
}

.text {
    color: var(--text-default);
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.text.title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    color: var(--title);
}

.text.subtitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    color: var(--subtitle);
}

.text.subsubtitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    color: var(--subsubtitle);
}

.text.subsubtitle:hover {
    color: var(--subsubtitle-hover);
}

.text.normal {
    
}

.text.normal.bottompad {
    padding-bottom: 1rem;
}

.text.story-name {
    font-size: 2rem;
    color: var(--story-name);
}

.text.small {
    font-size: 0.8rem;
}
    
.button {
    color: var(--button);
    border-radius: 0.2rem 0.2rem;
    text-decoration: none;
}

.button:hover {
    color: var(--button-hover);
}

.indent {
    padding-left: 1rem;
}

.indent2 {
    padding-left: 2rem;
}