* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;

  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --spacing: 1rem;

  --max-width: 1200px;

  --color-primary: #f0f0f8;

  --color-header: #fff;
  --color-text: navy;

  --font-base-body-px: 16px;
  --font-base-size: 1rem;
  --font-family-base: Georgia, serif;

  --gutter: 30px;
  --offset: 20px;
}

body {
  color: var(--color-text);
  font-size: var(--font-base-body-px);
  line-height: 1.5;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  background-color: #f2f3f4;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

main {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  gap: var(--spacing);

  margin: 0 auto;
  min-height: 20vh;
  width: calc(100% - (2 * var(--offset)));
  max-width: var(--max-width);
}

main .content {
  align-self: baseline;
  text-align: center;
  font-size: 1.25rem;
}

header {
  display: flex;
  flex-direction: column;
  position: relative;

  min-height: 40vh;
  width: 100%;
  color: var(--color-text);
}

header .content {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto 0;
  padding: var(--spacing);

  text-align: center;
}

footer {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  gap: var(--spacing);

  margin: 0 auto;
  min-height: 20vh;
  width: calc(100% - (2 * var(--offset)));
  max-width: var(--max-width);
  text-align: end;
  align-items: end;
}

@media (min-width: 800px) {
  header .content {
    font-size: 1.5rem;
  }

  main .content {
    font-size: 1.5rem;
  }

  footer .content {
    font-size: 0.8rem;
  }
}