body { --base-padding: .5rem 1rem; --base-margin: 2rem; --background: #111111; --color: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; min-height: 100vh; font-family: 'Source Code Pro', monospace; background: var(--background); color: var(--color); } html { overflow-y: scroll !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } *::-webkit-scrollbar { width: 5px; } *::-webkit-scrollbar-thumb { background-color: #ffffff; border-radius: 20px; } *::-webkit-scrollbar-track { background: #000000; } nav { position: relative; display: flex; padding: 1rem; justify-content: space-between; isolation: isolate; .logo img { height: 3rem; } .links { display: flex; align-items: center; justify-content: center; gap: 1rem; z-index: -1; color: var(--color); font-size: 1.3rem; } } a { color: var(--color); } a:visited { color: var(--color); } a:hover { color: red; } @media (min-width: 400px) { nav .links { position: absolute; inset: 0; } } /* .content { padding: 2rem 1rem; } */ footer { display: flex; width: 100vw; flex-direction: column; justify-content: center; align-items: center; align-self: flex-end; margin-top: auto; margin-bottom: 2rem; }