index.css

 body {
            font-family: "Lato", sans-serif;
        }
        
        .header {
  overflow: hidden;
  background-color: #FFA500;
  padding: 12.5px 10px;
  text-align: right;

}
        .sidebar {
            height: 100%;
            width: 85px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #f1f1f1;;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 0px;
            white-space: nowrap;
        }
        
        .sidebar a {
            padding: 20px 20px 20px 32px;
            text-decoration: none;
            font-size: 25px;
            color: black;;
            display: block;
            transition: 0.3s;
        }
        
 
.sidebar a.active {
  background-color: #FFA500;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}
        .sidebar a:hover {
            color: #f1f1f1;
        }
        
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 30px;
            font-size: 30px;
            margin-left: 50px;
        }
        
        .material-icons,
        .icon-text {
            vertical-align: middle;
        }
        
        .material-icons {
            padding-bottom: 3px;
        }
        
        #main {
            transition: margin-left .5s;
            padding: 0px;
            margin-left: 100px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }
        .footer {
   position: relative;
   left: 0;
   bottom: 0;
   width: 5%;
   color: grey;
   text-align: right;}