html {
    font: 400 16px/24px Roboto,sans-serif;
    scroll-behavior: smooth;
    background-color: #1a1a1a;
 }

 .changelog {
    /* display: flex; */
     background-color: #1a1a1a;
     border-radius: 4px;
     box-shadow: 0 1px 8px 0 rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12);
     color: #b0b0b0;
     padding: 0 114px;
     position: relative;
     z-index: 1;
 }
 
 .changelog page-title {
     margin-top: 0;
 }
 
 .changelog h1 {
     color: #e0e0e0;
     font-size: 32px;
     font-weight: 300;
     line-height: 40px;
     margin-bottom: 26px;
 }

 .changelog h2 {
     border-color: #3a3a3a;
     color: #e0e0e0;
     font-size: 32px;
     font-weight: 300;
     line-height: 40px;
     margin-bottom: 26px;
     padding-bottom: 15px;
 }

 .changeLogIndex{
    border-right: 1px solid #3a3a3a;
    padding: 20px 20px;

    background-color: #242424;
    height: 94%;
    width: 13%;
    margin: 0px;
    float: left;
    position: fixed;
    overflow-y: auto;
 }

 .changeLogData{
    padding: 0 20px;

    float: right;
    width: 73%;
 }

 .badge {
     position: relative;
     top: -3px;
     border-radius: 16px;
     display: inline-block;
     width: 130px;
     height: 32px;
     line-height: 32px;
     margin-right: 10px;
     text-transform: uppercase;
     font-size: 13px;
     font-weight: 700;
     text-align: center;
 }
 
 .quote {
   color: #4285F4;
 }
 
 .regress {
   color: #dd4b39;
 }

 .badge-coming {
    background-color: #3972dd;
    color: #fff;
 }

 .badge-fixed {
     background-color: #dd4b39;
     color: #fff;
 }
 
 .badge-added {
     background-color: #0F9D58;
     color: #fff;
 }
 
 .badge-changed {
     background-color: #F4B400;
     color: #fff;
 }
 
 h1, h2, h3 {
     overflow: hidden;
     padding: 0;
     text-overflow: ellipsis;
 }
 
 h1 {
     font: 400 32px/40px Google Sans,sans-serif;
     letter-spacing: 0;
     margin: 48px 0 24px;
     color: #e0e0e0;
 }

 h2 {
     border-bottom: 0;
     font: 400 22px/30px Google Sans,sans-serif;
     margin: 48px 0 24px;
     padding-bottom: 0;
     letter-spacing: -.01em;
     color: #e0e0e0;
 }
 
 h2 .date {
   color: #4285F4;
 }
 
 h3 {
       font: 400 18px/30px Google Sans,sans-serif;
       margin: 32px 0 16px;
       color: #e0e0e0;
 }

 p {
     margin: 16px 0;
     padding: 0;
     color: #b0b0b0;
 }

 code, pre, .pre-style {
     background: #2a2a2a;
     color: #b0b0b0;
     font: 400 100%/1 Roboto Mono,monospace;
     padding: 1px 4px;
     font: 500 90%/1 Roboto Mono,monospace;
     word-break: break-word;
 }
 
 ul {
     display: block;
     list-style: disc outside;
     -webkit-margin-before: 1em;
     -webkit-margin-after: 1em;
     -webkit-margin-start: 0px;
     -webkit-margin-end: 0px;
     -webkit-padding-start: 40px;
     margin: 0;
     padding-left: 0;
     margin-bottom: 2rem;
 }
 ul ul {    
    list-style-type: circle;
    margin-bottom: 0;
  }
 li {
     /* list-style-type: none; */
     margin: 8px 0 8px 22px;
     padding: 0;
     color: #b0b0b0;
 }

 :link, :visited {
     color: #5ba3d0;
     outline: 0;
     text-decoration: none;
 }
 .aLink.active {
    color: #5ba3d0;
    font-weight: 700;
 }
 .d-none{
    display: none;
 }
  /* custom scrollbar */
  ::-webkit-scrollbar {
    width: 1.5rem;
    height: 1.5rem;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #4a4a4a;
    border-radius: 1.5rem;
    border: 8px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #5a5a5a;
  }

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 1100px) {
  .changeLogData {
   
    width:100%;
    float: none;
  }
    .changeLogIndex {
    display:none;
    
    
  }
}