/* layout */

.layout {
  display: flex;
  min-height: 100vh;
}

/* sidebar */

.sidebar {
  width: 220px;
  padding: 20px;
  border-right: 1px solid #444;
  position: sticky;
  top: 0;
  height: 100vh;
}

nav ul {
  list-style: circle;
  padding: 0;
}

nav li {
  margin: 10px 0;
  border-bottom: 1px black;
}

/* content */

.content {
  flex: 1;
  padding: 40px;
}

section {
  display: none;
}

/* show the selected section */
section:target {
  display: block;
}

/* show home only when nothing is targeted */
main:not(:has(section:target)) #home {
  display: block;
}