* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#left-sidebar{
  position: fixed;
  top: 0;
  width: 240px;
  height: 1600px;
  background-image: url("/submenu4/ac-fix/assets/Lprint-wide.png");
  background-repeat: no-repeat;
  background-position: top left; 
  margin-left: -120px; /*shifts left sidebar to the left more, so that theres' more room for content in the middle*/
}

/*this will style the LINK WRAPPER BOX */
#left-sidebar .sidebar-badge {
  display: inline block; /*allows "clean stacking" wtv that means*/
  margin-bottom: 20px; /*creates a vertical break that pushes the NEXT IMAGE down*/
  text-decoration: none; /*removes the automatic undelrine from links*/
}

/*this will style the actual image INSIDE the link*/
#left-sidebar .sidebar-badge img {
  max-width: 80%; /*prevents the image from being wider than the sidebar*/
  height: auto; /*keeps original aspect ratio of image*/
  border: none; /*removes default browser border that gets linked around images*/
  display: block; /*prevents vertical text alignment spacing issues*/
  margin: 0 auto; /*will center image horizontally*/
  }
  
  /*creating HOVER effect*/
 #left-sidebar .sidebar-badge:hover img { /*hover is a CSS selector*/
  opacity: 0.8; /*will dim image so user knows that it is clickable when their mouse hovers over it*/
  transform: scale(1.05); /*will make image slightly larger when it is in "hover mode" so that it looks like it's "popping" out of the screen*/
 }
 
 #left-sidebar .sidebar-badge:first-of-type img { /*first-of-type is a CSS selector*/
   margin-top: 15px;
 }
 
#main-content {
  margin-left: 269px; /*match siderail width*/
  padding: 20px;
}