form.comment-form{width:100%;max-width:unset}.comment-upload-wrapper{display:flex;align-items:center;gap:12px;margin-top:5px}.add-photo-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:background-color .2s;color:#5f6368;font-size:.9rem;font-weight:500}.add-photo-btn:hover{background-color:var(--primary)}.icon-photo{width:20px;height:20px;filter:opacity(.7)}.file-name-preview{font-size:.8rem;color:#1a73e8;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-button{display:flex;flex-direction:row;justify-content:space-between;margin-top:20px}.comment-item{display:flex;flex-direction:column;margin-bottom:25px}.comment-item:hover{box-shadow:var(--shadow2)}.comment-actions>button{background-color:var(--main-bg);color:var(--highlight2)}.comment-actions>button:hover{background-color:var(--primary)}img.comment-img{margin:15px auto;width:100%}textarea.comment-input{font-size:var(--text-sm);padding:5px;font-family:inherit;height:80px;resize:none;border-radius:calc(var(--radius) + 2px)}.comment-header{font-family:var(--font-serif);margin-block:15px;font-size:var(--text-2xl)}.signin-prompt-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-top:20px;text-align:center}.signin-prompt-container p{color:#5f6368;font-size:1.1rem;margin-bottom:20px}.btn-signin-prompt{padding:10px 24px;background-color:var(--main-bg);color:#000;border:1px solid var(--primary);border-radius:8px;text-decoration:none;font-weight:500;transition:background-color .2s}.btn-signin-prompt:hover{background-color:#f8f9fa;border-color:#d2d2d2}.header-comment{display:flex;align-items:center;justify-content:space-between;margin-block:5px;height:25px}.paragraph-comment{line-height:var(--lines);font-size:var(--text-sm)}.list-image-container{width:100%;max-height:250px;overflow-y:scroll;margin:10px 0;border-radius:4px}.list-post-image{width:100%;height:100%;object-fit:cover}img.comment-img-small{max-height:150px}.left-btn,.right-btn{display:flex;height:100%;flex-wrap:wrap;align-content:flex-end;align-items:flex-end}.right-btn>button,.left-btn>button{max-height:30px;height:100%;padding:0 25px}.comment-item .comment-actions{opacity:0;visibility:hidden;transition:opacity .2s ease-in-out}.comment-item:hover .comment-actions{opacity:1;visibility:visible}.modal-overlay{position:fixed;background-color:var(--highlight1-8);width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:0 clamp(50px,20vw,400px);top:0;left:0;z-index:2}.modal-content{background-color:var(--main-bg);padding:24px;height:80%;width:100%;border-radius:8px}form.add-post{max-width:unset;box-shadow:unset;margin-bottom:unset;padding:unset;width:100%;display:flex;flex-direction:column;height:calc(100% - 70px)}form.add-post input,form.add-post textarea{margin-bottom:15px;border-radius:8px;border:1px solid var(--highlight2-8);box-shadow:var(--shadow);padding:5px 8px}form.edit-form{background-color:unset;max-width:unset;width:unset;margin-bottom:unset;box-shadow:unset;height:calc(100% - 25px);padding:20px 0}textarea.edit-textarea{height:100%;margin-bottom:20px;font-family:var(--font-sans);border-radius:5px;border:1px solid var(--highlight2-5);padding:5px 12px;font-size:var(--text-sm);resize:none}.modal-content h1{font-family:var(--font-serif);font-size:var(--text-2xl);margin-block:20px}header.modal-header-simple{padding:5px 0 10px}h1.h1-edit{margin:unset;padding:unset}.modal-actions{display:flex;justify-content:space-between;gap:15px;align-items:flex-end}.text-content{height:100%;width:100%;resize:none}.btn-cancel,.btn-publish{padding:8px 10px}.btn-cancel{background-color:var(--main-bg);color:var(--highlight2)}.btn-cancel:hover{background-color:var(--primary);color:var(--highlight2)}.btn-publish:hover{background-color:var(--highlight3)}.time-Info{opacity:.6;color:var(--highlight2)}.user-post-details{display:flex;flex-direction:row}.modal-overlay.view-post{display:flex;position:fixed;top:0;left:0;z-index:2;padding:0 clamp(50px,20vw,400px)}header.view-modal-header{display:flex;flex-direction:row;justify-content:space-between;width:100%;padding:unset;padding-block:10px}h1.post-title{font-size:var(--text-4xl);font-family:var(--font-serif)}div.post-content p{font-size:var(--text-lg);line-height:30px}article.full-post{overflow-y:auto;height:calc(100% - 47px)}.post-content{position:relative;gap:8px;display:flex;flex-direction:column}.post-item{background-color:var(--main-bg);padding:20px;border-radius:5px;margin:15px 0;box-shadow:var(--shadow2)}.post-item h2{margin:10px 0;font-family:var(--font-serif)}.post-item p{color:var(--highlight1-6)}.post-item:hover{border:unset;box-shadow:#63636333 0 2px 8px;cursor:pointer}.post-item:hover h2{color:var(--highlight4)}.dot.post{margin:0 5px}.dot.post,.timestamp{opacity:.6;color:var(--highlight2)}.timestamp{margin-inline:10px}.post-item{transition:background .2s;cursor:pointer}.post-item:hover{background-color:#f9f9f9}.icon-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;margin-right:10px;color:#666}.icon-btn.delete:hover{color:#d9534f}.icon-btn.edit:hover{color:#0275d8}:root{--main-bg: #f1efec;--primary: #d4c9be;--highlight1: #030303;--highlight1-6: hsla(0, 0%, 1%, .6);--highlight1-8: hsla(0, 0%, 1%, .8);--highlight2: #703b3b;--highlight3: #643030;--highlight4: #842a2a;--highlight2-8: hsla(0, 31%, 34%, .8);--highlight2-5: hsla(0, 31%, 34%, .5);--lines: 1.625;--font-sans: "Inter", sans-serif;--font-serif: "Playfair Display", serif;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-xl: 1.25rem;--text-lg: 1.125rem;--text-sm: .875rem;--container-md: 28rem;--radius: .625rem;--shadow: rgba(0, 0, 0, .16) 0px 1px 4px;--shadow2: rgba(50, 50, 93, .25) 0px 2px 5px -1px, rgba(0, 0, 0, .3) 0px 1px 3px -1px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--primary)}header{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(50px,15vw,300px);border-bottom:1px solid var(--highlight2-5)}a{text-decoration:none;color:var(--highlight2)}button{font-family:var(--font-sans);font-size:var(--text-sm);border:none;background:none;padding:5px 10px;background-color:var(--highlight2);color:var(--main-bg);border-radius:5px}button:hover{cursor:pointer}main{padding:0 clamp(50px,22vw,300px)}.main-container{min-width:300px}input{padding:5px 12px;margin-bottom:15px;border:1px solid var(--highlight2-5);border-radius:5px;line-height:var(--text-2xl)}nav{display:flex;align-items:center}label{font-family:var(--font-sans);font-size:var(--text-sm);margin-bottom:5px}.dot{margin:0 2px 0 6px}hr.divider{margin-block:15px;opacity:.6}@media(max-width:700px){.modal-overlay.view-post,.modal-overlay{padding:0 70px}header{padding:10px 30px}.button.btn.logout{margin:unset}}@media(max-width:600px){main,.modal-overlay.view-post,.modal-overlay{padding:0 55px}}@media(max-width:500px){main,.modal-overlay.view-post,.modal-overlay{padding:0 40px}nav{align-items:end;flex-direction:column}.btn.get-started,button.btn.logout,span.user-name{margin:0!important}}@media(max-width:400px){main,.modal-overlay.view-post{padding:10px}}.logo{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:600}form{display:flex;flex-direction:column;background-color:var(--main-bg);max-width:var(--container-md);width:100%;margin-bottom:15px;border-radius:calc(var(--radius) + 4px);text-align:start;padding:24px;box-shadow:var(--shadow)}section.auth-container{display:flex;flex-direction:column;align-items:center}section.auth-container div{margin-bottom:25px;text-align:center}section.auth-container div h2{font-size:var(--text-3xl)}section.auth-container div p{color:var(--highlight2-8)}.h-form{font-size:var(--text-xl)}.p-form,.h-form{text-align:start}div.title{margin-top:20px}h1.title{font-size:var(--text-3xl);font-family:var(--font-serif)}h1.title.main{font-size:var(--text-5xl)}h1.title.main{margin-top:30px;margin-bottom:10px}p.paragraph.main{margin-bottom:30px;color:var(--highlight1-6)}.title h2{font-family:var(--font-serif);margin-bottom:5px}span.user-name{margin:0 15px;color:var(--highlight2-8)}button.btn.logout{background-color:var(--primary);color:var(--highlight2);border:1px solid var(--highlight2);margin:0 15px}button.btn{display:flex;align-items:center;gap:5px;padding:5px 10px}.btn.sign-in button{border:1px solid var(--highlight2);color:var(--highlight2);background-color:var(--primary)}.btn.get-started{color:var(--main-bg);background-color:var(--highlight2);margin:0 10px;border-radius:5px}.icon{width:18px;height:18px;fill:currentColor}.pagination-controls{display:flex;justify-content:center;margin-top:20px}.comment-icon{width:16px;height:16px}.comment-count-pill{display:flex;align-items:center;opacity:.6;padding-block:10px}.demo{opacity:.6;margin-top:10px}