@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
  background-color: #37474F;
  color: #ECEFF1;
  font-family: Inter;
}

/* type scale: perfect fourths (1.3333) */
h1 {
  font-size: 5.61rem;
}
h2 {
  font-size: 4.209rem;
}
h3 {
  font-size: 3.157rem;
}
h4 {
  font-size: 2.369rem;
}
h5 {
  font-size: 1.777rem;
}
h6 {
  font-size: 1.333rem;
}
.small {
  font-size: 0.75rem;
}
.smallest {
  font-size: 0.563rem;
}




.layout {
  width: 100%;
  display: grid;
  grid:
    "header header header" auto
    "nav-left main-content nav-right" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
  /* gap: 8px; */
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.header { grid-area: header; }
.nav-left { grid-area: nav-left; }
.main-content { grid-area: main-content; }
.nav-right { grid-area: nav-right; }
.footer { grid-area: footer; }

.header {
  background-color: #263238;
}
.nav-left {
  background-color: #E64A19;
}
.main-content {
  background-color: #37474F;
}
.nav-right {
  background-color: #E64A19;
}
.footer {
  background-color: #263238;
}