* { 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; } .nav .logo img { height: 3rem; } .nav .links { display: flex; align-items: center; justify-content: center; gap: 1rem; z-index: -1; color: var(--color); } 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; justify-content: center; align-items: center; align-self: flex-end; margin-top: auto; margin-bottom: 2rem; }