/* styles/layout.css */
:root {
  --page-min-width: 360px;
  --page-max-width: 1024px;
  --page-min-height: 600px;
  --page-max-height: 800px;
  --page-xsmall-gap: .125rem;
  --page-small-gap: .25rem;
  --page-normal-gap: .5rem;
  --page-large-gap: .75rem;
  --page-xlarge-gap: 1rem;
  --page-2xlarge-gap: 1.5rem;
  --page-3xlarge-gap: 3rem;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-width: 100vw;
  min-height: 100dvh;
  width: 100%;
  min-width: 100dvw;
  height: 100%;
}

html, body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

header {
  z-index: 9;
  width: 100%;
  top: 0;
}

@media only screen and (min-height: 700px) {
  header {
    position: sticky;
  }
}

main, footer {
  width: 100%;
}

.page-container {
  min-width: var(--page-min-width);
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
}

.header-container {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--page-large-gap);
  margin: var(--page-normal-gap) auto;
  flex-flow: row;
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--page-small-gap);
  margin-top: var(--page-2xlarge-gap);
  margin-bottom: var(--page-large-gap);
  flex-flow: column;
}

/* styles/theme.css */
:root {
  --color-neutral-d4: #1a1a1a;
  --color-neutral-d3: #333;
  --color-neutral-d2: #4d4d4d;
  --color-neutral-d1: #666;
  --color-neutral: gray;
  --color-neutral-l1: #999;
  --color-neutral-l2: #b3b3b3;
  --color-neutral-l3: #ccc;
  --color-neutral-l4: #e6e6e6;
  --color-latin-primary-d4: #290a0a;
  --color-latin-primary-d3: #521414;
  --color-latin-primary-d2: #7a1f1f;
  --color-latin-primary-d1: #a32929;
  --color-latin-primary: #c33;
  --color-latin-primary-l1: #d65c5c;
  --color-latin-primary-l2: #e08585;
  --color-latin-primary-l3: #ebadad;
  --color-latin-primary-l4: #f5d6d6;
  --color-danger: #c00;
  --primary-color-dark: #19334d;
  --primary-color-mid-dark: #2d5986;
  --primary-color: #4080bf;
  --primary-color-mid-light: #79a6d2;
  --primary-color-light: #b3cce6;
  --secondary-color-dark: #1f4733;
  --secondary-color-mid-dark: #367d59;
  --secondary-color: #4db380;
  --secondary-color-mid-light: #82c9a6;
  --secondary-color-light: #b8e0cc;
  --accent-color-dark: #471f33;
  --accent-color-mid-dark: #7d3659;
  --accent-color: #b34d80;
  --accent-color-mid-light: #c982a6;
  --accent-color-light: #e0b8cc;
  --neutral-color-dark: #2e3338;
  --neutral-color-mid-dark: #505962;
  --neutral-color: #73808c;
  --neutral-color-mid-light: #9da6af;
  --neutral-color-light: #c7ccd1;
}

* {
  text-align: inherit;
  text-wrap: inherit;
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

body {
  color: var(--color-neutral-d4);
  font-family: Trebuchet MS, Arial, sans-serif;
}

header {
  background-color: var(--color-neutral-l3);
  box-shadow: var(--color-neutral-d3) 0px 2px 8px;
}

header .logo {
  height: 2rem;
}

header .title {
  text-align: center;
  white-space: nowrap;
  font-family: Garamond, Times New Roman, serif;
  font-size: 1.25rem;
}

header .title large {
  font-size: 1.2em;
}

@media only screen and (min-width: 480px) {
  header .logo {
    height: 2.5rem;
  }

  header .title {
    font-size: 1.5rem;
  }
}

main, footer {
  background-color: var(--color-neutral-l4);
}

.footer-container .company {
  font-size: 1rem;
}

.footer-container .copyright {
  font-size: .9rem;
}

.footer-container .author {
  font-size: .9rem;
}