body {
    background-color:lightgray;
}

.paperbg {
    background-image: url(notebook-paper-crumpled-background.png);
    width:800px;
    padding-left: 100px;
    padding-bottom: 20px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #f1f58f;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #eac35e;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  width: 700px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* TO DO: color code sections, make them look like bookmarks, color dropdowns if possible, sticky notes would look good. */

.collapsible2 {
  background-color: #ffa930;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active2, .collapsible2:hover {
  background-color: #ed8a2d;
}



.collapsible3 {
  background-color: #ff32b2;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active3, .collapsible3:hover {
  background-color: #c64ecb;
}



.collapsible4 {
  background-color: #a9edf1;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active4, .collapsible4:hover {
  background-color: #7db4e2;
}


.collapsible5 {
  background-color: #74ed4b;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active5, .collapsible5:hover {
  background-color: #3ad241;
}