body { font-family: "Arial", sans-serif; margin: 0; padding: 0; } header { background-color: #4CAF50; padding: 20px; text-align: center; color: #fff; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 3.2rem; } .navbar .nav-links { display: flex; gap: 32px; } .navbar .nav-links a { display: inline-block; position: relative; padding: 0.4rem; font-size: 1.1rem; color: #000; text-decoration: none; } .navbar .nav-links a::after { content: ""; position: absolute; bottom: -5px; left: 0; right: 0; margin: 0 auto; width: 0; height: 2px; background-color: black; transition: all 0.3s ease-in-out; } .navbar .nav-links a:is(:hover, .active)::after { width: 40%; } main { padding: 20px; } footer { margin-top: 8rem; color: gray; text-align: center; padding: 1.2rem 0; width: 100%; bottom: 0; } /*# sourceMappingURL=style.css.map */