@import url("style_nav.css"); /* Navigation Main Setup*/
@import url("style_header.css"); /* Header Setup */
@import url("style_aside.css"); /* Sidebar Setup */
@import url("style_css-general-text.css"); /* Setup for Text Styles used in Text */
@import url("style_content.css"); /* Setup general Content */
@import url("style_content-ul.css"); /* Content UL Setting*/
@import url("style_images-fig.css"); /* Figure Image and Caption */
@import url("style_blog-projects.css");/* Setup for layout of Blog- and Projectposts */
@import url("style_blockquotes.css"); /* Setup Blockquote Styles */
@import url("style_pagination.css"); /* Setup Pagination Styles */
@import url("style_footer.css"); /* Footer-Styles Setup */

/* Pre-defined Variables for ease of use */
:root {
    --mainfont: "Vollkorn", serif;
    --headfont: "Roboto", Helvetica, sans-serif;
    --specialfont: "Monoton", system-ui;
    --specialfont-2:
        "UnifrakturMaguntia", var(--specialfont-3), var(--specialfont);
    --specialfont-3: "Freckle Face", var(--specialfont-2), var(--specialfont);
    --codefont: monospace !important;
    --color-1: #efefef;
    --color-2: #00424a;
    --color-2-lt: #d4eff2;
    --footer-color-1: var(--color-2);
}

html {
    background-color: #00424a;
}

body {
    color: var(--color-1);
    font-size: 1.75rem !important;
    font-family: var(--mainfont) !important;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* General Setup HEADLINES */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headfont);
}

/* CONTENT WRAPPER */
#wrapper {
    display: grid;
    grid-auto-flow: column;
}