main.userprofilepage{padding:0;background:#fff;color:#333}main.userprofilepage header>*{padding:0;padding-left:1rem;padding-right:1rem}@media (min-width:769px){main.userprofilepage header>*{padding-left:var(--page-padding-triple);padding-right:var(--page-padding-triple)}}main.userprofilepage .banner{position:relative}main.userprofilepage .banner .background-blur-image{position:absolute;top:0;right:0;bottom:0;left:0}main.userprofilepage .banner .background-blur-image::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;backdrop-filter:blur(40px)}main.userprofilepage .banner .background-blur-image>figure{width:100%;height:100%}main.userprofilepage .banner .header-image{position:relative;aspect-ratio:21/8}main.userprofilepage .banner .header-image .add-new-header-banner-button{font-size:.7rem;position:absolute;right:0;bottom:0;margin:.25rem;padding:.4rem;font-weight:600}@media (min-width:769px){main.userprofilepage .banner .header-image .add-new-header-banner-button{margin:.75rem}}main.userprofilepage .banner .header-image .add-new-header-banner-button i,main.userprofilepage .banner .header-image .add-new-header-banner-button svg{margin-right:.25rem;width:.85rem}main.userprofilepage .banner .header-image>figure,main.userprofilepage .banner .header-image>figure img{aspect-ratio:21/8}main.userprofilepage .lower-header{padding-bottom:.5rem;margin-bottom:.5rem}main.userprofilepage .lower-header .wrapper{display:grid;grid-template-areas:"profile-picture name-and-friends""buttons buttons";grid-template-columns:8rem 1fr}@media (min-width:769px){main.userprofilepage .lower-header .wrapper{padding-left:1rem;padding-right:1rem;grid-template-areas:"profile-picture name-and-friends . buttons";grid-template-columns:10rem 20rem 1fr auto}}main.userprofilepage .lower-header .profile-picture{position:relative;grid-area:profile-picture;width:8rem;height:8rem;margin-top:-1.5rem}@media (min-width:769px){main.userprofilepage .lower-header .profile-picture{margin-top:-2rem;width:10rem;height:10rem}}main.userprofilepage .lower-header .profile-picture:has(>svg){background:#fff;border-radius:100%;padding:2rem}main.userprofilepage .lower-header .profile-picture figure{border-radius:100%}main.userprofilepage .lower-header .profile-picture>svg{width:100%;height:100%;fill:#eee}main.userprofilepage .lower-header .profile-picture .add-new-profile-image-button{border-radius:50%;position:absolute;right:0;bottom:0;margin:.5rem;padding:.25rem}main.userprofilepage .lower-header .profile-picture .add-new-profile-image-button i,main.userprofilepage .lower-header .profile-picture .add-new-profile-image-button svg{width:.75rem;height:.75rem}@media (min-width:769px){main.userprofilepage .lower-header .profile-picture .add-new-profile-image-button{margin:1rem;padding:.5rem}main.userprofilepage .lower-header .profile-picture .add-new-profile-image-button i,main.userprofilepage .lower-header .profile-picture .add-new-profile-image-button svg{width:1rem;height:1rem}}main.userprofilepage .lower-header .name-and-friends{grid-area:name-and-friends}main.userprofilepage .lower-header .buttons{grid-area:buttons}main.userprofilepage .name-and-friends{padding:.75rem}@media (min-width:769px){main.userprofilepage .name-and-friends{padding:1rem}}main.userprofilepage .name-and-friends>*{line-height:1rem;margin:0;padding:0}main.userprofilepage .name-and-friends .name{font-size:1.25rem;display:flex;flex-direction:column}main.userprofilepage .name-and-friends .name small{font-size:.65rem;color:#888}main.userprofilepage .name-and-friends .amount-friends{font-size:.7rem;font-weight:600}main.userprofilepage .name-and-friends .friends-images{display:flex;flex-direction:row-reverse;align-items:center;justify-content:start}main.userprofilepage .name-and-friends .friends-images a,main.userprofilepage .name-and-friends .friends-images strong{overflow:hidden;padding:.1rem;background:#fff;border-radius:100%;margin-left:-.5rem;width:2rem;height:2rem}main.userprofilepage .name-and-friends .friends-images a figure,main.userprofilepage .name-and-friends .friends-images a i,main.userprofilepage .name-and-friends .friends-images a svg,main.userprofilepage .name-and-friends .friends-images strong figure,main.userprofilepage .name-and-friends .friends-images strong i,main.userprofilepage .name-and-friends .friends-images strong svg{border-radius:100%;width:100%;height:100%}main.userprofilepage .name-and-friends .friends-images a:hover,main.userprofilepage .name-and-friends .friends-images strong:hover{z-index:1}main.userprofilepage .name-and-friends .friends-images a i,main.userprofilepage .name-and-friends .friends-images a svg,main.userprofilepage .name-and-friends .friends-images strong i,main.userprofilepage .name-and-friends .friends-images strong svg{fill:#ccc}main.userprofilepage .buttons{display:flex;padding-top:1rem;gap:.5rem}@media (max-width:768px){main.userprofilepage .buttons{flex-direction:column}}@media (min-width:769px){main.userprofilepage .buttons{justify-content:end;align-items:start}main.userprofilepage .buttons button i,main.userprofilepage .buttons button svg{margin-right:.5rem}}main.userprofilepage .lower-header-bar{padding:0;list-style-type:none;display:flex}main.userprofilepage .lower-header-bar li{margin-right:.5rem;padding:.5rem;font-size:.8rem;font-weight:600;cursor:pointer}main.userprofilepage .containers .about,main.userprofilepage .lower-header-bar li[data-displays=about]{display:none}main.userprofilepage .containers,main.userprofilepage .lower-header-bar{margin-left:var(--page-padding-triple);margin-right:var(--page-padding-triple)}main.userprofilepage .containers .content{min-height:20rem}main.userprofilepage .containers .content:not(.current){display:none}main.userprofilepage .containers .friends,main.userprofilepage .containers .photos,main.userprofilepage .containers .videos{padding:0;padding-top:.5rem;display:grid;gap:.5rem;grid-template-columns:1fr 1fr;grid-auto-rows:1fr}main.userprofilepage .containers .friends>*,main.userprofilepage .containers .photos>*,main.userprofilepage .containers .videos>*{aspect-ratio:1/1;overflow:hidden;border:1px solid #eee}main.userprofilepage .containers .friends figure,main.userprofilepage .containers .friends i,main.userprofilepage .containers .friends img,main.userprofilepage .containers .friends svg,main.userprofilepage .containers .photos figure,main.userprofilepage .containers .photos i,main.userprofilepage .containers .photos img,main.userprofilepage .containers .photos svg,main.userprofilepage .containers .videos figure,main.userprofilepage .containers .videos i,main.userprofilepage .containers .videos img,main.userprofilepage .containers .videos svg{width:100%;height:100%;object-fit:contain;object-position:50% 50%;max-width:100%;max-height:100%}@media (min-width:769px){main.userprofilepage .containers .friends,main.userprofilepage .containers .photos,main.userprofilepage .containers .videos{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));grid-auto-rows:12rem;grid-auto-flow:dense}}main.userprofilepage .containers .friends .user-profile{position:relative;display:flex;flex-direction:column}main.userprofilepage .containers .friends .user-profile:hover{text-decoration:none}@media (min-width:769px){main.userprofilepage .containers .friends .user-profile{padding:.5rem .5rem 0}}main.userprofilepage .containers .friends .user-profile figure,main.userprofilepage .containers .friends .user-profile i,main.userprofilepage .containers .friends .user-profile svg{margin-bottom:.5rem}main.userprofilepage .containers .friends .user-profile .user-status{position:absolute;top:0;right:0}main.userprofilepage .containers .friends .user-profile .user-status::after{width:.5rem;height:.5rem}main.userprofilepage .containers .friends .user-profile .info{display:flex;align-items:center;justify-content:center;font-size:.8rem}main.userprofilepage .containers .friends a,main.userprofilepage .containers .friends strong{position:relative}main.userprofilepage .containers .friends a svg,main.userprofilepage .containers .friends strong svg{fill:#eee;width:100%;height:100%}main.userprofilepage header{background:#f3f3f3}main.userprofilepage figure{cursor:pointer}main.userprofilepage figure:hover{filter:brightness(105%)}main.userprofilepage .banner .change-title-image-button{border-radius:.25rem;background:#fff}main.userprofilepage .lower-header .profile-picture figure{border:4px solid #fff}main.userprofilepage .lower-header-bar{user-select:none;border-top:1px solid #aaa}main.userprofilepage .lower-header-bar li:hover{background:#ddd}main.userprofilepage .lower-header-bar li.current{color:#0866ff;border-bottom:4px solid #0866ff}main.userprofilepage .buttons button{padding:.5rem;background:#0866ff;color:#fff;font-weight:700;font-size:.9rem}@media (min-width:769px){main.userprofilepage .buttons button{font-size:.7rem}}main.userprofilepage .buttons button i,main.userprofilepage .buttons button svg{width:.75rem;height:.75rem;margin-right:.25rem;fill:#fff}main.userprofilepage .buttons button i .fa-secondary,main.userprofilepage .buttons button svg .fa-secondary{fill:#fff;opacity:1}main.userprofilepage .buttons button i .fa-primary,main.userprofilepage .buttons button svg .fa-primary{fill:#fff;opacity:.75}body.userprofilepage.is-overtaken .overtake-user-button,body.userprofilepage:not(.is-admin) .overtake-user-button{display:none}main.userprofilepage .already-friends-button:hover .fa-user-check,main.userprofilepage .already-friends-button:hover .friendship-string,main.userprofilepage .is-friend .accept-friend-request-button,main.userprofilepage .is-friend .cancel-friend-request-button,main.userprofilepage .is-friend .send-friend-request-button,main.userprofilepage .is-other .add-new-header-banner-button,main.userprofilepage .is-other .add-new-profile-image-button,main.userprofilepage .is-own .buttons button,main.userprofilepage .is-pending-from-own .accept-friend-request-button,main.userprofilepage .is-pending-from-own .already-friends-button,main.userprofilepage .is-pending-from-own .send-friend-request-button,main.userprofilepage .is-pending-from-target .already-friends-button,main.userprofilepage .is-pending-from-target .cancel-friend-request-button,main.userprofilepage .is-pending-from-target .send-friend-request-button,main.userprofilepage .is-rejected .accept-friend-request-button,main.userprofilepage .is-rejected .already-friends-button,main.userprofilepage .is-rejected .cancel-friend-request-button,main.userprofilepage .is-rejected .send-friend-request-button,main.userprofilepage .is-stranger .accept-friend-request-button,main.userprofilepage .is-stranger .already-friends-button,main.userprofilepage .is-stranger .cancel-friend-request-button{display:none}main.userprofilepage .already-friends-button:not(:hover) .cancel-friendship-string,main.userprofilepage .already-friends-button:not(:hover) .fa-user-xmark{display:none}