.sidebar { position: fixed; top: 0; left: 0; border-right: 1px solid var(--border); width: var(--nav-w); height: 100vh; padding: 0; margin: 0; display: flex; flex-direction: column; background-color: var(--bg); --padding: 30px; } @media (max-width: 1000px) or (max-height: 700px) { .sidebar { display: none; } } /* Sidebar Top */ #sidebar-top { border-bottom: 1px solid var(--border); padding: var(--padding); padding-top: calc(var(--padding) * 2); display: flex; flex-direction: column; gap: 20px; } #sidebar-top-head { padding: 0; margin: 0; } #sidebar-top-content { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0px; } #sidebar-top-content p { font-size: calc(var(--font-size) - 0.15rem); margin: 0; padding: 0; height: fit-content; width: fit-content; } /* Sidebar Bottom */ .sidebar-bottom-margin { margin-top: auto; } /* Language and Color */ .website-config { height: fit-content; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); padding-bottom: 20px; gap: 20px; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /* Contact */ #sidebar-bottom { height: 100px; padding: calc(var(--padding) / 2); display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start; } #sidebar-bottom a { font-size: calc(var(--font-size) - 0.15rem); }