index.css

body {
  background-color: #2a2b2e;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  /* margin: 90px; */
  padding: 0px;
}

h1 {
  font-size: 50px;
  color: white;
  text-decoration-line: underline;
}

h2 {
  font-size: 40px;
  color: #ffdf65;
}

h3 {
  font-size: 30px;
  color: white;
}

h4 {
  font-size: 20px;
  color: white;
}

h5 {
  font-size: 16px;
  color: white;
}

p,
ul,
li {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #d6d6d6;
  font-size: 16px;
}

ul {
  list-style-type: square;
  color: black;
}

th {
  background-color: #1d1d1d;
}

table,
td,
th {
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
  color: white;
}

th,
td {
  padding: 15px;
}

a {
  color: #8089ff;
}

code {
  color: #a2ff77;
}

span {
  color: #a2ff77;
}
pre>code{
color: #a2ff77;

}
pre {
  margin-left: 40px;
  background-color: #171614;
  border-radius: 10px;
  padding: 17px;
}

blockquote {
  background-color: #3c3c3c;
  padding: 1px;
  border-radius: 10px;
}

img {
  max-width: 100%;
  height: auto;
}
.sidenav {
  border: solid ;
  border-color: white;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
   box-shadow: 20px 20px rgba(255,255,255,.45);
height: 95%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #3498db; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
transition: all .4s ease;
}

/* The navigation menu links */
.sidenav:hover {
border-radius: 0% 50% 50% 50% / 0% 5% 0% 5% ;
box-shadow: 10px 10px rgba(0,0,0,.30);
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
color:black;
display: block;

}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
.main {
width: 80%;
margin-left: 140px; /* Same as the width of the sidebar */
padding: 0px 10px;
overflow: hidden;
}
.vertical-nav {
min-width: 10rem;
width: 17rem;
height: 100%  ;
position: fixed;
top: 0;
left: 0;
color: #3498db;
border: solid white;
border-radius: 0% 0% 0% 0% / 0% 5% 0% 5% ;
box-shadow: 10px 10px rgba(2, 2, 2, 0.856);

transition: all 0.4s;


}
.vertical-nav:hover{
border-color: black;
border-radius: 0% 50% 50% 50% / 0% 5% 0% 5% ;
box-shadow: 10px 10px rgba(255, 255, 255, 0.993);
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}


/* for toggle behavior */
#sidebar{  overflow-y:auto;}
#sidebar.active {

margin-left: -17rem;
}

#sidebar.active:hover {

border-radius: 0% 50% 50% 50% / 0% 5% 0% 5% ;
box-shadow: 10px 10px rgba(0,0,0,.30);

}
#content.active {
width: 100%;
margin: 0;
}



@media screen and (max-width: 768px) {
li > pre{
width: auto;
}
#sidebar {
margin-left: -17rem;
}
#sidebar.active {
margin-left: 0;
}
#content {
padding: 0;
width: 100%;
margin: 0px;
}
#content.active {
padding: 0%;
margin-left: 12rem;
margin-right: 0%;
width: calc(100% - 17rem);
}
}