*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif}body{background-color:#f0f7f7;width:100%;min-height:100vh}.app{width:100%}.background-box{background-color:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 5px 10px #eee}.profile-picture{border:1px solid #ddd;border-radius:50%}.toast{pointer-events:none;z-index:100000;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast>p{text-align:center;border-radius:10px;padding:20px 15px;font-weight:700}.verify-email .user-email{text-align:center;background-color:#f5f5f5;border:1px solid #ccc;border-radius:10px;padding:16px 24px;font-weight:500}.auth{justify-content:center;align-items:center;height:100vh;display:flex}.auth>div{padding:40px}.auth h1{text-align:center;margin-bottom:24px;font-size:36px}.auth form label p{margin-bottom:5px}.auth form input{border:1px solid #ccc;border-radius:6px;width:100%;padding:10px;font-size:16px}.auth form button{cursor:pointer;background-color:#3ac0ff;border:none;border-radius:6px;margin-top:8px;padding:12px 24px;font-size:16px;transition:opacity .3s}.auth form button:hover{opacity:.8}.actions-buttons{flex-flow:wrap;justify-content:end;gap:12px;display:flex}.actions-buttons .back-button{background-color:#ddd}.auth>div>p{margin-top:12px}.auth form button:disabled{color:#aaa;cursor:not-allowed;background-color:#eee}.auth form button:disabled:hover{opacity:1;background-color:#eee}:root{--mobile-nav-height:80px}.main-layout{grid-template-columns:1fr clamp(220px,20vw,300px) clamp(470px,46vw,700px) 1fr;gap:25px;padding:0 10px;display:grid}nav{z-index:2;grid-column:2}main{z-index:1;grid-column:3;margin-top:10px;margin-bottom:10px}.load-posts{cursor:pointer;background-color:#eee;border:2px solid #ccc;border-radius:10px;margin:10px auto;padding:18px 26px;font-size:18px;font-weight:700;transition:background-color .3s}.load-posts:hover{background-color:#fff}.load-posts:disabled{color:#00000075;cursor:not-allowed}.load-posts:disabled:hover{background-color:#eee}@media screen and (width<=760px){.main-layout{grid-template-rows:1fr auto;grid-template-columns:auto auto;gap:10px}.nav-home{grid-column:1}main{grid-column:2}}@media screen and (width<=500px){.main-layout{grid-template-rows:1fr auto;grid-template-columns:1fr;justify-content:center;gap:0;height:100vh;position:relative}main{grid-area:1/1}.nav-home{grid-area:2/1}}.nav-home{height:calc(100vh - 1px);padding:10px 0;display:flex;position:sticky;top:0}.nav-home .nav-logo{place-self:start;width:60px;height:60px;margin-bottom:15px}.nav-home .nav-logo .logo{cursor:pointer;border-radius:10px;width:100%;padding:10px;transition:background-color .3s}.nav-home .nav-logo .logo:hover{background-color:#e6e5e5}.nav-home .nav-options-container{grid-template-rows:auto auto auto 1fr;align-content:start;gap:5px;width:100%;height:100%;display:grid}.nav-home .nav-option{color:#000;cursor:pointer;border-radius:10px;flex-wrap:nowrap;align-items:center;gap:14px;padding:10px 14px;text-decoration:none;transition:background-color .3s;display:flex}.nav-home .nav-option:hover{background-color:#e6e5e5}.nav-home .nav-option span{font-size:24px}.nav-home .nav-option>svg{align-self:center;font-size:30px}.nav-home .nav-options-container>.active{font-weight:800}.nav-home .nav-profile-container{align-self:end;min-width:0;position:relative}.nav-home .nav-profile-button{cursor:pointer;border-radius:10px;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:10px;transition:all .3s;display:flex}.nav-home .nav-profile-button:hover{background-color:#e6e5e5}.nav-home .nav-profile-container .nav-profile{flex-flow:row;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.nav-home .nav-profile .profile-picture{width:46.8px;height:46.8px}.nav-home .nav-profile .display-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:18px;font-weight:700;overflow:hidden}.nav-home .nav-profile-container svg{margin-right:8px}.nav-home .nav-profile-options-container{border:1px solid #bbb;border-radius:10px;position:absolute;bottom:70px;right:0;overflow:hidden}.nav-home .nav-profile-option{cursor:pointer;background-color:#dee6e6;align-items:center;gap:10px;padding:8px 14px;transition:background-color .3s;display:flex}.nav-home .nav-profile-option:hover{background-color:#fff}.nav-home .nav-profile-option>a{color:#000;text-decoration:none}@media screen and (width<=760px){.nav-home{align-items:center}.nav-home .nav-option{width:60px;height:60px}.nav-home .nav-option span{display:none}.nav-home .nav-option>svg{font-size:36px}.nav-home .nav-profile-button .display-name,.nav-home .nav-profile-button svg{display:none}}@media screen and (width<=500px){.nav-home{width:100%;height:var(--mobile-nav-height);z-index:5;margin:0;padding:0;position:fixed;inset:auto 0 0}.nav-home .nav-logo{display:none}.nav-home .nav-options-container{background-color:#fff;border-top:1px solid #ccc;grid-template-rows:1fr;grid-template-columns:repeat(3,minmax(0,1fr));place-items:center;gap:0;width:100%;height:100%;padding:0 20px;display:grid}.nav-home .nav-option{justify-content:center;align-items:center;width:100%;height:100%;padding:0;display:flex}.nav-home .nav-option>svg{font-size:30px}.nav-home .nav-profile-container{width:100%;min-width:0;height:100%;position:static}.nav-home .nav-profile-button{justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}.nav-home .nav-profile{justify-content:center;align-items:center;width:100%;min-width:0;height:100%;display:flex}.nav-home .nav-profile .display-name,.nav-home .nav-profile-button>svg{display:none}.nav-home .nav-profile .profile-picture{width:40px;height:40px}.nav-home .nav-profile-options-container{left:0;right:0;bottom:var(--mobile-nav-height);z-index:5;background-color:#fff;border:0;border-top:1px solid #ccc;border-radius:0;width:100%;max-width:100vw;margin:0;padding:0;position:fixed;overflow:hidden;box-shadow:0 -5px 10px #eee}.nav-home .nav-profile-option{box-sizing:border-box;background-color:#fff;border:0;border-bottom:1px solid #eee;justify-content:center;align-items:center;width:100%;min-height:50px;padding:12px 20px;display:flex}.nav-home .nav-profile-option:last-child{border-bottom:0}.nav-home .nav-profile-option:hover{background-color:#f2f2f2}.nav-home .nav-profile-option>a{color:#000;width:100%;text-decoration:none;display:block}}.modal-overlay{z-index:100;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{box-shadow:none;z-index:101;padding:24px}.horizontal{width:min(700px,100% - 32px)}.vertical{width:min(400px,100% - 32px)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.close-button{cursor:pointer;background:0 0;border:none;font-size:28px;line-height:1}.modal-content{flex-flow:column;gap:10px;display:flex}.modal-input-label{margin-bottom:5px}.modal-textarea{resize:vertical;border:1px solid #ccc;border-radius:8px;width:100%;min-height:120px;padding:10px;font-size:16px}.modal-input{border:1px solid #ccc;border-radius:6px;width:100%;padding:10px;font-size:16px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.modal-actions button{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:16px}.cancel-button{background:#ddd}.save-button,.post-button{background:#3ac0ff}.cancel-button:hover,.save-button:hover,.post-button:hover{opacity:.8}button:disabled{cursor:not-allowed;background-color:#eee}button:disabled:hover{opacity:1;background-color:#eee}.confirm-dialog-overlay{z-index:10000;background-color:#0000004d;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-dialog{box-shadow:none;flex-flow:column;gap:20px;margin:30px;padding:25px 30px;display:flex}.confirm-dialog-message>p{text-align:center;font-size:20px;font-weight:700}.confirm-dialog-actions{flex-flow:row;justify-content:flex-end;gap:10px;display:flex}.confirm-dialog-actions button{cursor:pointer;border:none;border-radius:6px;padding:10px 20px;font-size:18px}.confirm-dialog-actions .cancel-button{background-color:#ddd}.confirm-dialog-actions .confirm-button{background-color:#3ac0ff}.confirm-dialog-actions .cancel-button:hover,.confirm-dialog-actions .confirm-button:hover{opacity:.8}.confirm-dialog-actions button:disabled{cursor:not-allowed;background-color:#eee}.confirm-dialog-actions button:disabled:hover{opacity:1}.home{flex-flow:column;justify-content:center;display:flex}@media screen and (width<=500px){.home{padding-bottom:var(--mobile-nav-height)}}.post-creator-container{grid-template-columns:auto 1fr;gap:10px;width:100%;margin-bottom:12px;padding:20px;display:grid}.post-creator-container .profile-picture{width:46.8px;height:46.8px}form{grid-column:2;gap:10px;width:100%;display:grid}.post-creator-button{text-align:start;resize:none;border:1px solid #ddd;border-radius:30px;width:100%;padding:10px 25px;font-size:18px;font-weight:600;line-height:1.4;overflow-y:hidden}.post-creator-button:focus{border-color:#858585;outline:none}.post-creator-submit{cursor:pointer;background-color:#3ac0ff;border:none;border-radius:30px;grid-row:2;padding:10px 16px}@media screen and (width<=555px){.post-creator-container{display:none}}.post{grid-template-columns:auto 1fr;width:100%;margin-bottom:12px;padding:20px;display:grid}.post-author-info{gap:10px;margin-bottom:10px;display:flex}.post-author-info .profile-picture{width:46.8px;height:46.8px}.post-author-info .author-name{grid-column:1;margin-top:5px;font-size:18px;font-weight:700}.post .post-message{overflow-wrap:anywhere;grid-area:2/1/3/3}.post .post-settings-container{grid-column:2;justify-self:end;position:relative}.post .post-settings-button{color:#5e5e5e;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.post .post-settings-button:hover{background-color:#ddd}.post .post-settings-options-container{border:1px solid #bbb;border-radius:10px;position:absolute;right:0;overflow:hidden}.post-settings-options-container .post-settings-option{cursor:pointer;background-color:#dee6e6;align-items:center;gap:10px;padding:8px 14px;transition:background-color .3s;display:flex}.post-settings-options-container .post-settings-option:hover{background-color:#fff}.empty-posts{text-align:center;flex-flow:column;align-items:center;padding:15px 20px;display:flex}.empty-posts svg{margin-top:12px;font-size:56px}.profile{flex-flow:column;justify-content:center;display:flex}h3{text-align:center;color:#656565;border-bottom:1px solid #0005;margin:12px 5px;padding-bottom:12px}@media screen and (width<=500px){.profile{padding-bottom:var(--mobile-nav-height)}}:root{--top-spacing:calc(44px - 28px)}.profile-user-info-container{grid-template-rows:66px 66px auto;grid-template-columns:auto auto 1fr;padding:30px;display:grid}.profile-user-info-container .profile-picture{grid-area:1/1/3/2;width:clamp(88px,10.4vw,132px);height:clamp(88px,10.4vw,132px);margin-right:10px}.profile-user-info-container .display-username-container{margin-top:var(--top-spacing);grid-column:2}.profile-user-info-container .display-name{overflow-wrap:anywhere;font-size:24px;font-weight:800}.profile-user-info-container .username{color:#656565;margin-bottom:14px}.profile-user-info-container .edit-button{margin-top:var(--top-spacing);cursor:pointer;background-color:#eee;border:1px solid #ddd;border-radius:10px;grid-column:3;place-self:start end;align-items:center;gap:10px;margin-left:10px;padding:12px;font-size:16px;display:flex}.profile-user-info-container .edit-button:hover{background-color:#f8f8f8}.biography{grid-area:2/2/4/4;margin-top:10px}@media screen and (width<=650px){.profile-user-info-container{grid-template-rows:88px auto 1fr;grid-template-columns:auto 1fr}.profile-user-info-container .profile-picture{grid-area:1/1}.profile-user-info-container .display-username-container{grid-column:2}.profile-user-info-container .biography{grid-area:2/1/auto/3}.profile-user-info-container .edit-button{grid-area:3/1/auto/3;justify-content:center;width:100%}}.not-found{grid-template-rows:auto 1fr 1fr;min-height:100vh;display:grid}section{text-align:center;flex-flow:column;grid-column:1;justify-content:end;align-items:center;display:flex}section>h1{margin-bottom:18px;font-size:36px}section>p{line-height:22px}section>button{cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:10px;margin-top:16px;padding:14px 28px;font-size:16px}section>button:hover{background-color:#f4f4f4}.nav-not-found{border-bottom:1px solid #ccc;flex-flow:row;grid-column:1;justify-content:space-between;align-items:center;padding:8px 16px;display:flex;box-shadow:0 5px 20px #0000000b}.nav-not-found .nav-logo{cursor:pointer;flex-flow:row;align-items:center;gap:10px;padding:8px 12px;display:flex}.nav-not-found .nav-logo .logo{height:40px}.nav-not-found .nav-logo h2{font-weight:400}.nav-not-found .nav-auth{cursor:pointer;padding:16px 12px;font-size:18px}