.container{width:20%;display:flex;flex-direction:column;border-right:1px solid lightgray;height:100vh;background-color:#f2f2f2;overflow:hidden}.container .logo-container{display:flex;justify-content:center}.container .logo-container img{width:50%;margin-top:-30px}.container .items-container ul{list-style:none;padding:0}.container .items-container ul li{width:100%;padding:20px 0;border-bottom:1px solid lightgray;transition:.5s}.container .items-container ul li:hover{background-color:#efe9e9}.container .items-container ul li a,.container .items-container ul li .profile-link-with-avatar{text-decoration:none;color:#000;font-size:24px;padding-left:10px;display:flex;align-items:center;gap:10px}.container .items-container ul li .profile-avatar-thumbnail{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-left:0}.container .items-container .notifications-link{position:relative;display:flex;align-items:center;gap:6px}.container .items-container .notif-badge{display:flex;justify-content:center;align-items:center;background:red;color:#fff;font-size:12px;font-weight:700;border-radius:50%;width:20px;height:20px;text-align:center;line-height:1}@media screen and (min-width: 300px) and (max-width: 550px){.container{width:100%;height:60px;position:fixed;bottom:0;left:0;right:0;border-right:none;border-top:1px solid lightgray;flex-direction:row;justify-content:space-around;align-items:center;background-color:#fff;z-index:1000}.container .logo-container{display:none}.container .items-container{width:100%}.container .items-container .menu-label{display:none}.container .items-container .notif-badge{width:15px;height:15px;font-size:8px;margin-left:-5px}.container .items-container ul{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:0}.container .items-container ul li{flex:1;display:flex;justify-content:center;align-items:center;border-bottom:none;padding:0}.container .items-container ul li a{display:flex;justify-content:center;align-items:center;font-size:24px;padding:0}.container .items-container ul li .menu-icon{font-size:24px}}.r-container{height:100vh;width:20%;border-left:1px solid lightgray;background-color:#f2f2f2;overflow:hidden}.r-container .ppl-container{padding:10px;height:200px;border:.5px solid lightgray}.r-container .ppl-container span{color:#818181}@media screen and (min-width: 300px) and (max-width: 550px){.r-container{display:none}}.home-container{height:100vh;width:50%;display:flex;flex-direction:column;background-color:#ffffffad;margin:0 auto;overflow:scroll;scrollbar-width:thin;scrollbar-color:rgba(219,219,219,.825) transparent}.home-container .home-header{display:none}.posts-feed{display:flex;flex-direction:column;width:100%;padding:0}@media screen and (min-width: 300px) and (max-width: 550px){.home-container{min-width:280px;max-width:530px;width:400px;padding-bottom:70px}.home-container .home-header{height:50px;display:flex;justify-content:left;align-items:center;margin-left:5px}.home-container .home-header img{width:100px;height:50px}}.stories-container{display:flex;gap:30px;background-color:#f2f2f2;justify-content:center;align-items:center;height:100%;width:100%;border-radius:10px}.stories-container .story{display:flex;flex-direction:column;align-items:center;padding:15px 0}.stories-container .story img{width:50px;height:50px;border-radius:50%;border:2px solid rgb(195,48,48);object-fit:cover}.stories-container .story span{font-size:12px;color:#828282}@media screen and (min-width: 300px) and (max-width: 550px){.stories-container{font-size:10px}}.comment{display:flex;justify-content:space-between;font-size:12px;width:100%}.comment .comment-time{display:flex;justify-content:center;width:100px}.comment .comment-flexbox{display:flex;width:100%;align-items:center}.comment .delete-btn{display:flex;background-color:transparent;color:red;border:none;justify-content:center;align-items:center}.comments-list{display:flex;margin:0 auto;flex-direction:column;gap:15px;align-items:center;justify-content:center}.comments-list .comment{display:flex;align-items:center;justify-content:center;gap:5px}.comments-list .comment .comment-user-link{display:flex;justify-content:center;align-items:center;gap:3px}.comments-list .comment img{width:35px;height:35px;border-radius:50%;object-fit:cover;border:1px solid black}.comments-list .comment .comment-username{font-weight:700;margin-right:10px;opacity:.8}.comments-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.comments-modal-content{background:#fff;border-radius:8px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;position:relative;padding:1rem}.comments-modal-content .comment-list{display:flex;justify-content:space-between}.comments-modal-content .comment-list .comment{width:100%}.comments-modal-content .comment-list .comment .comment-flexbox{display:flex;justify-content:left;align-items:center}.comments-modal-content .comment-list .comment .comment-time{font-size:200px}.close-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:22px;cursor:pointer}.likes-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.likes-modal-content{background:#fff;border-radius:8px;padding:20px;width:320px;max-height:400px;overflow-y:auto;position:relative}.close-btn{position:absolute;top:8px;right:8px;border:none;background:transparent;font-size:18px;cursor:pointer}.likes-list{list-style:none;padding:0;margin:0}.like-user{display:flex;align-items:center;margin-bottom:10px}.like-user-avatar{width:32px;height:32px;border-radius:50%;margin-right:10px}.like-user-name{font-weight:500}.post-card{width:100%;height:1000px;aspect-ratio:4/3;overflow:hidden;border-radius:12px;display:flex;flex-direction:column;background-color:#f2f2f2;margin-top:20px;gap:5px;padding-top:20px;padding-bottom:20px}.post-card .post-image-container{margin:0 auto;width:90%;height:700px;object-fit:contain}.post-card .post-image-container .post-image{width:100%;height:100%;object-fit:cover;margin-bottom:10px;border-radius:5px;margin-top:10px}.post-card .post-image-container .post-image img{height:100%}.post-card .post-header{display:flex;align-items:center;justify-content:left;gap:10px;margin:0 auto;width:90%;position:relative}.post-card .post-header .post-header-user-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.post-card .post-header .post-header-username{font-weight:500}.post-card .post-header .post-header-avatar{width:50px;height:50px;border-radius:50%;border:solid 1.5px black;margin:0;object-fit:cover}.post-card .post-header .post-options-trigger{cursor:pointer;margin-left:auto;font-size:20px;color:gray}.post-card .post-header .post-options-menu{position:absolute;top:60px;right:20px;background-color:#fff;border:1px solid lightgray;border-radius:5px;box-shadow:0 2px 5px #0000001a;z-index:10;display:flex;flex-direction:column}.post-card .post-header .post-options-menu .post-options-menu-item{background:none;border:none;padding:8px 15px;text-align:left;cursor:pointer;font-size:14px;white-space:nowrap}.post-card .post-header .post-options-menu .post-options-menu-item:hover{background-color:#ebebeb}.post-card .post-actions{display:flex;gap:12px;color:#000;font-size:22px;margin:10px auto -5px;width:90%;border-bottom:.5px solid rgb(208,208,208);padding-bottom:5px}.post-card .post-actions .post-action-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:inherit;font-size:24px}.post-card .post-actions .post-likes-count,.post-card .post-actions .post-comments-count{font-size:14px;color:#5c5c5c;align-self:center}.post-card .post-caption{margin:0 auto;width:90%;padding:5px 0;font-size:14px;display:flex;justify-content:space-between}.post-card .post-caption .post-caption-username{font-weight:500;margin-right:5px;color:#3281ef}.post-card .post-time{display:block;font-size:12px;color:gray;margin-top:2px}.post-card .post-comment-section{width:90%;margin:0 auto}.post-card .post-comment-section .show-more-comments-btn{border:none;background-color:transparent;font-size:11px;font-weight:500;color:#6c6c6c;cursor:pointer;margin-top:-5px}.post-card .post-comment-section .comment{display:flex;gap:5px;align-items:center;justify-content:space-between}.post-card .post-comment-section .comment .comment-user-link{display:flex;justify-content:left;align-items:center;gap:5px;color:#333}.post-card .post-comment-section .comment img{width:35px;height:35px;border-radius:50%;object-fit:cover}.post-card .post-comment-section .comment .comment-username{font-size:12px;font-weight:700;opacity:.9;margin-right:5px}.post-card .post-comment-section .comment .comment-time{font-size:10px}@media screen and (min-width: 300px) and (max-width: 550px){.post-card{height:650px}.post-card .post-header .post-username-header{font-size:13px}.post-card .post-header .post-header-avatar{width:35px;height:35px}.post-card .post-image-container{height:450px;object-fit:cover}.post-card .post-image-container .post-image{object-fit:cover}.post-card .post-caption{display:flex;justify-content:start;align-items:center}.post-card .post-caption .post-caption-username{font-size:12px;font-weight:500}.post-card .post-caption .post-caption-text{font-size:12px;font-weight:400}.post-card .post-comment-section .comment .comment-avatar{width:25px;height:25px;border-radius:50%;object-fit:cover}.post-card .post-comment-section .comment .comment-username{font-size:10px}.post-card .post-comment-section .comment .comment-text{font-size:11px}.post-card .post-comment-section .show-more-comments-btn{border:none;background-color:transparent;font-size:10px;font-weight:500;color:#6c6c6c;cursor:pointer;margin-top:-5px}}.comment-input{display:flex;justify-content:start;gap:10px;width:90%;margin:10px auto}.comment-input .comment-input-avatar{min-width:35px;height:35px;border-radius:50%;object-fit:cover;border:1px solid black}.comment-input input{border:none;background-color:transparent;border-bottom:1px solid lightgray;width:85%}.comment-input button{background-color:transparent;color:#333;border:none;font-size:14px;width:60px;height:25px;cursor:pointer;font-weight:600}@media screen and (min-width: 300px) and (max-width: 550px){.comment-input .comment-input-avatar{min-width:25px;height:25px;border-radius:50%;object-fit:cover;border:1px solid black}.comment-input .comment-input-field{height:25px}}.profile-page{padding:20px 20px 100px;background-color:#f2f2f2;color:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100vh;width:100%;max-width:1000px;box-sizing:border-box}.profile-page .profile-header{display:flex;align-items:flex-start;margin-bottom:14px;width:100%;max-width:935px;margin-left:auto;margin-right:auto;box-sizing:border-box;padding:0 20px}.profile-page .profile-header .profile-avatar-container{flex-shrink:0;margin-right:30px;display:flex;justify-content:center;align-items:center}.profile-page .profile-header .profile-avatar-container .profile-avatar{width:150px;height:150px;border-radius:50%;object-fit:cover;border:1px solid #363636}.profile-page .profile-header .profile-info-container{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.profile-page .profile-header .profile-info-container .profile-username-actions{display:flex;align-items:center;margin-bottom:20px;justify-content:space-between;gap:10px}.profile-page .profile-header .profile-info-container .profile-username-actions button{background-color:transparent;border:none;cursor:pointer;color:#00f;font-weight:500}.profile-page .profile-header .profile-info-container .profile-username-actions .profile-names{display:flex;flex-direction:column;gap:5px}.profile-page .profile-header .profile-info-container .profile-username-actions .profile-names .profile-username{font-size:28px;font-weight:300;line-height:24px;color:#000;white-space:nowrap;text-overflow:ellipsis}.profile-page .profile-header .profile-info-container .profile-username-actions .profile-names .profile-displayname{font-size:1rem;color:#555;margin-top:.2rem}.profile-page .profile-header .profile-info-container .profile-username-actions .follow-button{background-color:#f2f2f2;color:#000;border:1px solid #000000;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}.profile-page .profile-header .profile-info-container .profile-username-actions .follow-button:hover{background-color:#959595}.profile-page .profile-header .profile-info-container .profile-stats{width:300px;display:flex;justify-content:left;gap:40px;margin-bottom:20px}.profile-page .profile-header .profile-info-container .profile-stats .stat-item{display:flex;flex-direction:column;text-align:center;white-space:nowrap}.profile-page .profile-header .profile-info-container .profile-stats .stat-item .stat-value{font-size:12px;font-weight:600;color:#000}.profile-page .profile-header .profile-info-container .profile-stats .stat-item .stat-label{font-size:14px;color:#000}.profile-page .profile-header .profile-info-container .profile-bio{font-size:15px;line-height:1.5;margin-bottom:10px;max-width:100%;word-wrap:break-word;display:flex;justify-content:left;color:#2b2b2b}.profile-page .profile-header .profile-info-container .profile-bio p{margin:0}.profile-page .profile-header .profile-info-container .followed-by{font-size:12px;color:#000;margin-top:10px}.profile-page .profile-tabs{border-top:1px solid #363636;display:flex;justify-content:center;margin-bottom:10px;width:100%;max-width:935px;margin-left:auto;margin-right:auto;box-sizing:border-box;padding:0 10px}.profile-page .profile-tabs .tab-item{display:flex;align-items:center;padding:16px;cursor:pointer;font-size:12px;font-weight:600;color:#000;text-transform:uppercase;letter-spacing:1px;transition:color .2s ease}.profile-page .profile-tabs .tab-item svg{margin-right:6px}.profile-page .profile-tabs .tab-item.active{color:#000;border-top:1px solid #000000;margin-top:-1px}.profile-page .profile-tabs .tab-item:hover{color:#565656}.profile-page .profile-posts-grid{display:grid;justify-content:center;grid-template-columns:repeat(3,1fr);gap:5px;width:100%;margin:0 auto;padding:0 10px;box-sizing:border-box}.profile-page .profile-posts-grid .post-grid-item{width:100%;padding-bottom:100%;position:relative;background-color:#262626}.profile-page .profile-posts-grid .post-grid-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;cursor:pointer}.profile-page .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:3000}.profile-page .modal-overlay .modal-box{background:#fff;border-radius:8px;max-width:1000px;width:95%;height:90vh;display:flex;flex-direction:column;position:relative}.profile-page .modal-overlay .modal-box .modal-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:22px;cursor:pointer;color:#333;z-index:10}.profile-page .modal-overlay .modal-box .modal-content{display:flex;flex:1;overflow:hidden}.profile-page .modal-overlay .modal-box .modal-content .modal-photo{flex:2;background:#000;display:flex;align-items:center;justify-content:center}.profile-page .modal-overlay .modal-box .modal-content .modal-photo img{max-width:100%;max-height:100%;object-fit:contain}.profile-page .modal-overlay .modal-box .modal-content .modal-details{flex:1;display:flex;flex-direction:column;border-left:1px solid #ddd;background:#fff}.profile-page .modal-overlay .modal-box .modal-content .modal-details .modal-header{display:flex;align-items:center;padding:12px;border-bottom:1px solid #eee}.profile-page .modal-overlay .modal-box .modal-content .modal-details .modal-header .modal-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px}.profile-page .modal-overlay .modal-box .modal-content .modal-details .modal-header .modal-username{font-weight:600}.profile-page .modal-overlay .modal-box .modal-content .modal-details .modal-caption{padding:12px;border-bottom:1px solid #eee}.profile-page .modal-overlay .modal-box .modal-content .modal-details .modal-comments{flex:1;overflow-y:auto;padding:12px}.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:4000}.lightbox-overlay .lightbox-box{background:#fff;border-radius:8px;max-width:900px;width:90%;height:80%;display:flex;flex-direction:column;position:relative}.lightbox-overlay .lightbox-stats{display:flex;gap:5px;margin-left:10px;font-size:15px;cursor:pointer}.lightbox-overlay .lightbox-time{font-size:12px;color:gray;display:flex;justify-content:right;align-items:center}.lightbox-overlay .lightbox-caption{font-size:13px}.lightbox-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:22px;cursor:pointer;color:#000;z-index:10}.lightbox-content{height:764px;display:flex;flex:1;overflow:scroll;margin:0;scrollbar-width:thin;scrollbar-color:rgba(219,219,219,.825) transparent}.lightbox-photo{flex:2;background:#000;display:flex;align-items:center;justify-content:center}.lightbox-photo img{max-width:100%;max-height:100%;object-fit:contain}.lightbox-details{flex:1;display:flex;flex-direction:column;border-left:1px solid #ddd;background:#fff}.lightbox-details .lightbox-header{display:flex;align-items:center;gap:10px;padding:5px;border-bottom:1px solid #eee}.lightbox-details .lightbox-header .lightbox-avatar{width:40px;height:40px;border-radius:50%}.lightbox-details .lightbox-header .lightbox-username{font-weight:600}.lightbox-details .dropdown-container{background-color:transparent;border:none}.lightbox-details .lightbox-helper-div{display:flex;justify-content:space-between}.lightbox-details .lightbox-helper-div .lightbox-stats{display:flex;gap:5px}.lightbox-details .lightbox-header-flex{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}.lightbox-details .lightbox-caption{padding:12px;border-bottom:1px solid #eee}.lightbox-details .lightbox-comments{flex:1;overflow-y:auto;padding:12px}@media screen and (min-width: 300px) and (max-width: 550px){.profile-page .profile-header{display:flex;flex-direction:column;justify-content:center;align-items:center}.profile-page .profile-header .profile-avatar-container{margin:0 auto}.profile-page .profile-header .profile-avatar-container .profile-avatar{width:80px;height:80px}.profile-page .profile-header .profile-info-container{display:flex}.profile-page .profile-header .profile-info-container .profile-stats{display:flex;justify-content:center}.profile-page .profile-header .profile-info-container .profile-bio{font-size:14px;line-height:1.5;margin-bottom:10px;max-width:100%;word-wrap:break-word;display:flex;justify-content:center}.profile-page .profile-header .profile-info-container .profile-username-actions{display:flex;flex-direction:column;justify-content:space-between}.profile-page .profile-header .profile-info-container .profile-username-actions button{background-color:transparent;border:none;cursor:pointer;color:#00f;font-weight:500}.profile-page .profile-header .profile-info-container .profile-username-actions .profile-names{display:flex;gap:10px;flex-direction:column;align-items:center;margin:5px}.profile-page .profile-posts-grid{grid-template-columns:repeat(2,1fr);justify-items:center;align-items:center}.profile-page .profile-posts-grid .post-grid-item{width:120px;height:80px;margin:0 auto}.lightbox-overlay .lightbox-box .lightbox-content{display:flex;flex-direction:column}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-photo{object-fit:cover;height:500px;width:100%}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-header{display:flex;gap:5px}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-header .lightbox-userinfo{font-size:12px}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-stats{display:flex;gap:5px;margin-left:10px;font-size:15px;cursor:pointer}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-stats .likes-list{margin:0}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-time{display:block;color:gray;margin-left:10px;font-size:10px}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-caption{font-size:12px}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list{overflow:scroll;scrollbar-width:thin;scrollbar-color:rgba(219,219,219,.825) transparent}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;width:100%}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .comment-flexbox{display:flex;flex-direction:row;justify-content:left;align-items:center}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .comment-user-link{display:flex;align-items:center;gap:6px;font-size:12px;justify-content:start}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .comment-user-link .comment-avatar{width:25px;height:25px;border-radius:50%;border:1px solid black}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .comment-user-link .comment-username{font-weight:600;color:#333}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .comment-text{font-size:10.5px;text-align:start}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .comment-time{font-size:8px;color:gray;margin:0 2px}.lightbox-overlay .lightbox-box .lightbox-content .lightbox-comments .comments-list .comment .delete-btn{width:15px;height:15px;display:flex;justify-content:center;align-items:center;cursor:pointer;border:none;background:transparent;font-size:12px;color:red;margin:0 10px}}.edit-profile-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.edit-profile-modal .modal-content{background:#fff;padding:2rem;border-radius:8px;width:400px;max-width:90%}.edit-profile-modal .modal-content h2{margin-bottom:1rem}.edit-profile-modal .modal-content form{display:flex;flex-direction:column;gap:1rem}.edit-profile-modal .modal-content form label{display:flex;flex-direction:column;font-size:.9rem;font-weight:500}.edit-profile-modal .modal-content form label input,.edit-profile-modal .modal-content form label textarea{margin-top:.3rem;padding:.5rem;border:1px solid #ccc;border-radius:4px}.edit-profile-modal .modal-content form .avatar-preview img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-top:.5rem}.edit-profile-modal .modal-content form .error{color:red;font-size:.85rem}.edit-profile-modal .modal-content form .buttons{display:flex;justify-content:flex-end;gap:1rem}.edit-profile-modal .modal-content form .buttons .cancel{background:#ccc;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.edit-profile-modal .modal-content form .buttons button[type=submit]{background:#007bff;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.edit-profile-modal .modal-content form .buttons button[type=submit]:disabled{background:#aaa;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-box{background:#fff;border-radius:8px;width:400px;max-height:500px;overflow-y:auto;padding:20px;position:relative}.modal-close{position:absolute;top:10px;right:10px;border:none;background:none;font-size:20px;cursor:pointer}.user-list{list-style:none;padding:0;margin:0}.user-list-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eee}.user-list-item img{width:32px;height:32px;border-radius:50%}.empty{text-align:center;color:#888;padding:20px 0}.add-post-page{max-width:600px;margin:0 auto;padding:10px}.add-post-page h1{margin-bottom:20px}.add-post-page .add-post-form{display:flex;flex-direction:column;gap:15px}.add-post-page .add-post-form input[type=file]{margin-bottom:10px}.add-post-page .add-post-form textarea{resize:none;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px}.add-post-page .add-post-form button{padding:10px 16px;background:#e63946;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700}.add-post-page .add-post-form button:disabled{background:#ccc;cursor:not-allowed}.add-post-page .add-post-form button:hover:not(:disabled){background:#d62828}.add-post-page .image-preview-container{position:relative;display:inline-block;margin-bottom:0 auto}.add-post-page .image-preview-container .image-preview{width:100%;max-height:400px;object-fit:cover;border-radius:8px;border:1px solid #ddd}.add-post-page .image-preview-container .clear-image-btn{position:absolute;top:8px;right:8px;background:#0009;color:#fff;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1;display:flex;justify-content:center;align-items:center}.add-post-page .image-preview-container .clear-image-btn:hover{background:#000c}@media screen and (min-width: 300px) and (max-width: 550px){.add-post-page{padding-bottom:100px}}.search-page{flex:5;padding:20px;display:flex;flex-direction:column;gap:20px}.search-page .search-input{width:100%;padding:10px 15px;border:1px solid #ccc;border-radius:8px;font-size:1rem}.search-page .loading-message,.search-page .error-message,.search-page .no-results-message{text-align:center;padding:10px;color:#666}.search-page .error-message{color:#d9534f}.search-page .search-results h3{margin-top:20px;margin-bottom:10px;color:#333}.search-page .search-results .recent-searches{display:flex;flex-direction:column;align-items:left;justify-content:center}.search-page .search-results .recent-searches li{display:flex;align-items:center;gap:5px}.search-page .search-results .user-results-list,.search-page .search-results .post-results-list{display:flex;flex-direction:column;gap:10px}.search-page .search-results .user-search-item,.search-page .search-results .post-search-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #eee;border-radius:6px;text-decoration:none;color:inherit;transition:background-color .2s ease-in-out}.search-page .search-results .user-search-item:hover,.search-page .search-results .post-search-item:hover{background-color:#f0f0f0}.search-page .search-results .user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.search-page .search-results .post-thumbnail{width:60px;height:60px;object-fit:cover;border-radius:4px}.search-page .search-results .post-search-item{flex-direction:row;justify-content:space-between;align-items:center}.search-page .search-results .post-search-item p{flex-grow:1;margin:0;font-size:.9rem;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-page .search-results .post-search-item .post-owner-link{font-size:.8rem;color:#555;text-decoration:underline;white-space:nowrap}.search-page .search-results span{font-weight:700}@media screen and (min-width: 300px) and (max-width: 550px){.search-page .search-input{width:80%;margin:0 auto}}.notifications-page{padding:0 10px;width:100vh;margin:0 auto 50px}.notifications-page h2{margin-bottom:15px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:600}.notifications-page .notifications-list{width:100%;list-style:none;padding:0;margin:0;height:800px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(219,219,219,.825) transparent}.notifications-page .notifications-list .notification-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid #eee}.notifications-page .notifications-list .notification-item .notif-user{display:flex;align-items:center}.notifications-page .notifications-list .notification-item .notif-user .notif-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}.notifications-page .notifications-list .notification-item .notif-text{display:flex;flex-direction:column;font-size:14px;color:#333}.notifications-page .notifications-list .notification-item .notif-text .notif-username{font-weight:700;margin-right:5px;text-decoration:none;color:#000}.notifications-page .notifications-list .notification-item .notif-text .notif-username:hover{text-decoration:underline}.notifications-page .notifications-list .notification-item .notif-text .notif-row{display:flex;justify-content:space-between!important;align-items:center;gap:8px;margin-top:2px}.notifications-page .notifications-list .notification-item .notif-text .notif-row span{color:#555}.notifications-page .notifications-list .notification-item .notif-text .notif-row .post-preview{border:1px solid #ddd;border-radius:6px;overflow:hidden}.notifications-page .notifications-list .notification-item .notif-text .notif-row .post-preview img{width:50px;height:50px;object-fit:cover;display:block}.notifications-page .notifications-list .notification-item .notif-text .notif-row .post-preview .post-text-preview{width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;background:#f9f9f9;text-align:center;padding:5px}.notifications-page .notifications-list .notification-item .notif-text .notif-time{font-size:12px;color:#777;margin-top:2px}.notifications-page .load-more-btn{margin:15px auto;display:block;padding:8px 16px;border:none;background:#0095f6;color:#fff;border-radius:4px;cursor:pointer;font-size:14px}.notifications-page .load-more-btn:disabled{background:#aaa}.notif-badge{background:red;color:#fff;font-size:11px;font-weight:700;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-left:6px}.settings-page{width:100vh;height:100vh}.settings-page h2{display:flex;align-items:center;justify-content:center}.settings-page .settings-actions{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center}.settings-page .settings-actions button{padding:15px 25px;border:unset;border-radius:15px;color:#212121;z-index:1;background:#e8e8e8;position:relative;font-weight:1000;font-size:17px;-webkit-box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);box-shadow:4px 8px 19px -3px #00000045;transition:all .25s;overflow:hidden}.settings-page .settings-actions button:before{content:"";position:absolute;top:0;left:0;height:100%;width:0;border-radius:15px;background-color:#212121;z-index:-1;-webkit-box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);box-shadow:4px 8px 19px -3px #00000045;transition:all .25s}.settings-page .settings-actions button:hover{color:#e8e8e8}.settings-page .settings-actions button:hover:before{width:100%}.login{height:100vh;background-image:url(https://img.freepik.com/free-photo/old-cement-wall-texture_1149-1280.jpg?semt=ais_hybrid&w=740&q=80);background-size:cover;background-position:center;background-color:#bbbac2;display:flex;align-items:center;justify-content:center}.login .card{display:flex;background-color:#fff;color:#000;height:600px;width:50%;border-radius:20px;overflow-x:hidden}.login .card .left{flex:1;display:flex;flex-direction:column;background:linear-gradient(#ccccccab,#a8a8a879),url(https://wallpapers.com/images/hd/black-and-white-cat-rolls-over-at-piano-keys-bys0wmzobswwn0k5.jpg) center;background-size:cover;padding:20px;color:#000}.login .card .left h1{font-size:40px;margin-bottom:-10px;margin-top:-10px}.login .card .left p{font-size:22px}.login .card .left span{font-size:18px;margin-bottom:50px;margin-top:200px}.login .card .left button{cursor:pointer;border:0;color:#000;border-radius:4px;font-weight:400;margin:0 10px;width:100px;padding:5px 0;box-shadow:0 0 20px #6855e033;transition:.4s;background-color:#ababab;border:1px solid rgb(104,85,224)}.login .card .right{flex:1;flex-direction:column;display:flex;justify-content:center;align-items:center;gap:10px;padding:30px}.login .card .right .divider{display:flex;justify-content:center;align-items:center}.login .card .right button{cursor:pointer;color:#000;border:0;border-radius:4px;font-weight:600;margin:0 10px;width:200px;padding:10px 0;box-shadow:0 0 20px #6855e033;transition:.4s;background-color:#fff;border:1px solid rgb(104,85,224)}.login .card .right h1{font-size:40px}.login .card .right form{display:flex;flex-direction:column;gap:50px;width:100%;margin:0 auto}.login .card .right form button{cursor:pointer;color:#000;border:0;border-radius:4px;font-weight:600;margin:0 10px;width:200px;padding:10px 0;box-shadow:0 0 20px #6855e033;background-color:#fff;border:1px solid rgb(104,85,224)}.login .card .right form input{font-size:16px;border:none;border-bottom:1px solid lightgray}@media screen and (min-width: 300px) and (max-width: 550px){.login .card{display:flex;flex-direction:column;min-width:280px;max-width:530px;width:380px}.login .card .left{display:flex;justify-content:center;gap:10px;height:20%;margin:auto 0}.login .card .left h1{font-size:24px;margin-top:5px}.login .card .left p{font-size:16px}.login .card .left span{font-size:14px;margin-bottom:10px;margin-top:0}.login .card .right .google-login-btn{display:flex;align-items:center;justify-content:center;gap:5px}.login .card .right h1{font-size:20px}.login .card .right form{font-size:16px;display:flex;justify-content:center;align-items:center;gap:25px}.login .card .right form button{cursor:pointer;color:#000;border:0;border-radius:4px;font-weight:600;width:200px;padding:10px 0;box-shadow:0 0 20px #6855e033;transition:.4s;background-color:#fff;border:1px solid rgb(104,85,224)}}.register{height:100vh;background-image:url(https://img.freepik.com/free-photo/old-cement-wall-texture_1149-1280.jpg?semt=ais_hybrid&w=740&q=80);background-size:cover;background-position:center;background-color:#bbbac2;display:flex;align-items:center;justify-content:center}.register .card{display:flex;flex-direction:row-reverse;background-color:#fff;color:#000;height:600px;width:50%;border-radius:20px;overflow-x:hidden}.register .card .left{flex:1;display:flex;flex-direction:column;justify-content:center;gap:40px;background:linear-gradient(#ccccccab,#a8a8a879),url(https://cdn.shopify.com/s/files/1/3026/6974/files/kitten-black-and-white.jpg?v=1534094604) center;background-size:cover;padding:30px;color:#000}.register .card .left h1{font-size:40px}.register .card .left p{font-size:22px}.register .card .left span{font-size:18px}.register .card .left button{cursor:pointer;border:0;border-radius:4px;font-weight:400;margin:0 10px;color:#000;width:100px;padding:5px 0;box-shadow:0 0 20px #6855e033;transition:.4s;background-color:#ababab;border:1px solid rgb(104,85,224)}.register .card .right{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:30px}.register .card .right h1{font-size:40px}.register .card .right form{display:flex;flex-direction:column;gap:50px;width:80%}.register .card .right form input{font-size:16px;border:none;border-bottom:1px solid lightgray}.register .card .right form button{cursor:pointer;border:0;border-radius:4px;font-weight:600;margin:0 10px;width:200px;padding:10px 0;box-shadow:0 0 20px #6855e033;color:#000;background-color:#fff;border:1px solid rgb(104,85,224)}@media screen and (min-width: 300px) and (max-width: 550px){.register .card{display:flex;flex-direction:column;min-width:280px;max-width:530px;width:380px}.register .card .left{gap:10px}.register .card .left h1{font-size:24px}.register .card .left p{font-size:16px}.register .card .left span{font-size:14px;margin-bottom:10px}.register .card .right h1{font-size:20px;margin:10px 0}.register .card .right form{font-size:16px;display:flex;justify-content:center;align-items:center;gap:20px}.register .card .right form button{cursor:pointer;border:0;border-radius:4px;font-weight:600;width:200px;padding:10px 0;box-shadow:0 0 20px #6855e033;color:#000;background-color:#fff;border:1px solid rgb(104,85,224)}}body{font-family:Poppins,sans-serif;margin:0;padding:0}