#app{font-weight:400;text-align:center;justify-content:center;align-content:center;align-items:center;overflow:hidden;font-family:Montserrat,sans-serif;letter-spacing:0px;background-color:var(--main-background)}@property --primary-color{syntax: "<color>"; inherits: false; initial-value: #7ec696;}@property --main-background{syntax: "<color>"; inherits: false; initial-value: rgb(244,243,243);}.navbar{display:flex;justify-content:space-between;align-items:center;background:var(--main-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;position:fixed;width:100%;top:0;z-index:1000;padding:1rem 4rem;box-sizing:border-box}.navbar-logo{text-align:left}.navbar-logo img{width:50px;height:50px;margin-right:12px}.navbar-logo a{display:flex;align-items:center;font-size:1.5rem;font-weight:700;color:#000;text-decoration:none}.navbar-logo p{margin:0;font-size:16px}.navbar-logo h1{margin-top:12.5px;margin-bottom:8px;font-size:24px;text-align:left;line-height:0%}.navbar-logo strong{color:var(--primary-color)}.navbar-links{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0}.navbar-links li a{color:#333;text-decoration:none;font-size:large;transition:color .3s;border:none;background:transparent}.navbar-links li a:hover{border:none;background:transparent;color:var(--primary-color)}.navbar-links li button{color:#333;text-decoration:none;font-size:large;transition:color .3s;border:none;background:transparent}.error-message{color:red;margin-top:10px}.navbar-links li button:hover{border:none;background:transparent;color:var(--primary-color)}@media (max-width: 768px){.navbar{flex-direction:column}.navbar-logo{margin-bottom:10px}.navbar-links li a{font-size:12px}.callout{width:80vw!important}}main{margin-top:100px;height:100vh}.callout{background:#fff;padding:1rem;width:50vw;border:1px;border-radius:10px;margin:auto;box-shadow:0 0 10px #0000001a}.callout h2{font-size:xx-large}.callout img{width:80%}form{margin-bottom:100px;padding:20px;justify-content:start;text-align:left}form strong{color:#000}form h2{text-align:center}form input{flex:"1";padding:15px;border:1px solid #ccc;width:100%}form .inline-input{margin-top:10px;display:flex;gap:30px;margin-bottom:10px}form button{margin-top:10px;background:#000;color:#fff;padding:10px 20px;border:none;cursor:pointer;width:100%}.dropbtn{background-color:#3498db;color:#fff;padding:16px;font-size:16px;border:none;cursor:pointer}.dropbtn:hover,.dropbtn:focus{background-color:#2980b9}.dropdown{position:relative;display:inline-block}.dropdown-content{position:absolute;z-index:100000000;padding:20px;text-align:left;background-color:#f1f1f1;box-shadow:0 8px 16px #0003;z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#ddd}.show{display:block}.grid-panel{padding:var(--size-300);margin:var(--size-300);padding-top:10%;border-top:2px solid rgb(190,190,190);height:100vh}.grid-panel-center{padding:var(--size-300);margin:var(--size-300);border-top:2px solid rgb(190,190,190);height:100vh;width:60vw;border-right:2px solid rgb(190,190,190);border-left:2px solid rgb(190,190,190)}.view{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:100%}@media (min-width: 50em){.main{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr}.vline{border-left:1px lightgrey solid}}.menu ul{margin-left:10%}.menu ul>li{text-align:left;font-size:32px;margin-bottom:16px;padding-block:var(--size-300);list-style-type:none}.menu ul>li:hover{background-color:var(--clr-neutral-200);color:#7ec696}.menu img{width:32px;margin-right:20px}.round-button:hover{border-radius:50%;background-color:var(--clr-neutral-200)}.menu a{text-decoration:none}.menu a:link,a:visited{color:inherit}.profile-container>img{height:25%;width:100%;object-fit:cover}.profile-body{padding-left:8%;text-align:left}.profile-picture{background-color:#fff;border-radius:50%;width:300px;overflow:hidden;margin-top:-100px}.profile-picture>img{width:300px;height:300px;object-fit:cover}.message{display:flex;align-items:flex-start;padding:10px;border-bottom:1px solid #ddd}.message-content{flex-grow:1;text-align:start}.message-header{display:flex;justify-content:space-between;font-size:14px;color:#666}.username{font-weight:700}.user{display:flex;align-items:flex-start;padding:10px;border-bottom:1px solid #ddd}.user:hover{background-color:#f9f9f9;cursor:pointer}.profile-pic{width:50px;height:50px;border-radius:50%;margin-right:10px}.user-content{flex-grow:1;text-align:start}.user-header{display:flex;justify-content:space-between;font-size:14px;color:#666}.user-name{font-weight:700}.timestamp{font-size:12px}.text{font-size:16px;margin-top:5px}.search-container{padding:20px;display:flex;flex-direction:column;gap:10px;max-width:400px;max-height:600px}.toast{position:fixed;bottom:20%;padding:.25em 1.5em;background-color:var(--clr-neutral-200)}.dialog-content[data-v-de957737]{padding:1rem;border:none;background:#fff;border-radius:8px;min-width:300px}.dialog-footer[data-v-de957737]{display:flex;justify-content:space-between;margin-top:1rem}.postBar{background-color:#fff;margin:20px;padding:10px;border-radius:8px}.input-container{display:flex;align-items:center;gap:10px}.options-bar{margin-top:10px;display:flex;justify-content:flex-end}.char-count{text-align:right;font-size:14px;color:#666;margin-top:5px}.success-message{color:green;font-size:14px;margin-top:5px}.error-message{color:red;font-size:14px;margin-top:5px}.options-bar button{font-size:16px;border:none;padding:16px;border-radius:100px;width:120px;color:#fff;background-color:#7ec696;transition:background-color .3s ease,transform .2s ease}.options-bar button:hover{background-color:#6aad82;transform:scale(1.05)}.postBar img{width:100px;height:100px;border-radius:50%}.postBar textarea{width:100%;height:80px;border:1px solid #ccc;border-radius:5px;padding:10px;font-size:14px;resize:none}button{font-size:16px;border:none;padding:16px;border-radius:100px;color:#fff;background-color:#7ec696;transition:background-color .3s ease,transform .2s ease}button:hover{background-color:#6aad82;transform:scale(1.05)}.feed{background-color:#fff;margin:20px;padding:10px;border-radius:8px}.scroll-container{max-height:500px;overflow-y:auto;padding:10px}.content{display:flex;flex-direction:column}