/* === Base === */
html{
  background-color:#102027;
  color:#eef3f6;
  font-family:"Albert Sans",sans-serif;
  padding:5%;
}

/* === Headings === */
H1{
  font-family:Philosopher,sans-serif;
  font-weight:200;
  margin-bottom:3rem;
}

/* Folder titles (Netscape-style bookmarks use H3 inside DT) */
H3{
  font-family:Philosopher,sans-serif;
  font-weight:300;
  font-size:1.9rem;
  margin:2.5rem 0 0.5rem 0;
  cursor:pointer;
  position:relative;
}

/* Arrow marker */
H3::before{
  content:"▸";
  margin-right:0.5rem;
  color:#90a4ae;
  display:inline-block;
  transition:transform 0.2s ease;
}

/* Century / subfolder headings */
H2{
  font-weight:300;
  font-size:1.4rem;
  margin:1.25rem 0 0.25rem 1rem;
  color:#cfd8dc;
  cursor:pointer;
  position:relative;
}

H2::before{
  content:"▸";
  margin-right:0.5rem;
  color:#78909c;
  display:inline-block;
  transition:transform 0.2s ease;
}

H2.open::before{
  transform:rotate(90deg);
}

H4{
  font-weight:300;
  font-size:0.95rem;
  margin:0.75rem 0 0.25rem 2rem;
  color:#b0bec5;
}

/* === Links === */
a{
  display:block;
  color:lightsteelblue;
  text-decoration:none;
  margin:0.25rem 0 0.25rem 3rem;
}

a:hover{
  color:goldenrod;
}

/* === Netscape bookmark collapse logic === */
/* Structure assumed:
   DT > H3
   followed immediately by DL
*/

DT > H3 + DL,
DT > H2 + DL{
  display:none;
  margin-left:1.5rem;
}

DT > H3.open + DL,
DT > H2.open + DL{
  display:block;
}

DT > H3.open + DL{
  display:block;
}

DT > H3.open::before{
  transform:rotate(90deg);
}

/* === Nested indentation === */
DL{ margin-left:1.5rem; }
.sub{ margin-left:2rem; }

/* === Clean list reset === */
ul,li{
  list-style:none;
  margin:0;
  padding:0;
}

/* === Spacing helper === */
.paddedDiv{ margin-bottom:4rem; }

#toggleAll{
  background:none;
  border:1px solid #455a64;
  color:#cfd8dc;
  font-family:Philosopher,sans-serif;
  font-size:0.9rem;
  padding:0.4rem 0.8rem;
  cursor:pointer;
  margin-bottom:2rem;
}

#toggleAll:hover{
  border-color:goldenrod;
  color:goldenrod;
}

/* === Book link bullet marker (scoped) === */
DT DL a{
  position:relative;
  padding-left:1.25rem;
}

DT DL a::before{
  content:"•";
  position:absolute;
  left:0;
  top:0.05em;
  color:#607d8b;
  font-size:0.9em;
  line-height:1;
}