:root{
  --background-color-dark:rgb(16, 18, 24);
  --background-color-light:rgb(23, 24, 31);
  --border:1px solid rgb(69, 72, 93);
  --color-dark:rgb(173, 175, 184);
  --color-light:rgb(230, 232, 240);
  --color-link:rgb(126, 170, 255);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background-color:var(--background-color-dark);font-family:"Google Sans", Arial, sans-serif;-webkit-font-smoothing:antialiased}

/* Header */
header{align-items:center;border-bottom:1px solid rgb(45, 47, 53);display:flex;justify-content:space-between;height:88px;line-height:88px;padding:0 4rem;width:100%}
#header-logo{color:var(--color-dark);font-size:1.5rem;font-weight:700;text-decoration:none}
#header-nav{display:flex;gap:1.5rem}
.header-nav-item{align-items:center;color:var(--color-dark);display:flex;font-size:0.875rem;gap:0.5rem;white-space:nowrap}
.header-nav-item a{color:var(--color-dark);text-decoration:none}
.header-nav-item a.active{color:rgb(49,50,56)}
.header-nav-item a:hover{color:rgb(37,38,46)}

/* Default layout with 2 columns: Fixed width navigation on the left + Flexible width content on the right */
#layout{display:grid;grid-template-columns:269px 1fr}

/* Main (page container) */
main{margin:0 auto;width:100%}

/* Navigation */
#nav-container{background-color:var(--background-color-light);height:100%}
nav{height:fit-content;padding:2rem;position:sticky;top:2rem}
nav h3{color:var(--color-dark);font-size:1.25rem;margin-bottom:1rem}
nav a{align-items:center;color:var(--color-dark);display:flex;font-size:0.95rem;justify-content:space-between;padding:0.5rem 0;text-decoration:none}
nav a:hover, nav a.active{color:var(--color-light)}

/* Footer */
footer{border-top:var(--border);color:var(--color-dark);font-size:0.875rem;height:88px;line-height:88px;text-align:center;width:100%}
footer a{color:var(--color-link)}

/* Compact layout on small screens */
@media (max-width:640px){
  main{padding:0}
  #top{margin-bottom:1rem}
}