:root { --accent: hsla(159, 77%, 49%, 0.5); --background: rgb(43, 42, 51); --background-dark: rgb(36, 35, 43); --background-light: rgb(55, 53, 65); --text-color: rgb(255, 255, 255); } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--background); color: var(--text-color); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } .main-content { padding-left: 3%; padding-right: 3%; } #main-header { background-color: var(--background-dark); border-bottom: 2px solid var(--background-light); box-shadow: 0 0 3px 3px var(--background-light); width: 100%; align-items: center; /* display: inline-block; margin: 0; padding: 0; overflow: auto; */ display: flex; /* justify-content: center; */ height: 50px; } #main-header-logo { display: inline-block; vertical-align: top; margin: 10px; } #main-header-user { /* display: inline; */ align-items: right; float: right; /* padding: 10px; */ } .main-header-user-button { text-align: center; padding: 10px; margin: 5px; width: fit-content; display: inline; align-items: right; float: right; background-color: var(--background-dark); border: 2px solid var(--accent); color: var(--text-color); text-decoration: none; border-radius: 3px; } /* #main-header-button-block { display: inline-block; margin: 0; padding: 0; width: 100%; overflow: auto; } */ .main-header-button { text-align: center; padding: 10px; margin: 5px; width: fit-content; display: inline; background-color: var(--background-dark); border: 2px solid var(--accent); color: var(--text-color); text-decoration: none; border-radius: 3px; } .main-header-button:hover { background-color: var(--background-light); }