header[data-v-0374ce8c]{margin-bottom:var(--size-900)}@media (max-width: 375px){header h1[data-v-0374ce8c]{font-size:var(--fs-600);line-height:var(--size-700)}}header span[data-v-0374ce8c]{width:var(--size-900);height:var(--size-700);display:flex;align-items:center;justify-content:center;padding:0;margin-left:var(--size-300);border-radius:var(--size-100)}@media (max-width: 375px){header span[data-v-0374ce8c]{margin-left:var(--size-100)}}header a[data-v-0374ce8c]{line-height:var(--size-600)}@media (max-width: 375px){header a[data-v-0374ce8c]{font-size:var(--fs-350);line-height:var(--size-500)}}.item[data-v-d63ee27b]{border-radius:var(--size-100);padding:var(--size-600)}.item[data-v-d63ee27b]:hover{background-color:var(--clr-neutral-300)}.item.has-private-message[data-v-d63ee27b]:hover{background-color:var(--clr-neutral-100)}.item.has-private-message:hover .private-message[data-v-d63ee27b]{background-color:var(--clr-neutral-300)}.item[data-v-d63ee27b]:not(:last-child){margin-bottom:var(--size-200)}@media (max-width: 375px){.item[data-v-d63ee27b]{padding:var(--size-300)}}.item .avatar[data-v-d63ee27b]{margin-right:var(--size-600)}@media (max-width: 375px){.item .avatar[data-v-d63ee27b]{margin-right:var(--size-300)}}.item .avatar img[data-v-d63ee27b]{width:3rem;height:3rem;min-width:3rem;min-height:3rem}@media (max-width: 375px){.item .avatar img[data-v-d63ee27b]{width:2.4375rem;height:2.4375rem;min-width:2.4375rem;min-height:2.4375rem}}.item .profile-image[data-v-d63ee27b]{margin-left:auto}.item .profile-image img[data-v-d63ee27b]{width:3rem;height:3rem;min-width:3rem;min-height:3rem}@media (max-width: 375px){.item .profile-image img[data-v-d63ee27b]{width:2.4375rem;height:2.4375rem;min-width:2.4375rem;min-height:2.4375rem}}.item .private-message[data-v-d63ee27b]{margin-top:.8125rem;border:1px solid var(--clr-neutral-400);border-radius:var(--size-100);padding:var(--size-400)}.item.unread[data-v-d63ee27b]{cursor:pointer}.item.unread p[data-v-d63ee27b]:after{display:inline-flex;content:"";width:var(--size-200);height:var(--size-200);background-color:var(--clr-primary-400);border-radius:var(--size-100);margin-left:var(--size-200)}.item.unread[data-v-d63ee27b]:hover{background-color:var(--clr-neutral-100)}.item.unread.has-private-message[data-v-d63ee27b]:hover{background-color:var(--clr-neutral-300)}.item.unread.has-private-message:hover .private-message[data-v-d63ee27b]{background-color:var(--clr-neutral-100)}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}html,body{height:100%}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg{max-width:100%;display:block}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--clr-primary-400: hsl(1, 90%, 64%);--clr-primary-700: hsl(219, 85%, 26%);--clr-neutral-100: hsl(0, 0%, 100%);--clr-neutral-300: hsl(210, 60%, 98%);--clr-neutral-400: hsl(211, 68%, 94%);--clr-neutral-500: hsl(205, 33%, 90%);--clr-neutral-600: hsl(219, 14%, 63%);--clr-neutral-800: hsl(219, 12%, 42%);--clr-neutral-900: hsl(224, 21%, 14%);--ff-primary: "Plus Jakarta Sans", sans-serif;--ff-body: var(--ff-primary);--fw-regular: 500;--fw-bold: 800;--size-100: .25rem;--size-200: .5rem;--size-300: .6875rem;--size-350: .875rem;--size-400: 1rem;--size-500: 1.125rem;--size-600: 1.25rem;--size-700: 1.5rem;--size-800: 1.75rem;--size-900: 2rem;--fs-100: var(--size-100);--fs-200: var(--size-200);--fs-300: var(--size-300);--fs-350: var(--size-350);--fs-400: var(--size-400);--fs-500: var(--size-500);--fs-600: var(--size-600);--fs-700: var(--size-700);--fs-800: var(--size-800);--fs-900: var(--size-900);--fs-body: var(--fs-400)}.bg-primary-400{background-color:var(--clr-primary-400)}.bg-primary-700{background-color:var(--clr-primary-700)}.bg-neutral-100{background-color:var(--clr-neutral-100)}.bg-neutral-300{background-color:var(--clr-neutral-300)}.bg-neutral-400{background-color:var(--clr-neutral-400)}.bg-neutral-500{background-color:var(--clr-neutral-500)}.bg-neutral-600{background-color:var(--clr-neutral-600)}.bg-neutral-800{background-color:var(--clr-neutral-800)}.bg-neutral-900{background-color:var(--clr-neutral-900)}.text-primary-400{color:var(--clr-primary-400)}.text-primary-700{color:var(--clr-primary-700)}.text-neutral-100{color:var(--clr-neutral-100)}.text-neutral-300{color:var(--clr-neutral-300)}.text-neutral-400{color:var(--clr-neutral-400)}.text-neutral-500{color:var(--clr-neutral-500)}.text-neutral-600{color:var(--clr-neutral-600)}.text-neutral-800{color:var(--clr-neutral-800)}.text-neutral-900{color:var(--clr-neutral-900)}.text-line-through{text-decoration:line-through}.fw-regular{font-weight:var(--fw-regular)}.fw-bold{font-weight:var(--fw-bold)}.fs-body{font-size:var(--fs-body)}.ff-primary{font-family:var(--ff-primary)}.ff-heading{font-family:var(--ff-heading)}.fs-400{font-size:var(--fs-400)}.fs-500{font-size:var(--fs-500)}.fs-600{font-size:var(--fs-600)}.fs-700{font-size:var(--fs-700)}.fs-800{font-size:var(--fs-800)}.fs-900{font-size:var(--fs-900)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.justify-content-end{justify-content:end}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.text-center{text-align:center}.text-decoration-none{text-decoration:none}strong{font-weight:var(--fw-bold)}body{font-family:var(--ff-body);font-size:var(--fs-body);color:var(--clr-neutral-800);background-color:var(--clr-neutral-300)}@media (max-width: 375px){body{font-size:var(--fs-350);line-height:var(--size-600)}}#app{min-height:100vh;display:flex;justify-content:center;align-items:center}#app main .container{width:730px;padding:2rem 2rem 0;border-radius:1rem}@media (max-width: 375px){#app main .container{width:100vw;padding:1rem 1rem 0}}