| 12345678910111213141516171819202122232425262728293031 | 
							- .left-bar {
 
-     box-sizing: border-box;
 
-     position: fixed;
 
-     width: 300px;
 
-     top: 50%;
 
-     left: 0px;
 
-     transform: translateY(-50%);
 
-     max-height: 80%;
 
-     background-color: var(--left-bar-color);
 
-     border-radius: 0 var(--padding) var(--padding) 0;
 
-     padding: var(--padding);
 
-     color: var(--font-color);
 
-     min-height: calc(var(--padding) * 6.5);
 
-     transition: transform 0.5s, left 0.5s;
 
- }
 
- .left-bar .control-button button {
 
-     position: absolute;
 
-     top: calc(var(--padding) * 2);
 
-     left: 100%;
 
-     border: none;
 
-     background-color: var(--left-bar-color);
 
-     color: var(--font-color);
 
-     padding: calc(var(--padding) / 2);
 
-     border-radius: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) 0;
 
-     transition: transform 0.5s;
 
- }
 
- .left-bar .control-button button:hover {
 
-     transform: scale(1.2);
 
- }
 
 
  |