.sidebar {position: fixed; left: 1rem; top: 50%; transform: translateY(-50%); width: 4rem; background-color: #0a0f1c; display: flex; flex-direction: column; align-items: center; padding: 1rem 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border-radius: 0.5rem; z-index: 10; } .sidebar-buttons {display: flex; flex-direction: column; gap: 1rem; } .sidebar-button {background: none; border: none; padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; } .sidebar-button:hover {background: none; } .sidebar-icon {width: 1.5rem; height: 1.5rem; color: #4b5563; transition: color 0.2s; } .sidebar-button:hover .sidebar-icon {color: #38cbb4; } @media screen and (max-width: 768px) {.sidebar {position: fixed; top: 90%; left: 50%; transform: translateX(-50%); width: 14rem; height: auto; flex-direction: row; justify-content: center; background: black; padding: 0.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .sidebar-buttons {flex-direction: row; gap: 1rem; align-items: center; justify-content: center; } .sidebar-button {padding: 0.5rem; } #publish-btn {display: flex; } }