@font-face {
  font-family: 'JetBrainsMonoNerdFont';
  src: url('assets/fonts/JetBrainsMonoNerdFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMonoNerdFont';
  src: url('assets/fonts/JetBrainsMonoNerdFont-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMonoNerdFont';
  src: url('assets/fonts/JetBrainsMonoNerdFont-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

* {
  font-family: 'JetBrainsMonoNerdFont', monospace;
  background-color: hsl(240, 4%, 16%);
  color: hsl(0, 0%, 100%);
}

body {
  margin: 0 auto; 
  width: 50%;
}


header {
  display: flex;
  gap: 10px;
  line-height: 25px;
  border-bottom: 3px dotted hsl(0, 0%, 100%); 
}

header a {
  margin: 10px 5px;
  padding: 2px;
  text-decoration: none;
  color: white;
}

header a:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(240, 4%, 16%);
}

main {
  font-size: 0.95rem;
  line-height: 25px;
  min-height: 100vh;    
}

main ul {
  padding-left: 20px;
}

main ul li a {
  text-decoration: none;
}

main ul li a:hover {
  text-decoration: underline;
}

main ul > ul {
  padding-left: 0;
}

main ul > ul div {
  margin-top: 20px;
  margin-bottom: 0;
}

main .page-title {
  display: flex;
  align-items: baseline; 
  justify-content: space-between;
  /* text-decoration: underline; */
}

main .page-title h1 {
  margin-bottom: 0;
}

main p {
  /* background-color: red; */
  color: #d4d4d8;
}

footer {
  line-height: 50px;
  border-top: 2px dashed hsl(0, 0%, 100%); 
}