.quote{
font-style: italic;
padding-left: 8px;
border-left: 2px solid;
}
.indent{
  padding-left: 8px;
  border-left: 2px solid #b3c0be;
}
  box{
      padding:10px;
      width:300px;
      display:flex;
      flex-direction:column;
      background-color: #b3c0be;
  }
container{
  flex-direction: row;
}

sidebar{
  z-index: 99;
  border: double;
  outline: 1px solid;
  position: absolute;
  padding: 10px;
  height: 98%;
  width: 180px;
  overflow-y:auto;
}

diary{
  display: flex;
  border: double;
  outline: 1px solid;
  background: #f2f2f2;
  padding: 10px;
  max-height: 98vh;
  width: 100%;
   margin-left:180px;
  overflow-y: scroll;
  overflow-x: hidden;
}

button{
  background-color: transparent;
  border: none;
  color: #0eaba6;
  text-decoration: underline;
  font-size: 13px;
  text-align:left;
  font-family: MS Gothic;
  font-weight: bold;
  display:inline;
  outline:none;
  cursor: pointer;
}

a{
color: #0eaba6; 
}

.active{
  color:white;
}


@media (max-width: 600px){
  container{
    flex-direction:column
  }
  sidebar{
    height:auto;
    max-height:200px;
    position: auto;
  }
  diary{
    height:auto;
    max-height:100vh;
    margin-left:0px;
    margin-top:200px;
    max-height:none;
    
  }

}