body {
  background-color:#d9ccd8;
}

li {
  margin:15px;
 margin-left: 12%;
 margin-right: 12%;
 
 font-family:tahoma;
 font-size:18pt;
 font-weight:500;
}

aside {
 float:right;
}

.wrapper {
 display:flex; 
}

.main {
  width:90%;
  height:150vh;
}

.sidebar {
  position:sticky;
  width:10%; 
  height:25vh;
  top:0
}

/*In order to make this collapsible work, there is a section of <script> in the html file. the style sheet does not control the core collapsible functionality*/
.collapsible {
  background-color: #d9ccd8;
  color: Black;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 24px;
  width: 76%;
  margin-left:12%;
  font-weight:800;
}


#homebutton {
  border: 5px solid black;
  position:sticky;
  width:12%;
  font-size:16pt;
  text-align:right;
  
}

.HiddenHoverText {
  font-weight:400;
  font-size:8pt;
  text-align:center;
  display:none;
}

.active, .collapsible:hover {
  background-color: #de7cca;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #dea4d2;
  width:76%;
  margin-left:12%;
  margin-right:12%;
  font-family:tahoma;
  font-size:18pt;
  font-weight:500;
}