* {margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; } body {background-color: #0a0f1c; color: #fff; padding: 20px; } nav {background: linear-gradient(145deg, #1e2434, #171c27); padding: 15px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .container {display: grid; grid-template-columns: 2fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; } .post {background: linear-gradient(145deg, #1e2434, #171c27); padding: 20px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border: 1px solid rgba(56, 203, 180, 0.1); } .post-header {display: flex; align-items: center; margin-bottom: 15px; } .profile-pic {width: 40px; height: 40px; border-radius: 50%; background-color: #38cbb4; margin-right: 10px; box-shadow: 0 2px 4px rgba(56, 203, 180, 0.2); } .post-date {color: #9ca3af; font-size: 0.9em; } h2 {color: #38cbb4; margin-bottom: 15px; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.5px; } button {background-color: #2d3748; border: none; color: white; padding: 8px 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover {background-color: #4a5568; } .create-post {background: linear-gradient(145deg, #1e2434, #171c27); padding: 25px; border-radius: 15px; position: sticky; top: 20px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border: 1px solid rgba(56, 203, 180, 0.1); } .create-post textarea, .comment-input {width: 100%; margin: 10px 0; padding: 15px; border-radius: 12px; background-color: #2d3748; border: 2px solid transparent; color: white; resize: none; transition: all 0.3s ease; font-size: 0.95rem; } .create-post textarea {height: 120px; } .comment-input {height: 60px; } .create-post textarea:hover, .comment-input:hover {background-color: #333d52; } .create-post textarea::placeholder, .comment-input::placeholder {color: #9ca3af; } .create-post textarea:focus, .comment-input:focus {outline: none; border-color: #38cbb4; box-shadow: 0 0 0 2px rgba(56, 203, 180, 0.1); background-color: #333d52; } .post-actions {display: flex; justify-content: flex-end; } .post-button {background-color: #38cbb4; color: white; padding: 8px 16px; border-radius: 5px; cursor: pointer; border: none; transition: background-color 0.3s; } .post-button:hover {background-color: #2ba190; } @media (max-width: 768px) {body {padding: 10px; } .container {grid-template-columns: 1fr; display: flex; flex-direction: column; } .post {padding: 15px; } .create-post {position: static; margin-bottom: 20px; } textarea {font-size: 16px; } .container aside {order: -1; } } @media (max-width: 480px) {.post {padding: 12px; } .create-post {padding: 15px; } }