:root {
  --color-primary: #1B98E0;
  --color-secondary: #006494;
  --color-text: #13293D;
  --color-background: #E8F1F2;
}

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-areas:
    "header header" /* row 1 */
    "sidebar main"  /* row 2 */
    "footer footer"; /* row 3 */
  grid-template-columns: 1fr 3fr;
  gap: 10px;   /* (optional) space between areas */
}

/* assign your elements to the areas you defined in the grid-template rule: */
header {
  grid-area: header; 
  text-align: center;
}

main {
  grid-area: main;
  text-align: center;
}

aside {
  grid-area: sidebar;
  text-align: center;
}

ul.navlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer {
  grid-area: footer; 
  text-align: center;
  background-color: var(--color-secondary);
  
}

body {
  background-color: var(--color-primary);
  color: var(--color-text);
  font-family: Verdana;
}


.card {
  background-color: var(--color-background);
  border-radius: 25px;
  border: 2px solid var(--color-secondary);
}