body {
  margin:0;
  font-family: Arial;
}

.container {
  display:flex;
  height:100vh;
}

/* SIDEBAR */
.sidebar {
  width:280px;
  background:#f5f5f5;
  padding:15px;
  overflow-y:auto;
  border-right:1px solid #ddd;
}

.sidebar h2 {
  text-align:center;
}

.sidebar input {
  width:100%;
  padding:8px;
  margin-bottom:15px;
}

/* TOPIC ITEMS */
.topic {
  padding:10px;
  color:red;
  cursor:pointer;
  border-bottom:1px solid #eee;
  font-weight:bold;
}

.topic:hover {
  background:#e8e8e8;
}

.lesson {
  padding-left:20px;
  cursor:pointer;
  padding:6px;
  color:#333;
}

.lesson:hover {
  background:#ddd;
}

/* MAIN */
.main {
  flex:1;
  padding:20px;
}

.controls button {
  margin-right:10px;
}

#lessonArea {
  margin-top:20px;
  font-size:20px;
  color:#666;
}

#textBox {
  margin-top:20px;
  border:1px solid #ccc;
  padding:15px;
  height:300px;
  overflow:auto;
  white-space:pre-wrap;
}