/* Body must be configured as follows in order to use sidebar navigation */
body {
font-family: Arial, sans-serif;
margin: 0; 
/*display: flex; 
height: 100vh; 
overflow: hidden;*/
display: flex;
flex-direction: column;
min-height: 100vh;}
.sidebar {
width: 200px;
background-color: rgb(126, 0, 78);
color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
overflow-y: auto;
transition: transform 0.3s ease;}
.sidebar a {
padding: 15px;
text-decoration: none;
color: rgb(255, 255, 255);
display: block;
border-top: solid rgb(255, 255, 255) 0.0125rem;
border-bottom: solid rgb(255, 255, 255) 0.0125rem;}
.sidebar a:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
font-weight:bold;
border-left: solid rgb(126, 0, 78) 0.0125rem;
border-right: solid rgb(126, 0, 78) 0.0125rem;}
.menu-button {
display: none;
background-color: rgb(126, 0, 78);
color: rgb(255, 255, 255);
padding: 10px;
border: none;
font-size: 16px;
cursor: pointer;}
/* RESPONSIVE */
/* 768PX  */
@media (max-width: 768px) {
body {
flex-direction: column;}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 150px;
transform: translateX(-100%);}
.sidebar.open {
transform: translateX(0);}
.menu-button {display: block;  margin: 10px;}}