div.panel {
  display: flex;
  align-items: stretch;
}

div.panel > div.lectures {
  display: flex;
  flex-grow:1;
}

div.panel > div.lectures {
  display: flex;
  flex-grow: 1;
}

div.panel > div.lectures {
  display: flex;
  flex-grow: 1;
}

div.panel > iframe {
  flex-grow: 1;
}

:root {
  --h1-height: 28px;
  --h2-height: 24px;
  --h3-height: 20px;
}

img {
  width: 100%;
}

div {
  display: block;
}

div.closed {
  display: none;
}

div.topic {
  margin-left: var(--h1-height);
}

div.question {
  margin-left: var(--h2-height);
}

button {
  background-color: LightGray;
  border: none;
}

button:after {
  content: "▶";
}


div:not(.closed) button:after {
  content: "▼";
}


a:any-link {
  text-decoration: none;
}

h1 a:any-link:after {
  content: "✎";
}

h2 a:any-link:after {
  content: "✎";
}

h3 a:any-link:after {
  content: "✎";
}

h1 {
  height: var(--h1-height);
  line-height: var(--h1-height);
}

h1 > button {
  vertical-align: bottom;
  height: var(--h1-height);
  width: var(--h1-height);
}

h2 {
  height: var(--h2-height);
  line-height: var(--h2-height);
}

h2 > button {
  vertical-align: bottom;
  height: var(--h2-height);
  width: var(--h2-height);
}

h3 {
  height: var(--h3-height);
  line-height: var(--h3-height);
}

h3 > button {
  vertical-align: bottom;
  height: var(--h3-height);
  width: var(--h3-height);
}
