:root { --foreground-color: #343a40; --background-color: #f8f9fa; --nav-background-color: #ced4da; } body { /* Do not change: includes vertical margin only */ margin: 2vh 0vw; padding: 0; } header { background-color: var(--nav-background-color); top: 0; width: 100vw; display: flex; justify-content: flex-end; position: fixed; } main { height: 96vh; display: flex; justify-content: flex-start; align-items: center; } main.spread { justify-content: space-around; } main.vert { flex-direction: column; } nav > ul { list-style: none; margin-right: 5vw; } nav > ul > li { display: inline; } nav > ul > li > button { padding: 1vh 2vw; font-size: 1.2em; border: none; border-radius: 10px; background-color: var(--background-color); color: var(--foreground-color); } nav > ul > li > button:hover { outline: 3px solid var(--foreground-color); } nav > ul > li > button.active { background-color: var(--foreground-color); color: var(--background-color); } /* TODO: Define rules for the nav buttons: * The coloring will be controlled dynamically: * * Start with the default background and foreground colors * If the mouse is hovering, add an outline using the foreground color * If the "active" class is present, reverse the colors */ /* TODO: Define rules for the main flexbox: * * If the "spread" class is present, use space-around to space the images out * If the "vert" class is present, make the flexbox a column */ /* BONUS: Make tags show up in front of the header bar */