@import url("style_nav.css");
@import url("style_header.css");
@import url("style_aside.css");
@import url("style_css-general-text.css"); /* Setup for Text used in Text */
@import url("style_content.css"); /* 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");
@import url("style_blockquotes.css");
@import url("style_pagination.css");
@import url("style_footer.css");

/* 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: "Courier New", monospace;
  --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;
}