:root { --main_A: #002000; --main_B: #004000; --main_C: #006000; --main_D: #008000; --main_E: #00A000; --main_F: #00C000; --main_G: #00E000; --white: #ffffff; --accent_A: #200020; --accent_B: #400040; --accent_C: #600060; --accent_D: #800080; --accent_E: #A000A0; --accent_F: #C000C0; --accent_G: #E000E0; --gray_A: #202020; --gray_B: #404040; --gray_C: #606060; --gray_D: #808080; --gray_E: #A0A0A0; --gray_F: #C0C0C0; --gray_G: #E0E0E0; } body { background-color: var(--white); font-family: Helvetica; } .sidenav { height: 100%; width: 100px; position: fixed; z-index: 1; top: 0; left: 0; background-color: var(--main_C); overflow-x: hidden; padding-top: 20px; } .sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 15px; color: var(--white); display: block; transition: background-color 0.5s; } .sidenav a:hover { background-color: var(--main_E); } .body { margin-left: 100px; } .body h1 { margin-top: 10%; text-align: center; text-transform: uppercase; color: var(--gray_B); }