: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: #202000; --accent_B: #404000; --accent_C: #606000; --accent_D: #808000; --accent_E: #A0A000; --accent_F: #C0C000; --accent_G: #E0E000; --gray_A: #202020; --gray_B: #404040; --gray_C: #606060; --gray_D: #808080; --gray_E: #A0A0A0; --gray_F: #C0C0C0; --gray_G: #E0E0E0; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0px 0px 0px 0px; } body { background-color: var(--white); font-family: Helvetica; padding: 0px 0px 0px 0px; } nav { width: 100%; background-color: var(--main_D); padding-left: 30px; padding-right: 20px; display: flex; justify-content: space-between; align-items: center; } nav a { padding-top: 5px; text-transform: uppercase; color: var(--gray_G); font-size: 20px; display: inline-block; text-decoration: none; transition: color 0.5s; } nav a:hover { color: var(--white); } .navbar_links { list-style: none; display: flex; } .navbar_links a { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; text-decoration: none; font-size: 15px; color: var(--gray_F); display: block; transition: background-color 0.5s, color 0.5s; } .navbar_links a:hover { background-color: var(--main_F); color: var(--gray_B); } .body { } .body h1 { margin-top: 5%; text-align: center; text-transform: uppercase; color: var(--gray_B); } .body h2 { margin-top: 5%; text-align: center; color: var(--gray_C); } .body p { text-align: center; margin-left: 20px; margin-right: 20px; margin-top: 5px; margin-bottom: 5px; color: var(--gray_D); }