@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";:root{--color-white: hsl(252, 30%, 100%);--color-light: hsl(268, 9%, 94%);--color-gray: hsl(252, 15%, 65%);--color-primary: hsl(252, 78%, 60%);--color-secondary: hsl(263, 55%, 89%);--color-success: hsl(120, 95%, 65%);--color-danger: hsl(0, 95%, 65%);--color-dark: hsl(252, 30%, 17%);--color-black: hsl(270, 0%, 0%);--border-radius: 2rem;--card-border-radius: 1rem;--btn-padding: .6rem 2rem;--search-padding: .6rem 1rem;--card-padding: 1rem;--sticky-top-left: 5.4rem;--sticky-top-right: -18rem}*,*:before,*:after{margin:0;padding:0;outline:0;box-sizing:border-box;text-decoration:none;list-style:none;border:none}body{font-family:Poppins,sans-serif;color:var(--color-dark);background:var(--color-light);overflow-x:hidden}.container{width:80%;margin:0 auto}.profile-photo{width:2.7rem;aspect-ratio:1/1;border-radius:50%;overflow:hidden}img{display:block;width:100%}.btn{display:inline-block;padding:var(--btn-padding);font-weight:500;border-radius:var(--border-radius);cursor:pointer;transition:all .3s ease;font-size:.9rem}.btn:hover{opacity:.8}.btn-primary{background:var(--color-primary);color:#fff}.text-bold{font-weight:500}.text-muted{color:var(--color-gray)}nav{width:100%;background:var(--color-white);padding:.7rem 0;position:fixed;top:0;z-index:10}nav .container{display:flex;align-items:center;justify-content:space-between}.search-bar{background:var(--color-light);border-radius:var(--border-radius);padding:var(--search-padding)}.search-bar input[type=search]{background:transparent;width:30vw;margin-left:1rem;font-size:.9rem;color:var(--color-dark)}nav .search-bar input[type=search] ::placeholder{color:var(--color-gray)}nav .create{display:flex;align-items:center;gap:2rem}main{position:relative;top:5.4rem}main .container{display:grid;grid-template-columns:18vw auto 20vw;column-gap:2rem;position:relative}main .container .left{height:max-content;position:sticky;top:var(--sticky-top-left)}main .container .left .profile{padding:var(--card-padding);background:var(--color-white);border-radius:var(--card-border-radius);display:flex;align-items:center;column-gap:1em;width:100%}.left .sidebar{margin-top:1rem;background:var(--color-white);border-radius:var(--card-border-radius)}.left .sidebar .menu-item{display:flex;align-items:center;height:4rem;cursor:pointer;transition:all .3s ease;position:relative}.left .sidebar .menu-item:hover{background:var(--color-light)}.left .sidebar i{font-size:1.4rem;color:var(--color-gray);margin-left:2rem;position:relative}.left .sidebar i .notification-count{background:var(--color-danger);color:#fff;font-size:.7rem;width:fit-content;border-radius:.8rem;padding:.1rem .4rem;position:absolute;top:-.2rem;right:-.3rem}.left .sidebar h3{margin-left:1.5rem;font-size:1rem}.left .sidebar .active{background:var(--color-light)}.left .sidebar .active i,.left .sidebar .active h3{color:var(--color-primary)}.left .sidebar .active:before{content:"";display:block;width:.5rem;height:100%;position:absolute;background:var(--color-primary)}.left .sidebar .menu-item:first-child.active{border-top-left-radius:var(--card-border-radius);overflow:hidden}.left .sidebar .menu-item:last-child.active{border-bottom-left-radius:var(--card-border-radius);overflow:hidden}.left .btn{margin-top:1rem;width:100%;text-align:center;padding:1rem 0}.left .notifications-popup{position:absolute;top:0;left:110%;width:30rem;background:var(--color-white);border-radius:var(--card-border-radius);padding:var(--card-padding);box-shadow:0 0 2rem hsl(var(primary),75%,60% 25%);z-index:8;display:none}.left .notifications-popup:before{content:"";width:1.2rem;height:1.2rem;display:block;background:var(--color-white);position:absolute;left:-.6rem;transform:rotate(45deg)}.left .notifications-popup>div{display:flex;align-items:start;gap:1rem;margin-bottom:1rem}.left .notification-popup small{display:block}.middle .stories{display:flex;justify-content:space-between;height:12rem;gap:.5rem}.middle .stories .story{padding:var(--card-padding);border-radius:var(--card-border-radius);display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:#fff;font-size:.75rem;width:100%;background:purple;position:relative;overflow:hidden}.middle .stories .story:before{content:"";display:block;width:100%;height:5rem;background:linear-gradient(transparent,#000c);position:absolute;bottom:0}.middle .stories .story .name{z-index:2}.middle .stories .story:nth-child(1){background:url(https://blog.hootsuite.com/wp-content/uploads/2021/05/instagram-story-hacks-25.png) no-repeat center center/cover}.middle .stories .story:nth-child(2){background:url(https://i.pinimg.com/736x/1a/3b/be/1a3bbe156954bb7a293243287eb4ef20.jpg) no-repeat center center/cover}.middle .stories .story:nth-child(3){background:url(https://i.pinimg.com/originals/4f/d8/e4/4fd8e48ad79264750ef2898b6c276bed.jpg) no-repeat center center/cover}.middle .stories .story:nth-child(4){background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFdsmlyzquLi3hI3URzQYDYUMWIzWbTeXN6zrKMQJ4Hs2gE-hhAB57ZApnnOHERe77rto&usqp=CAU) no-repeat center center/cover}.middle .stories .story:nth-child(5){background:url(https://i.pinimg.com/originals/da/a6/49/daa649d2787fa8574f0da3c52d6a456b.jpg) no-repeat center center/cover}.middle .stories .story:nth-child(6){background:url(https://i.pinimg.com/736x/c0/8c/ea/c08cea283e4db1d5866269456635ace9.jpg) no-repeat center center/cover}.middle .story .profile-photo{width:3rem;height:3rem;align-self:start;border:3px solid var(--color-primary)}.middle .create-post{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:1rem;background:var(--color-white);padding:.4rem var(--card-padding);border-radius:var(--border-radius)}.middle .create-post input[type=text]{justify-self:start;width:100%;padding-left:1rem;background:transparent;color:var(--color-dark);margin-right:1rem}.middle .feeds .feed{background:var(--color-white);border-radius:var(--card-border-radius);padding:var(--card-padding);margin:1rem 0;font-size:.85rem;line-height:1.5}.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);overflow:hidden;margin:.7rem 0}.middle .feed .action-buttons{display:flex;justify-content:space-between;align-items:center;font-size:1.4rem;margin:.6rem}.middle .liked-by{display:flex}.middle .liked-by span{width:1.4rem;height:1.4rem;display:block;border-radius:50%;overflow:hidden;border:2px solid var(--color-white);margin-left:-.6rem}.middle .liked-by span:first-child{margin:.1rem}.middle .liked-by p{margin-left:.5rem}main .container .right{height:max-content;position:sticky;top:var(--sticky-top-right);bottom:0}.right .messages{background:var(--color-white);border-radius:var(--card-border-radius);padding:var(--card-padding)}.right .messages .heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.right .messages i{font-size:1.4rem}.right .messages .search-bar{display:flex;margin-bottom:1rem}.right .messages .category{display:flex;justify-content:space-between;margin-bottom:1rem}.right .messages .category h6{width:100%;text-align:center;border-bottom:4px solid var(--color-light);padding-bottom:.5rem;font-size:.85rem}.right .messages .category .active{border-color:var(--color-dark)}.right .messages .message{display:flex;gap:1rem;margin-bottom:1rem;align-items:start}.right .message .profile-photo{position:relative;overflow:visible}.right .profile-photo img{border-radius:50%}.right .messages .message:last-child{margin:0}.right .messages .message .profile-photo .active{width:.8rem;height:.8rem;border-radius:50%;border:3px solid var(--color-white);background:var(--color-success);position:absolute;bottom:0;right:0}