@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --primary: #2C3E50;
  --secondary: #96ADC5;
  --background:#F4F7F0;
  --accent: #708D81;
  --default: "Public Sans", sans-serif;
}

.container {
  display:grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 100px 200px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  background: #8ecae6;
}

.sidebar {
  grid-area: sidebar;
  background: #219ebc;
}

.main {
  grid-area: main;
  background: #023047;
  color: white;
}

.footer {
  grid-area: footer;
  background: #ffb703;
}

.nav-li {
  width: fit-content;
  padding: 1px;
}

.active-li {
  background-color: grey;
  width: fit-content;
  padding: 1px;
}