@import"https://fonts.googleapis.com/css2?family=Knewave&family=Roboto&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;font-family:roboto,sans-serif;--background-color: hsl(180, 7%, 19%);--middleground-color: hsl(193, 27%, 31%);--foreground-color: hsl(182, 26%, 72%);--highlight-color: hsl(164, 45%, 94%);--text-muted: hsl(0, 0%, 90%);--text-sharp: hsl(0, 0%, 95%);--large-shadow: 0px 3px 10px -4px hsl(0, 0%, 0%);--small-shadow: 0px 2px 5px -1px hsl(0, 0%, 0%);--red-color: hsl(0, 74%, 63%);--background-img-filter: brightness(0) saturate(100%) invert(14%) sepia(10%) saturate(643%) hue-rotate(131deg) brightness(98%) contrast(84%);--middleground-img-filter: brightness(0) saturate(100%) invert(31%) sepia(27%) saturate(561%) hue-rotate(146deg) brightness(95%) contrast(89%);--foreground-img-filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(382%) hue-rotate(127deg) brightness(84%) contrast(85%);--highlight-img-filter: brightness(0) saturate(100%) invert(91%) sepia(21%) saturate(78%) hue-rotate(114deg) brightness(102%) contrast(94%);--text-muted-img-filter: brightness(0) saturate(100%) invert(99%) sepia(5%) saturate(833%) hue-rotate(207deg) brightness(114%) contrast(80%)}#root{width:100%;height:100vh;display:grid;grid-template-rows:min-content 1fr min-content}header{background-color:var(--background-color);background-image:linear-gradient(var(--middleground-color),20%,var(--background-color));display:flex;align-items:center;justify-content:space-evenly;padding:.5rem 0;position:sticky;top:0;z-index:1;box-shadow:var(--small-shadow)}header>a{color:var(--text-muted);text-decoration:none}.banner{display:flex;align-items:center;gap:1rem}.banner-title{font-size:1.5rem;color:var(--text-muted);letter-spacing:.02rem}.logo-img-wrapper{width:40px;display:flex}.logo-img-wrapper img{width:100%;filter:var(--foreground-img-filter)}.header-menu a{color:var(--text-muted);text-decoration:none;outline:none}.header-menu a:hover,.header-menu a:focus{text-decoration:underline}.header-menu{display:flex;gap:3rem}header nav{display:flex;align-items:center;gap:3rem}.user-menu-btn{cursor:pointer;display:flex;align-items:center;background:none;border:none;font-size:1rem;gap:.2rem;color:var(--text-muted);font-family:roboto;border-radius:50%;border:1px solid rgb(0,0,0,0);outline:none}.user-profile-img{width:40px;height:40px;overflow:hidden;border-radius:50%}.user-menu-btn:hover,.user-menu-btn:focus{border-color:var(--foreground-color)}.user-profile-img.default{filter:var(--foreground-img-filter)}.user-menu{position:absolute;background-color:var(--highlight-color);top:100%;right:60%;display:flex;flex-direction:column;align-items:center;border-radius:12px;box-shadow:var(--small-shadow)}.user-menu.hidden{display:none}.user-menu>*{width:10ch;text-align:center;cursor:pointer;text-decoration:none;color:var(--background-color);font-size:1rem;font-family:roboto;background:none;border:none;outline:none;padding:1rem}.user-menu>a{border-radius:10px 10px 0 0}.user-menu>button{border-radius:0 0 10px 10px}.user-menu>*:hover,.user-menu *:focus{background-color:var(--foreground-color)}.user-menu-btn-wrapper{position:relative}.header-menu-btn{cursor:pointer;outline:none;background:none;width:35px;display:flex;border:1px solid rgb(0,0,0,0);border-radius:5px;display:none}.header-menu-btn:hover,.header-menu-btn:focus{border-color:var(--text-muted)}.header-menu-btn img{width:100%;filter:var(--text-muted-img-filter)}@media only screen and (width <= 600px){.banner-title{display:none}}@media only screen and (width <= 500px){.header-menu-btn{display:flex}.header-menu{position:absolute;top:100%;left:0%;width:100%;background-color:var(--background-color);background-image:linear-gradient(var(--middleground-color) -10%,15%,var(--background-color));flex-direction:column;align-items:center;gap:2rem;padding:2rem 0;transform-origin:top;animation-name:drop-down;animation-fill-mode:backwards;animation-timing-function:ease-in-out;animation-duration:.4s}.header-menu.hidden{display:none}}@keyframes drop-down{0%{transform:scaleY(0)}70%{transform:scaleY(1.2)}to{transform:scaleY(1)}}footer{background-color:var(--background-color);padding:1rem 0;color:var(--text-muted);display:flex;justify-content:center}.error-popup{position:fixed;background-color:var(--red-color);padding:.5rem 1rem;bottom:51px;width:100%;display:flex;align-items:center;gap:1rem;z-index:1;color:var(--background-color)}.error-popup p{flex:1;word-break:break-word;font-weight:700}.error-popup button{width:30px;display:flex;outline:none;background:none;border:none;cursor:pointer;--filter: var(--background-img-filter)}.error-popup button img{filter:var(--filter);width:100%}.error-popup button:hover,.error-popup button:focus{--filter: var(--highlight-img-filter) }main.auth-page{background-color:var(--background-color);display:flex;justify-content:center;align-items:center;background-image:linear-gradient(var(--middleground-color),.1%,var(--background-color))}.auth-modal{background-color:var(--middleground-color);padding:2rem;border-radius:10px;box-shadow:var(--large-shadow);display:flex;flex-direction:column;align-items:center;margin:1rem;width:min(303px,100%);background-image:linear-gradient(var(--foreground-color) .1%,.2%,var(--middleground-color))}.auth-modal form{display:flex;flex-direction:column;gap:1.5rem;width:100%}.auth-modal form label{display:block;color:var(--text-muted);margin-left:.1rem;margin-bottom:.1rem;font-size:clamp(1rem,.5rem + 2vw,1.1rem);font-weight:700}.auth-modal form input{width:100%;border:2px solid var(--foreground-color);background-color:var(--background-color);border-radius:10px;font-size:1.1rem;min-height:3.5ch;color:var(--text-muted);outline:none;padding:.4rem;font-family:roboto,sans-serif}.auth-modal form input:focus,.auth-modal form input:hover{border-color:var(--highlight-color);background-color:var(--middleground-color)}.auth-modal form>:last-child{display:flex;justify-content:center}.auth-modal button{cursor:pointer;background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color),10%,var(--foreground-color));box-shadow:var(--small-shadow);color:var(--middleground-color);border:none;padding:.5rem 1rem;font-size:1rem;font-weight:700;border-radius:10px;will-change:color;transition:all .1s linear}.auth-modal button:hover,.auth-modal button:focus{box-shadow:none;background-image:none;color:var(--background-color)}.change-form-link{font-size:clamp(1rem,.5rem + 2vw,1.1rem);color:var(--text-muted);margin-top:2rem}.auth-modal a:hover,.auth-modal a:focus{color:var(--foreground-color)}.auth-banner{display:flex;width:100%;align-items:center;justify-content:space-around}.auth-banner p{color:var(--text-muted);font-size:1.4rem;font-weight:700}.auth-img-wrapper{max-width:50px}.auth-img-wrapper img{width:100%;filter:var(--filter)}.auth-modal .errors{margin-bottom:1rem;list-style:none;color:var(--text-muted);display:flex;flex-direction:column;gap:.2rem;width:100%}.home-link{width:100%;text-decoration:none;color:var(--text-muted);margin-bottom:1rem;--filter: var(--background-img-filter);outline:none}.home-link:hover,.home-link:focus{text-decoration:underline;--filter: var(--highlight-img-filter)}main.new-post-page{background-color:var(--middleground-color);background-image:linear-gradient(var(--foreground-color) -1%,0%,var(--middleground-color));display:flex;justify-content:center;padding-top:clamp(2rem,1rem + 7vw,5rem)}.post-form{display:flex;flex-direction:column;gap:2rem;width:min(99%,600px);margin:1rem}.post-form input,.post-form textarea{font-size:clamp(.9rem,.5rem + 2vw,1rem);border-radius:10px;padding:.4rem;outline:none;background-color:var(--background-color);border:2px solid var(--foreground-color);font-family:roboto;width:100%;color:var(--text-muted);box-shadow:var(--small-shadow)}.post-form input:hover,.post-form textarea:hover,.post-form input:focus,.post-form textarea:focus{box-shadow:none}.post-form *::placeholder{color:gray}.post-form textarea{min-height:clamp(200px,150px + 5vw,400px);max-height:500px;resize:none;field-sizing:content;word-break:break-word;scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scrollbar-color:var(--foreground-color) rgb(0,0,0,0)}.post-form>:last-child{display:flex;width:100%;justify-content:center;gap:4rem}.post-form button,.post-form label{cursor:pointer;background-color:var(--foreground-color);outline:none;border:none;font-size:1rem;font-family:roboto;color:var(--middleground-color);padding:.5rem 1rem;border-radius:10px;box-shadow:var(--small-shadow);background-image:linear-gradient(var(--highlight-color),20%,var(--foreground-color));will-change:color;transition:all .1s ease-in-out}.post-form button:hover,.post-form button:focus,.post-form label:hover,.post-form label:focus{box-shadow:none;color:var(--background-color);background-image:none}.post-form .errors{list-style:none;display:flex;flex-direction:column;gap:.4rem;color:var(--text-muted)}.post-form input[type=file]{display:none}.image-div{display:flex;width:100%;justify-content:center;gap:1rem;flex-wrap:wrap}#delete-img:checked+label{box-shadow:none;background-image:none;background-color:var(--red-color);color:var(--text-muted)}main.edit-post-page{background-color:var(--middleground-color);background-image:linear-gradient(var(--foreground-color) -1%,0%,var(--middleground-color));display:flex;justify-content:center;padding-top:clamp(2rem,1rem + 7vw,5rem)}.loading-img-wrapper{width:150px}.loading-img-wrapper img{width:100%;filter:var(--background-img-filter);animation-name:blink;animation-duration:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode:backwards}@keyframes blink{0%{opacity:.2}to{opacity:1}}main.posts-page{background-color:var(--middleground-color);background-image:linear-gradient(var(--foreground-color) -2%,10%,var(--middleground-color));display:flex;flex-direction:column;align-items:center;gap:4rem;padding:4rem 0;overflow:auto;max-height:calc(100vh - 58px);scrollbar-width:thin;scroll-behavior:smooth;scrollbar-color:var(--background-color) rgb(0,0,0,0)}main.posts-page .loading-img-wrapper{margin-top:2rem}.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,450px));width:min(1200px,100%);justify-content:center;gap:2rem;padding:0 1rem}.filter-choices{display:flex;gap:2rem}.filter-choices button{cursor:pointer;border:none;border-radius:10px;outline:none;color:var(--middleground-color);background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color) -1%,20%,var(--foreground-color));padding:.5rem 1rem;font-family:roboto,sans-serif;font-size:1rem;font-weight:700;box-shadow:var(--small-shadow);will-change:color;transition:all .1s ease-in-out}.filter-choices button:hover,.filter-choices button:focus{box-shadow:none;background-image:none;color:var(--background-color)}.post-link{text-decoration:none;width:min(450px,100%);color:var(--background-color);border-radius:10px}.post-card{display:flex;flex-direction:column;gap:.5rem;width:min(450px,100%);background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color) -1%,10%,var(--foreground-color));padding:1rem;box-shadow:var(--large-shadow);border-radius:10px;will-change:color;transition:all .1s ease-in-out}.post-card-user-info{display:flex;gap:.5rem;align-items:center;--filter: var(--background-img-filter)}.post-card-user-info:hover,.post-card-user-info:focus{--filter: var(--middleground-img-filter);color:var(--middleground-color);text-decoration:underline}.post-card-user-info p{flex:1;overflow:hidden;text-overflow:ellipsis}.post-card-user-img-wrapper{width:35px;height:35px;border-radius:50%;overflow:hidden;display:flex}.post-card-user-img-wrapper img{width:100%}.post-card-user-img-wrapper img.default{filter:var(--filter)}.post-card-img-wrapper{width:90px;height:90px;display:flex}.post-card-img-wrapper img{width:100%}.post-card-likes{display:flex;align-items:center;gap:.3rem}.post-card-likes img{width:25px;filter:var(--background-img-filter)}.post-card-meta-info{display:flex;justify-content:space-between;align-items:center}.post-edit-btn{width:25px;display:flex;background:none;border:none;outline:none;cursor:pointer;--filter: var(--background-img-filter)}.post-edit-btn img{width:100%;filter:var(--filter)}.post-edit-btn:hover,.post-edit-btn:focus{--filter: var(--highlight-img-filter) }.post-card-date{display:flex;width:100%;justify-content:end;opacity:.8;font-size:.9rem}.post-card-title{font-size:clamp(1rem,.5rem + 2vw,1.1rem);font-weight:700;margin-bottom:.5rem;word-break:break-word;line-height:1.5rem;letter-spacing:.02rem}.post-card:hover,.post-card:focus{background-image:none;box-shadow:none}main.post-page{background-color:var(--middleground-color);background-image:linear-gradient(var(--foreground-color) -1%,0%,var(--middleground-color));display:flex;flex-direction:column;align-items:center;padding:clamp(2rem,1rem + 7vw,5rem) 1rem 4rem 1rem;overflow:auto;max-height:calc(100vh - 58px);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scrollbar-color:var(--background-color) rgb(0,0,0,0)}.post-section{display:flex;flex-direction:column;gap:2rem;background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color) -1%,10%,var(--foreground-color));border-radius:10px;box-shadow:var(--large-shadow);padding:1rem;width:min(700px,100%)}.post-author-info{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;--filter: var(--background-img-filter);text-decoration:none;color:var(--background-color)}.post-author-info:hover,.post-author-info:focus{--filter: var(--middleground-img-filter);color:var(--middleground-color);text-decoration:underline}.post-author-img-wrapper{width:50px;height:50px;overflow:hidden;border-radius:50%;display:flex}.post-author-img-wrapper img{width:100%}.post-author-img-wrapper img.default{filter:var(--filter)}.post-author-username{flex:1;overflow:hidden;text-overflow:ellipsis}.post-date{display:flex;width:100%;justify-content:end;font-size:.9rem;opacity:.8}.post-title{font-size:clamp(1.1rem,.6rem + 3vw,1.3rem);font-weight:700;word-break:break-word;line-height:1.7rem;letter-spacing:.04rem}.post-image-wrapper{display:flex;justify-content:center;width:100%}.post-image-wrapper img{max-width:100%}.post-content{font-size:clamp(.9rem,.5rem + 2vw,1.1rem);word-break:break-word;line-height:1.5rem;letter-spacing:.02rem}.post-likes-section{display:flex;gap:.4rem;align-items:center}.post-likes-img{width:clamp(25px,20px + 2vw,30px)}.post-likes-section button{cursor:pointer;outline:none;border:none;padding:.4rem .9rem;font-size:1rem;border-radius:10px;background-color:var(--foreground-color);letter-spacing:.02rem}.post-likes-section button:focus,.post-likes-section button:hover{background-color:var(--background-color);color:var(--foreground-color)}.comments-section{margin-top:3rem;display:flex;flex-direction:column;align-items:center;width:100%;gap:4rem}.comments-section .comments{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}.comment-form{display:flex;flex-direction:column;width:min(600px,100%);align-items:end;gap:1rem}#comment-area{width:100%;font-family:roboto;font-size:1rem;padding:.4rem;border-radius:10px;background-color:var(--background-color);border:2px solid var(--foreground-color);box-shadow:var(--small-shadow);resize:none;field-sizing:content;outline:none;min-height:100px;max-height:400px;overflow:auto;word-break:break-word;color:var(--text-muted);scrollbar-color:var(--middleground-color) rgb(0,0,0,0);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;line-height:1.3rem}#comment-area:hover,#comment-area:focus{box-shadow:none}.comment-form button{cursor:pointer;outline:none;border:none;border-radius:10px;padding:.5rem 1rem;font-size:1rem;font-family:roboto,sans-serif;font-weight:700;color:var(--middleground-color);background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color),10%,var(--foreground-color));box-shadow:var(--small-shadow)}.comment-form button:hover,.comment-form button:focus{color:var(--background-color);box-shadow:none;background-image:none}.comment-form .errors{list-style:none;color:var(--text-muted);width:100%;display:flex;flex-direction:column;gap:.2rem}.comment-form-link{text-decoration:none;outline:none;background-color:var(--foreground-color);color:var(--middleground-color);padding:.5rem 1rem;border-radius:10px;box-shadow:var(--small-shadow);background-image:linear-gradient(var(--highlight-color),10%,var(--foreground-color));will-change:color;transition:all .1s ease-in-out}.comment-form-link:hover,.comment-form-link:focus{box-shadow:none;background-image:none;color:var(--background-color)}.comment-card{display:flex;flex-direction:column;padding:1rem;background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color) -1%,10%,var(--foreground-color));border-radius:10px;box-shadow:var(--small-shadow);width:min(600px,100%)}.comment-card-author{display:flex;align-items:center;gap:.5rem;color:var(--background-color);text-decoration:none;--filter: var(--background-img-filter)}.comment-card-author:hover,.comment-card-author:focus{--filter: var(--middleground-img-filter);color:var(--middleground-color);text-decoration:underline}.comment-card-img-wrapper{width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex}.comment-card-img-wrapper img{width:100%}.comment-card-img-wrapper img.default{filter:var(--filter)}.comment-card-author-name{flex:1;overflow:hidden;text-overflow:ellipsis}.comment-card-date{width:100%;display:flex;justify-content:end;font-size:.9rem;opacity:.8}.comment-card-content{margin:.6rem 0;font-size:clamp(.9rem,.5rem + 2vw,1rem)}.comment-card-options{display:flex;width:100%;justify-content:end;gap:.5rem}.comment-card-options button{cursor:pointer;outline:none;border:none;width:25px;display:flex;background:none;--filter: var(--middleground-img-filter)}.comment-card-options button img{filter:var(--filter)}.comment-card-options button:hover,.comment-card-options button:focus{--filter: var(--highlight-img-filter)}#comment-card-edit{font-family:roboto,sans-serif;font-size:clamp(.9rem,.5rem + 2vw,1rem);margin:.6rem 0;padding:.5rem;min-height:100px;max-height:400px;resize:none;field-sizing:content;border-radius:10px;outline:none;background-color:var(--background-color);color:var(--text-muted);border:2px solid var(--middleground-color);scrollbar-width:thin;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-color:var(--foreground-color) rgb(0,0,0,0)}.comment-card .errors{list-style:none;width:100%;display:flex;flex-direction:column;gap:.2rem;border-bottom:1px solid var(--background-color)}.comment-card .error{width:100%;word-break:break-word}main.profile-page{background-color:var(--middleground-color);background-image:linear-gradient(var(--foreground-color) -2%,10%,var(--middleground-color));display:flex;flex-direction:column;align-items:center;gap:6rem;padding:4rem 1rem;overflow:auto;max-height:calc(100vh - 58px);scrollbar-width:thin;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-color:var(--background-color) rgb(0,0,0,0)}.profile-section{display:flex;flex-direction:column;align-items:center;gap:4rem;width:100%}.follow-user-wrapper{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:min(600px,100%)}.follow-user-wrapper p{color:var(--highlight-color);font-size:clamp(1.3rem,1rem + 2vw,2rem);flex:1;word-break:break-word}.follow-user-wrapper button,.img-options button,.img-options label,.profile-info-edit button,.media-options button{cursor:pointer;background-color:var(--foreground-color);outline:none;border:none;font-size:1rem;font-family:roboto;color:var(--middleground-color);padding:.5rem 1rem;border-radius:10px;box-shadow:var(--small-shadow);background-image:linear-gradient(var(--highlight-color),20%,var(--foreground-color));will-change:color;transition:all .1s ease-in-out}.follow-user-wrapper button:hover,.follow-user-wrapper button:focus,.img-options button:hover,.img-options button:focus,.img-options label:hover,.img-options label:focus,.profile-info-edit button:hover,.profile-info-edit button:focus,.media-options button:hover,.media-options button:focus{box-shadow:none;color:var(--background-color);background-image:none}.profile-details{width:100%;display:flex;flex-wrap:wrap;gap:4rem;justify-content:center;align-items:center}.profile-img-info{display:flex;flex-direction:column;gap:3rem;align-items:center}.profile-img-wrapper{width:250px;height:250px;display:flex;background-color:var(--foreground-color);border-radius:50%;overflow:hidden;box-shadow:var(--small-shadow)}.profile-img-wrapper img{width:100%}.profile-img-wrapper img.default{filter:var(--background-img-filter)}.img-options{display:flex;align-items:center;gap:2rem}.img-options form input[type=file]{display:none}.profile-info-edit{display:flex;flex-direction:column;align-items:center;gap:1rem}#profile-info{outline:none;font-size:clamp(.9rem,.5rem + 2vw,1rem);font-family:roboto,sans-serif;background-color:var(--background-color);color:var(--text-muted);field-sizing:content;min-width:300px;width:min(400px,100%);max-width:400px;min-height:70px;max-height:350px;word-break:break-word;resize:none;scrollbar-gutter:stable;scrollbar-color:var(--middleground-color) rgb(0,0,0,0);scrollbar-width:thin;scroll-behavior:smooth;padding:.5rem;line-height:1.4rem;border-radius:10px;border:2px solid var(--foreground-color)}.profile-info{font-size:clamp(.9rem,.5rem + 2vw,1rem);color:var(--text-muted);line-height:1.4rem;word-break:break-word;width:min(400px,100%);max-height:500px;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth}.following-section{width:100%;display:flex;flex-direction:column;gap:4rem}.following-section>div>p{font-size:clamp(1.1rem,.7rem + 2vw,1.3rem);font-weight:700;color:var(--text-muted);margin-bottom:1rem;letter-spacing:.03rem}.following-section>div{width:100%;display:flex;flex-direction:column;align-items:center}.following-section>div>div{width:min(475px,100%);display:flex;flex-direction:column;align-items:center;gap:1rem;max-height:350px;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth}.media-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:2rem}.media-options{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.media{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.user-card-link{text-decoration:none;color:var(--background-color);width:min(450px,100%)}.user-card{display:flex;flex-direction:column;gap:.5rem;width:min(450px,100%);background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color) -1%,10%,var(--foreground-color));padding:1rem;box-shadow:var(--large-shadow);border-radius:10px;will-change:color;transition:all .1s ease-in-out}.user-card:hover,.user-card:focus{box-shadow:none;background-image:none}.user-card .user-info{display:flex;gap:.5rem;align-items:center}.user-card-img-wrapper{width:40px;height:40px;overflow:hidden;border-radius:50%;display:flex}.user-card-img-wrapper img{width:100%}.user-card-img-wrapper img.default{filter:var(--background-img-filter)}.user-card-username{flex:1;overflow:hidden;text-overflow:ellipsis}.user-card .follow-wrapper{width:100%;display:flex;justify-content:end}.user-card button{cursor:pointer;outline:none;border:2px solid var(--background-color);font-size:1rem;font-family:roboto,sans-serif;background-color:var(--background-color);color:var(--foreground-color);padding:.5rem 1rem;border-radius:10px}.user-card button:hover,.user-card button:focus{background-color:var(--foreground-color);color:var(--background-color)}.request-card{display:flex;justify-content:space-between;align-items:center;width:min(450px,100%);background-color:var(--foreground-color);background-image:linear-gradient(var(--highlight-color) -1%,10%,var(--foreground-color));padding:1rem;box-shadow:var(--large-shadow);color:var(--background-color);border-radius:10px;will-change:color;transition:all .1s ease-in-out}.request-user-img-wrapper{width:40px;height:40px;overflow:hidden;border-radius:50%;display:flex}.request-user-img-wrapper img{width:100%}.request-user-img-wrapper img.default{filter:var(--filter)}.request-user{display:flex;align-items:center;gap:.5rem;width:calc(100% - 68px);text-decoration:none;color:var(--background-color);--filter: var(--background-img-filter) }.request-user:hover,.request-user:focus{text-decoration:underline;--filter: var(--middleground-img-filter);color:var(--middleground-color)}.request-user p{flex:1;overflow:hidden;text-overflow:ellipsis}.request-options{display:flex;gap:.5rem}.request-options button{width:30px;display:flex;outline:none;border:none;background:none;cursor:pointer;--filter: var(--middleground-img-filter)}.request-options button:hover,.request-options button:focus{--filter: var(--highlight-img-filter)}.request-options button img{filter:var(--filter)}main.users-page{background-color:var(--middleground-color);background-image:linear-gradient(var(--foreground-color) -2%,10%,var(--middleground-color));display:flex;flex-direction:column;align-items:center;gap:4rem;padding:4rem 0;overflow:auto;max-height:calc(100vh - 58px);scrollbar-width:thin;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-color:var(--background-color) rgb(0,0,0,0)}main.users-page .loading-img-wrapper{margin-top:2rem}.users-page .users{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,350px));width:min(800px,100%);justify-content:center;gap:2rem;padding:0 1rem}.search-section{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;padding:0 1rem;width:min(600px,100%)}.search-section input{outline:none;background-color:var(--background-color);color:var(--text-muted);border:2px solid var(--foreground-color);border-radius:10px;font-family:roboto,sans-serif;font-size:1rem;padding:.5rem;box-shadow:var(--small-shadow);flex:1;transition:all .1s linear}.search-section input:hover,.search-section input:focus{box-shadow:none}.search-section button{cursor:pointer;background-color:var(--foreground-color);outline:none;border:none;font-size:1rem;font-family:roboto;color:var(--middleground-color);padding:.5rem 1rem;border-radius:10px;box-shadow:var(--small-shadow);background-image:linear-gradient(var(--highlight-color),20%,var(--foreground-color));will-change:color;transition:all .1s ease-in-out}.search-section button:hover,.search-section button:focus{box-shadow:none;color:var(--background-color);background-image:none}