| |
| :root { |
| --bg-color: #282a36; |
| --current-line: #44475a; |
| --selection: #44475a; |
| --foreground: #f8f8f2; |
| --comment: #6272a4; |
| --cyan: #8be9fd; |
| --green: #50fa7b; |
| --orange: #ffb86c; |
| --pink: #ff79c6; |
| --purple: #bd93f9; |
| --sidebar-width: 260px; |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } |
|
|
| body { |
| background-color: var(--bg-color); |
| color: var(--foreground); |
| font-family: 'Inter', sans-serif; |
| line-height: 1.6; |
| display: flex; |
| } |
|
|
| h1, h2, h3 { font-family: 'Arthur Matilde', 'Inter', sans-serif; font-weight: 700; } |
|
|
| |
|
|
| |
| @media (max-width: 992px) { |
| body { flex-direction: column; } |
| .sidebar { width: 100%; height: auto; position: sticky; padding: 15px 25px; flex-direction: row; align-items: center; justify-content: space-between; } |
| .sidebar-brand { margin-bottom: 0; flex-direction: row; gap: 10px; } |
| .sidebar-logo-img { width: 35px; margin-bottom: 0; } |
| .nav-links { display: flex; gap: 10px; } |
| .nav-link { padding: 8px 12px; font-size: 0.75rem; } |
| main { margin-left: 0; width: 100%; } |
| } |
|
|
| @media (max-width: 600px) { |
| .nav-links { display: none; } |
| .hero h1 { font-size: 2.8rem; } |
| .main-logo { width: 130px; } |
| } |
