/* ## RESET ## */

/* ## RESET END */

/* ## BASE ## */
:root {
  --color-olive: #50533C;
  --color-gold: #d3bc8d;
  --color-military: #192924;

  --grid-body-template-columns: minmax(0, 1fr) minmax(0, 1020px) minmax(0, 1fr);
}

body {
  --bg-color: var(--color-olive);
  --text-color: var(--color-military);
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Oswald";
  font-size: var(--text-base);
}

@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald/Oswald-Regular.ttf");
}

/* ## BASE END */

/* ## FONTS ## */
:root {
  --text-base: 1.1rem;
  --text-scale-ratio: 1.2;

  --text-xs: calc(1em / var(--text-scale-ratio) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
}

@media screen and (min-width: 1024px) {
  :root {
    --text-base: 1.3rem;
  }
}

.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-md {
  font-size: var(--text-md);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-xxl {
  font-size: var(--text-xxl);
}

/* ## LAYOUT ##*/

.l-body {
  display: grid;
  gap: 20px;
  grid-template-columns: var(--grid-body-template-columns);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header" ". main ." "footer footer footer";
  height: 100vh;
}

.l-body header {
  grid-area: header;
}

.l-body main {
  grid-column: main;
  margin: 0 auto;
  width: 100%;
}

.l-body footer {
  grid-area: footer;
}

/* ## LAYOUT END */

/* ## HEADER ## */

header {
    display: flex;
    width: 100%;
}

header:first-child {
    margin-left: auto;
}

/* ## HEADER END */

/* ## HOME ## */

.logo {
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .logo {
    width: 100%;
  }
}

.logo__image {
  background-image: url("../assets/logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 43%;
  max-height: 200px;
}

.subtitle {
  font-size: var(--text-xl);
  width: 100%;
  text-align: center;
}

.intro-text {
  text-align: center;
}

/* ## HOME END */