@import url(https://unicons.iconscout.com/release/v2.1.6/css/unicons.css);@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap);:root{--primary-color-hue:252;--dark-color-lightness:17%;--light-color-lightness:95%;--white-color-lightness:100%;--color-white:hsl(252,30%,var(--white-color-lightness));--color-light:hsl(252,30%,var(--light-color-lightness));--color-gray:hsl(var(--primary-color-hue),15%,65%);--color-primary:hsl(var(--primary-color-hue),75%,60%);--color-secondary:#d6ccff;--color-success:#51fb51;--color-danger:#fb5151;--color-dark:hsl(252,30%,var(--dark-color-lightness));--color-black:#151221;--border-radius:2rem;--card-border-radius:1rem;--btn-padding:0.6rem 2rem;--search-padding:0.6rem 1rem;--card-padding:1rem;--sticky-top-left:5.4rem;--sticky-top-right:-18rem}*,:after,:before{border:none;box-sizing:border-box;list-style:none;margin:0;outline:0;padding:0;text-decoration:none}body{background:#f0eef6;background:var(--color-light);color:#241e38;color:var(--color-dark);font-family:Poppins,sans-serif;overflow-x:hidden}.container{margin:0 auto;width:80%}img{display:block;width:100%}.btn{border-radius:2rem;border-radius:var(--border-radius);cursor:pointer;display:inline-block;font-size:.9rem;font-weight:500;padding:.6rem 2rem;padding:var(--btn-padding);transition:all .3s ease}.btn:hover{opacity:.8}.btn-primary{background:#6b4de6;background:var(--color-primary);color:#fff}.text-bold{font-weight:500}.text-muted{color:#9e98b3;color:var(--color-gray)}.profile-photo{aspect-ratio:1/1;border-radius:50%;overflow:hidden;width:2.7rem}.search-bar{background:#f0eef6;background:var(--color-light);border-radius:2rem;border-radius:var(--border-radius);padding:.6rem 1rem;padding:var(--search-padding)}.search-bar input[type=search]{background:#0000;color:#241e38;color:var(--color-dark);font-size:.9rem;margin-left:1rem;width:30vw}.search-bar input[type=search]::placeholder{color:#9e98b3;color:var(--color-gray)}@media screen and (max-width:1200px){.container{width:96%}}main .container .left .profile{align-items:center;column-gap:1rem;display:flex;padding:var(--card-padding);width:100%}.left .sidebar,main .container .left .profile{background:var(--color-white);border-radius:var(--card-border-radius)}.left .sidebar{margin-top:1rem}.left .sidebar .menu-item{align-items:center;cursor:pointer;display:flex;height:4rem;position:relative;translate:all .3s ease}.left .sidebar .menu-item:hover{background:var(--color-light)}.left .sidebar i{color:var(--color-gray);font-size:1.4rem;margin-left:2rem;position:relative}.left .sidebar i .notification-count{background:var(--color-danger);border-radius:.8rem;color:#fff;font-size:.7rem;padding:.1rem .4rem;position:absolute;right:-.3rem;top:-.2rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.left .sidebar h3{font-size:1rem;margin-left:1.5rem}.left .sidebar .active{background:var(--color-light)}.left .sidebar .active h4,.left .sidebar .active i{color:var(--color-primary)}.left .sidebar .active:before{background:var(--color-primary);content:"";display:block;height:100%;position:absolute;width:.5rem}.left .sidebar .menu-item:first-child.active{border-top:.2rem solid var(--color-primary);border-top-left-radius:var(--card-border-radius);overflow:hidden}.left .sidebar .menu-item:last-child.active{border-bottom:.2rem solid var(--color-primary);border-bottom-left-radius:var(--card-border-radius);overflow:hidden}.left .btn{margin-top:1rem;padding:1rem 0;text-align:center;width:100%}.left .notifications-popup{background:var(--color-white);border-radius:var(--card-border-radius);box-shadow:0 0 2rem hsl(var(--color-primary),75%,60%,25%);display:none;left:110%;padding:var(--card-padding);position:absolute;top:0;width:30rem;z-index:8}.left .notifications-popup:before{background:var(--color-white);content:"";display:block;height:1rem;left:-.6rem;position:absolute;transform:rotate(45deg);width:1.2rem}.left .notifications-popup>div{align-items:start;display:flex;gap:1rem;margin-bottom:1rem}.left .notifications-popup small{display:block}@media screen and (max-width:1200px){.sidebar h3,main .container .left .profile{display:none}}.middle .stories{gap:.5rem;height:12rem}.middle .stories,.middle .stories .story{display:flex;justify-content:space-between}.middle .stories .story{align-items:center;border-radius:var(--card-border-radius);color:#fff;cursor:pointer;flex-direction:column;font-size:.65rem;overflow:hidden;padding:var(--card-padding);position:relative;transition:all .2s ease-in-out;width:100%}.middle .stories .story:hover{opacity:.8;scale:1.1}.middle .stories .story:before{background:linear-gradient(#0000,#000000bf);bottom:0;content:"";display:block;height:5rem;position:absolute;width:100%}.middle .stories .story .name{z-index:2}.middle .story .profile-photo{align-self:start;border:3px solid var(--color-primary);height:2rem;width:2rem}.middle .create-post{align-items:center;background:var(--color-white);border-radius:var(--border-radius);display:flex;justify-content:space-between;margin-top:1rem;padding:.4rem var(--card-padding);width:100%}.middle .create-post input[type=text]{background:#0000;color:var(--color-dark);justify-self:start;margin-right:1rem;padding-left:1rem;width:100%}.middle .feeds .feed{background:var(--color-white);border-radius:var(--card-border-radius);font-size:.85rem;line-height:1.5;margin:1rem 0;padding:var(--card-padding)}.middle .feed .head{display:flex;justify-content:space-between}.middle .feed .user{display:flex;gap:1rem}.middle .feed .photo{border-radius:var(--card-border-radius);margin:.7rem 0;overflow:hidden}.middle .feed .action-buttons{align-items:center;display:flex;font-size:1.4rem;justify-content:space-between;margin:.6rem}.middle .liked-by{display:flex}.middle .liked-by span{border:2px solid var(--color-white);border-radius:50%;display:block;height:1.4rem;margin-left:-.6rem;overflow:hidden;width:1.4rem}.middle .liked-by span:first-child{margin:0}.middle .liked-by p{margin-left:.5rem}.createModal{background:#ffffff80;display:none;height:100vh;justify-content:center;left:0;place-items:center;position:fixed;top:0;width:100vw;z-index:100}.createModal .card{background:var(--color-white);border-radius:var(--card-border-radius);box-shadow:0 0 1rem var(--color-gray);padding:2rem 4rem;position:relative;width:30%}.createModal .card .user{align-items:start;display:flex;flex-direction:column;gap:10px}.createModal .card .user .userHead{align-items:center;display:flex;gap:10px}.createModal .card .user .userHead h2{font-size:.7rem}.createModal .card .user .userInput{background:#f1f1f1;border-radius:12px;height:6rem;width:100%}.createModal .card input[type=text]{background:#f1f1f1;border:none;border-radius:12px;display:inline-block;padding:10px;width:100%}.createModal .card input[type=text]:focus{outline:none}.submitbtn{background-color:#232f3e;border:none;border-radius:14px;color:#fff;cursor:pointer;margin:23px 0;opacity:.9;padding:12px 20px;width:100%}.submitbtn:hover{opacity:1}.createModal .card .close{cursor:pointer;position:absolute;right:10px;top:10px;transition:all .1s ease-in-out}.createModal .card .close:hover{opacity:.6}.createModal .card .close i{font-size:1.8rem}.ImageModal{display:flex}.ImageModal .card{height:50%;width:40%}.ImageModal .card .content{border-radius:12px;height:90%;margin-top:4px;overflow:hidden}.ImageModal .card .content img{height:100%;object-fit:contain;width:100%}.ImageModal .user p{font-size:.6rem;font-weight:200}main{position:relative;top:5.4rem}main .container{grid-column-gap:2rem;column-gap:2rem;display:grid;grid-template-columns:18vw auto 20vw;position:relative}main .container .left{top:var(--sticky-top-left);width:-webkit-max-content;width:max-content}main .container .left,main .container .right{height:-webkit-max-content;height:max-content;position:-webkit-sticky;position:sticky}main .container .right{bottom:0;top:var(--sticky-top-right)}@media screen and (max-width:1200px){main .container{gap:1rem;grid-template-columns:5rem auto 30vw}main .container .left{width:5rem;z-index:5}main .container .left .btn{display:none}}@media screen and (max-width:992px){main .container{gap:0;grid-template-columns:0 auto 5rem}main .container .left{bottom:0;grid-column:3/4;position:fixed;right:0}main .container .left .notifications-popop{left:-20rem;position:absolute;width:20rem}main .container .left .notifications-popop:before{display:block;left:19.4rem;position:absolute;top:1.3rem}main .container .left .sidebar>div h3{display:none}main .container .middle{grid-column:1/3}main .container .right{display:none}}.right .messages{background:var(--color-white);border-radius:var(--card-border-radius);padding:var(--card-padding)}.right .messages .heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.right .messages i{font-size:1.4rem}.right .messages .category,.right .messages .search-bar{display:flex;margin-bottom:1rem}.right .messages .category{justify-content:space-between}.right .messages .category h6{border-bottom:4px solid var(--color-light);cursor:pointer;font-size:.85rem;padding-bottom:.5rem;text-align:center;width:100%}.right .messages .category .active{border-color:var(--color-dark)}.right .messages .message{align-items:start;display:flex;gap:1rem;margin-bottom:1rem}.right .messages .message:last-child{margin:0}.right .messages .message p{font-size:.8rem}.right .messages .message .profile-photo{overflow:visible;position:relative}.right .messages .message .profile-photo img{border-radius:50%}.right .messages .message .profile-photo .active{background:var(--color-success);border:3px solid var(--color-white);border-radius:50%;bottom:0;height:.8rem;position:absolute;right:0;width:.8rem}.right .messages .message-requests{color:var(--color-primary)}.right .friend-requests{margin-top:1rem}.right .friend-requests h4{color:var(--color-gray);margin:1rem 0}.right .request{background:var(--color-white);border-radius:var(--card-border-radius);margin-bottom:.7rem;padding:var(--card-padding)}.right .request .info{display:flex;gap:1rem;margin-bottom:1rem}.right .request .action{display:flex;gap:1rem}nav{background:var(--color-white);height:8.5vh;padding:.7rem 0;position:fixed;top:0;width:100%;z-index:10}nav .container{justify-content:space-between}nav .container,nav .create{align-items:center;display:flex}nav .create{gap:2rem}@media screen and (max-width:992px){nav .search-bar{display:none}}.customize-theme{background:#ffffff80;display:grid;display:none;font-size:.9rem;height:100vh;left:0;place-items:center;position:fixed;text-align:center;top:0;width:100vw;z-index:100}.customize-theme .card{background:var(--color-white);border-radius:var(--card-border-radius);box-shadow:0 0 1rem var(--color-primary);padding:3rem;width:50%}.customize-theme .font-size{margin-top:5rem}.customize-theme .font-size>div{align-items:center;background:var(--color-light);border-radius:var(--card-border-radius);display:flex;justify-content:space-between;padding:var(--search-padding)}.customize-theme .choose-size{align-items:center;background:var(--color-secondary);display:flex;height:.3rem;justify-content:space-between;margin:0 1rem;width:100%}.customize-theme .choose-size span{background:var(--color-secondary);border-radius:50%;cursor:pointer;height:1rem;width:1rem}.customize-theme .choose-size span.active{background:var(--color-primary)}.customize-theme .color{margin-top:2rem}.customize-theme .choose-color{align-items:center;background:var(--color-light);border-radius:var(--card-border-radius);display:flex;justify-content:space-between;padding:var(--search-padding)}.customize-theme .choose-color span{border-radius:50%;cursor:pointer;height:2.2rem;width:2.2rem}.customize-theme .choose-color span.active{border:5px solid #fff}.customize-theme .background{margin-top:2rem}.customize-theme .choose-bg{align-items:center;display:flex;gap:1.5rem;justify-content:space-between}.customize-theme .choose-bg>div{align-items:center;border-radius:.4rem;cursor:pointer;display:flex;font-size:1rem;font-weight:700;padding:var(--card-padding);width:100%}.customize-theme .choose-bg>div.active{border:2px solid var(--color-primary)}.customize-theme .choose-bg .bg-1{background:#fff;color:#000}.customize-theme .choose-bg .bg-2{background:#241e38;color:#fff}.customize-theme .choose-bg .bg-3{background:#151221;color:#fff}.customize-theme .choose-bg>div span{border:2px solid var(--color-gray);border-radius:50%;height:2rem;margin-right:1rem;width:2rem}@media screen and (max-width:1200px){.customize-theme .card{width:80vw}}@media screen and (max-width:992px){.customize-theme{height:100%;width:100%}.customize-theme .card{width:100%}}@media screen and (max-width:350px){.customize-theme .card{padding:1rem}.customize-theme .choose-bg>div span{display:none}}
/*# sourceMappingURL=main.883b5b4e.css.map*/