html, body { margin: 0; padding: 0; } table.layout { border-collapse: collapse; width: 100%; } td.content { padding: 0; } .logo { float: left; margin-right: 1rem; } a { text-decoration: none; background-color: transparent; transition: background-color 0.2s, color 0.2s; padding: 4px; border-radius: 4px; } a:hover { background-color: red; color: white; } a.no-hover-box:hover { background-color: transparent; color: red; } .sidebar { position: fixed; top: 0; right: 0; width: 250px; max-height: 100vh; overflow-y: auto; background-color: #ffd; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .sidebar.visible { transform: translateX(0); } .links-container { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; } .links-container ul { flex: 1 1 200px; list-style: none; margin: 0; padding: 0; } .links-container ul li { margin-bottom: 0.75rem; word-wrap: break-word; } .links-container ul li a { display: inline-block; max-width: 100%; word-wrap: break-word; color: #0366d6; transition: color 0.3s ease; } .links-container ul li a:hover { color: #023e8a; text-decoration: underline; } @media (max-width: 600px) { .links-container { flex-direction: column; } }