*{box-sizing:border-box;margin:0;padding:0}body{background:#f0f2f5;font-family:Roboto,sans-serif}.flexbox{justify-content:space-around;align-items:center;display:flex}.flexboxColumn{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.flexboxRow{justify-content:space-between;align-items:center;gap:10px;width:100%;display:flex}hr{border:none;border-top:1px solid #ddd;width:100%;margin:10px 0}.NavBar{z-index:100;background:#fff;width:100%;padding:1rem 3rem;position:sticky;top:0;box-shadow:2px 2px 10px #cfcdcd}.NavBar h2,.NavProfile h3{color:#000}.NavBar span{color:#0058dc;font-weight:700}.NavInput{width:40%;position:relative}.NavInput input,.newPostContent input{background:#f0f2f5;border:2px solid #eaeaea;border-radius:10px;width:100%;padding:10px 10px 10px 38px}.NavInput input::placeholder{color:#8c8c8c}.NavInput i{color:#aeaeae;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.icons{width:10%}.icons i{font-size:20px}.NavProfile{gap:10px;font-size:small}.NavProfile img,.newPostContent img,.PostContent img,.ProfileContent img{aspect-ratio:1;object-fit:cover;border-radius:50%;width:50px}.NavProfile img{width:35px}.nightMode{aspect-ratio:1;text-align:center;border-radius:50%;align-content:center;width:30px}.nightMode:hover{cursor:pointer;color:#ffea00;transform:scale(1.1)}.Layout{gap:30px;margin-right:5rem;display:flex}.SideBar{scrollbar-width:none;border-right:2px solid #d9d8d8;flex:1;height:calc(100vh - 80px);padding:1rem 3rem;font-size:15px;line-height:38px;position:sticky;top:60px;overflow-y:auto}.SideBar ul li{color:#444851;border-radius:10px;width:120%;list-style:none}.SideBar ul li i{margin:10px 20px}.SideBar ul li:hover{color:#fff;cursor:pointer;background:#0058dc}.SideBar hr{width:120%;margin:1rem 0}.rightSide{scrollbar-width:none;flex:1.5;height:calc(100vh - 60px);position:sticky;top:60px;overflow-y:auto}.boxStyle{background:#fff;border-radius:10px;flex-direction:column;gap:12px;margin:1rem 0;padding:20px;display:flex;box-shadow:2px 2px 5px #cacaca}.newPostContent{background:#fff;border-radius:10px;gap:10px}.newPostContent input{background:#fff;padding:10px}.PostContent,.ProfileContent{justify-content:flex-start;gap:10px}.PostContent{width:100%}.PostContent p,.numbers p{color:#606061;font-size:12px}.reactions{color:#606061;font-size:15px}.ProfileContent{gap:20px}.ProfileContent img{width:80px}.ProfileContent p{color:#0058dc;font-size:15px;font-weight:700}.numbers{text-align:center;line-height:20px}.numbers h3{font-size:16px}.TrendingContent{justify-content:flex-start}.TrendingContent h4{color:#1564da}.TrendingContent p{color:#606061;margin-bottom:.8rem;font-size:15px}.Slider{gap:10px;width:100%;position:relative;overflow:hidden}.StoryContent{z-index:99;border-radius:15px;width:90%;height:220px;margin-top:1rem;transition:all .5s;position:relative;overflow:hidden}.StoryContent>img{object-fit:cover;border-radius:15px;width:100%;height:100%;display:block}.AddStory{z-index:100;color:#fff;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:10px;display:flex;position:absolute;inset:0}.AddStory i,.AddStory img{text-align:center;background:#b9b7b799;border:2px solid #fff;border-radius:50%;flex-shrink:0;align-content:center;width:42px;height:42px}.AddStory i{font-size:12px}.AddStory img{object-fit:cover;padding:0}.AddStory h5{color:#fff;text-align:left;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 4px #000c;width:100%;margin:0;font-size:13px;font-weight:600;overflow:hidden}.SliderNext,.SliderPrev{z-index:105;aspect-ratio:1;color:#fff;text-align:center;border-radius:50%;align-content:center;width:30px;position:absolute;top:50%;transform:translateY(-50%)}.SliderNext:hover,.SliderPrev:hover{cursor:pointer;background:#c0c0c194}.PostButton,.btn{cursor:pointer;border:none}.PostButton{color:#fff;background:#1564da;border-radius:10px;justify-content:center;align-items:center;width:100%;height:35px;margin:10px 0;display:flex}.PostButton:hover{background:#0b387b}.PostButton:disabled{cursor:not-allowed;background:#a3a3a3}.btn{background:#166fe5;border-radius:20px;width:200px;height:35px;margin:20% 2%}.btn:hover{background:#104891}.addNewPostContent{border:none;width:100%;padding:1rem}.addNewPostContent:focus{outline:none}.addPhoto{cursor:pointer;border-radius:8px;align-items:center;gap:10px;width:100%;padding:12px;font-weight:600;display:flex}.addPhoto i{color:#45bd62;font-size:24px}.addPhoto:hover{background:#d1d0d0}.exitButton{aspect-ratio:1;text-align:center;background:#dcdada;border-radius:50%;align-content:center;width:30px}.exitButton:hover{cursor:pointer;color:#a40303}.upload-image{width:100%;height:300px}.upload-image img{object-fit:contain;width:100%;height:100%}.childrenData{width:100%;max-height:400px}.childrenData img{object-fit:cover;object-position:100% 30%;cursor:pointer;border-radius:10px;width:100%;max-height:400px;margin-top:10px}.PostImage img{object-position:50% 20%!important;max-height:400px!important}.postData{scrollbar-width:thin;scrollbar-color:#aaa transparent;justify-content:flex-start;align-items:center;width:100%;max-height:800px;display:flex;overflow-y:auto}.postData img{object-fit:cover;border-radius:10px;width:100%;height:auto}.postData::-webkit-scrollbar{width:6px}.postData::-webkit-scrollbar-track{background:0 0}.postData::-webkit-scrollbar-thumb{background:#646464a6;border-radius:20px}.postData::-webkit-scrollbar-thumb:hover{background:#464646d9}.backGround,.backGroundBlock{z-index:200;background:#00000073;width:100%;height:100vh;position:fixed;inset:0}.backGround{display:none}.HandleAddingNewPost{z-index:210;width:100%;max-width:500px;max-height:550px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.imageOverlay{z-index:1000;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;width:100%;height:100vh;padding:30px;display:flex;position:fixed;inset:0}.imageOverlay>img{object-fit:contain;cursor:default;border-radius:8px;width:auto;max-width:90%;height:auto;max-height:90vh}.closeImage{z-index:1001;color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;width:40px;height:40px;font-size:30px;line-height:1;position:absolute;top:20px;right:25px}.closeImage:hover{background:#fff6}.LoginPage{justify-content:space-between;width:100%;height:100vh;display:flex}.LeftLogin{background:#fff;border-right:2px solid #d4d4d4;justify-content:space-between;width:53%;display:flex;position:relative}.LeftOfLeft{flex-direction:column;justify-content:space-between;width:43%;height:80%;padding:.5rem 2rem;display:flex}.LeftOfLeft span{color:#1564da}.LeftOfLeft img{width:40%}.LeftOfLeft h1{width:250px;font-size:60px}.RightOfLeft{width:100%}.RightOfLeft img{max-width:600px;position:absolute;top:0;right:0}.RightLogin{color:#fff;background:linear-gradient(to bottom right,#4985e0,#335e9f,#274879);justify-content:center;align-items:center;width:47%;min-height:100vh;padding:15px;display:flex;box-shadow:0 5px 20px #00000026}.account{border:1px solid #455987;border-radius:15px;flex-direction:column;justify-content:center;gap:15px;padding:30px;display:flex;position:relative;box-shadow:0 2px 8px #1b3568}.account input,.account textarea{color:#fff;background:#1670e51b}.account input::placeholder,.account textarea::placeholder{color:#c7c7c7}.RightLogin h2{text-align:center;margin-bottom:10px}.RightLogin input,.RightLogin textarea{border:1px solid #ddd;border-radius:8px;outline:none;padding:12px;font-size:15px}.RightLogin textarea{resize:none;height:90px}.RightLogin button{color:#fff;cursor:pointer;background:#1876f2;border:none;border-radius:8px;padding:12px;font-size:16px;font-weight:700}.RightLogin button:hover{background:#166fe5}.account .image{justify-content:center;align-items:center;display:flex;position:absolute;top:-10%;right:0}.account img{aspect-ratio:1;object-fit:cover;border:3px solid #325b99;border-radius:50%;width:30%}.profilePreview{object-fit:cover;border:3px solid #1877f2;border-radius:50%;align-self:center;width:100px;height:100px}.StoryPage{background:#f0f2f5;width:100%;height:calc(100vh - 70px);display:flex}.NewStoryContent{background:#f0f2f5;flex:3;justify-content:center;align-items:center;height:100%;display:flex}.theStory{border-radius:12px;width:30%;height:90%;overflow:hidden;box-shadow:0 4px 15px #00000026}.theStory textarea{color:#fff;resize:none;background:0 0;border:none;outline:none;width:100%;height:100%;padding:1rem;font-size:20px}.theStory textarea::placeholder{color:#ffffffb3}.TextStory{text-align:center;justify-content:center;align-items:center;width:100%;height:100%;padding:15px;display:flex;position:absolute;inset:0}.TextStory p{margin:0;font-size:16px;font-weight:700}.StoryStyle{background:#fff;border-left:1px solid #ddd;flex:1;height:100%;padding:2rem 1rem}.StoryStyle h2{color:#1c1e21;margin-bottom:1.5rem}.styleOptions{flex-wrap:wrap;gap:18px;display:flex}.styleOption{cursor:pointer;border:2px solid #fff;border-radius:50%;width:40px;height:40px;transition:all .25s;box-shadow:0 3px 10px #0003}.styleOption:hover{transform:scale(1.15)}.StoryViewer{z-index:9999;background:#000c;justify-content:center;align-items:center;padding:30px;display:flex;position:fixed;inset:0}.StoryViewerCard{background:#18191a;border-radius:12px;width:420px;height:85vh;position:relative;overflow:hidden;box-shadow:0 10px 40px #00000080}.StoryClose{z-index:10;color:#fff;cursor:pointer;background:#0009;border:none;border-radius:50%;width:40px;height:40px;font-size:20px;position:absolute;top:15px;right:15px}.StoryClose:hover{background:#000c}.StoryViewerHeader{z-index:5;color:#fff;align-items:center;gap:10px;display:flex;position:absolute;top:15px;left:15px}.StoryViewerHeader img{object-fit:cover;border:2px solid #fff;border-radius:50%;width:42px;height:42px}.StoryViewerHeader h3{margin:0;font-size:15px}.StoryViewerContent{text-align:center;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.StoryViewerContent p{max-width:80%;margin:0;font-size:24px;font-weight:700;line-height:1.5}.darkModeAllPage,.bodyBlack{color:#fff;background:#1c1c1d}.darkNavBar{z-index:100;color:#fff;background:#252728;width:100%;padding:1rem 3rem;position:sticky;top:0;box-shadow:2px 2px 10px #1c1c1d}.darkNavBar h2,.bodyBlack .NavProfile h3{color:#fff!important}.darkNavBar .nightMode{color:#ffea00}.darkNavBar input{color:#fff;background:#1c1c1d;border:2px solid #414141}.bodyBlack .SideBar{border-right-color:#414141}.bodyBlack ul li,.bodyBlack p{color:#cac9c9}.bodyBlack .boxStyle,.bodyBlack .newPostContent,.bodyBlack .HandleAddingNewPost{color:#fff;background:#252728}.bodyBlack .boxStyle{box-shadow:0 0 1px #000}.bodyBlack .newPostContent input,.bodyBlack .HandleAddingNewPost input{color:#fff;background:#252728}.bodyBlack .newPostContent input{border-color:#414141}.bodyBlack .HandleAddingNewPost{box-shadow:2px 2px 10px #1c1c1d}.bodyBlack .HandleAddingNewPost .exitButton{background:#434343d1}.bodyBlack .addPhoto:hover{background:#3b3b3b}.bodyBlack hr{border-top-color:#444}body.bodyBlack .StoryPage,body.bodyBlack .NewStoryContent{background:#18191a}body.bodyBlack .StoryStyle{background:#242526;border-left-color:#3a3b3c}body.bodyBlack .StoryStyle h2{color:#e4e6eb}body.bodyBlack .theStory{box-shadow:0 5px 20px #00000080}body.bodyBlack .styleOption{border-color:#3a3b3c;box-shadow:0 3px 12px #00000080}.sidebarIcon,.profileIcon{display:none}.Slider{gap:10px;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:hidden}.SliderNext,.SliderPrev{z-index:105;color:#fff;cursor:pointer;background:#00000059;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.SliderNext{right:10px}.SliderPrev{left:130px}.SliderNext i,.SliderPrev i{color:#fff;font-size:16px}.SliderNext:hover,.SliderPrev:hover{background:#0009}@media (width<=1400px){.RightOfLeft img{width:550px}.SliderPrev{left:115px}}@media (width<=1200px){.Layout{gap:15px;margin-right:1rem}.SideBar{flex:1;padding:1rem 1.5rem}.Layout>:nth-child(2){flex:1.2;min-width:0}.rightSide{flex:1.2}.NavBar{padding:1rem 2rem}.NavInput{width:35%}.NavProfile{width:auto}.StoryContent{flex:0 0 140px;width:140px;height:210px}.RightOfLeft img{width:450px}}@media (width<=991px){.Layout{width:100%;margin:0;padding:0 15px;display:block}.SideBar,.rightSide{display:none}.sidebarIcon,.profileIcon{cursor:pointer;display:block}.NavBar{justify-content:space-between;gap:15px;padding:12px 18px}.NavBar h2{flex-shrink:0;font-size:20px}.NavInput{width:35%;min-width:150px}.icons{flex-shrink:0;gap:15px;width:auto}.icons i{font-size:18px}.NavProfile{flex-shrink:0;width:auto}.NavProfile img{width:34px}.NavProfile h3{white-space:nowrap;text-overflow:ellipsis;max-width:100px;font-size:14px;overflow:hidden}.LoginPage{justify-content:center}.LeftLogin{display:none}.RightLogin{width:100%;min-height:100vh;padding:30px 20px}.account{width:90%;max-width:450px;padding:40px 25px}.account input,.account textarea,.account button{width:100%}.StoryPage{flex-direction:column;height:auto;min-height:calc(100vh - 70px)}.NewStoryContent{flex:none;width:100%;height:650px}.theStory{width:45%;height:500px}.StoryStyle{border-top:1px solid #ddd;border-left:none;flex:none;width:100%;height:auto;padding:25px}.styleOptions{gap:15px}.styleOption{width:50px;height:50px}.Slider{gap:10px;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:hidden}.SliderPrev{left:150px}}@media (width<=767px){body{font-size:14px}.Layout{padding:0 10px}.NavBar{gap:10px;padding:10px}.NavBar h2{font-size:18px}.NavInput{width:30%;min-width:0}.NavInput input{padding:8px 8px 8px 32px;font-size:12px}.NavInput i{left:10px}.NavProfile h3{display:none}.NavProfile img{width:32px}.icons{gap:10px}.icons i{font-size:17px}.nightMode{width:28px}.StoryContent{flex:0 0 120px;width:120px;height:180px}.Slider{scrollbar-width:none;gap:12px;padding:15px;display:flex;overflow:auto hidden}.Slider::-webkit-scrollbar{display:none}.AddStory{padding:8px}.AddStory h5{font-size:12px}.AddStory i,.AddStory img{width:38px;height:38px}.boxStyle{margin:.7rem 0;padding:12px}.PostContent img{max-width:100%}.theStory{width:70%;height:550px}.NewStoryContent{height:700px}.StoryStyle{padding:20px}.StoryStyle h2{font-size:20px}.styleOptions{gap:12px}.styleOption{width:45px;height:45px}.addPhoto{margin-top:2rem!important}.btn{margin-top:15px}.SliderPrev{width:32px;height:32px;left:15px}.SliderNext{right:15px}.SliderPrev i,.SliderNext i{font-size:13px}.account{width:100%;max-width:380px;margin:1rem 0;padding:35px 20px}.account .image{width:100px;height:100px;left:50%;transform:translate(-50%)}.account .image img{object-fit:cover;width:100%;height:100%}.account h2{margin-bottom:20px;font-size:23px;margin-top:1.5rem!important}.account input{height:45px;font-size:14px}.account input[type=file]{height:auto;padding:10px}.account button{height:45px;font-size:15px}}@media (width<=576px){body{font-size:13px}.NavBar{gap:7px;padding:8px}.NavBar h2{font-size:16px}.NavInput{flex:1;width:auto}.NavInput input{border-width:1px;padding:7px 7px 7px 28px;font-size:11px}.NavInput i{font-size:11px;left:9px}.icons{gap:7px}.icons i{font-size:15px}.NavProfile img{width:30px}.nightMode{width:25px}.nightMode i{font-size:18px!important}.Layout{margin:0;padding:0 8px}.boxStyle{border-radius:8px;padding:10px}.StoryContent{flex:0 0 105px;width:105px;height:160px}.AddStory{padding:7px}.AddStory h5{font-size:11px}.AddStory i,.AddStory img{width:34px;height:34px}.PostContent p,.numbers p,.reactions{font-size:11px}.PostContent{gap:7px}.theStory{width:75%;height:500px}.NewStoryContent{height:650px}.StoryStyle{padding:18px}.account{max-width:360px;padding:40px 15px}.account .image{width:90px;height:90px}.account h2{font-size:21px;margin-top:1rem!important}.account input{height:42px;font-size:13px}.account button{height:42px;font-size:14px}}@media (width<=400px){.NavBar{gap:5px;padding:6px}.NavBar h2{font-size:14px}.NavInput{flex:1;width:auto}.NavInput input{padding:6px 6px 6px 24px;font-size:10px}.NavInput i{font-size:10px;left:7px}.icons{gap:5px}.icons i{font-size:13px}.NavProfile img{width:27px}.nightMode{width:23px}.nightMode i{font-size:16px!important}.Layout{padding:0 5px}.StoryContent{flex:0 0 95px;width:95px;height:145px}.AddStory h5{font-size:10px}.AddStory i,.AddStory img{width:32px;height:32px}.boxStyle{padding:8px}.theStory{width:80%;height:450px}.NewStoryContent{height:600px}.StoryStyle{padding:15px}.styleOption{width:40px;height:40px}.account{max-width:340px;padding:40px 12px}}@media (width<=1200px){.SliderPrev{left:150px}}@media (width<=767px){.SliderPrev{left:128px}.Slider{gap:10px;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:hidden}}@media (width<=576px){.SliderPrev{left:113px}.Slider{gap:10px;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:hidden}}@media (width<=400px){.SliderPrev{left:110px}.Slider{gap:10px;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:hidden}}@media (width>=992px) and (width<=1200px){.StoryContent{flex:0 0 calc(20% - 8px);width:calc(20% - 8px);height:210px}.SliderPrev{left:calc(20% + 8px)}.SliderNext{right:10px}.Slider{gap:10px;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:hidden}}.StoryViewerContent p{text-align:center;white-space:normal;overflow-wrap:anywhere;word-break:break-word;width:80%;max-width:80%;margin:0;font-size:24px;font-weight:700;line-height:1.5}.TextStory p{text-align:center;white-space:normal;overflow-wrap:anywhere;word-break:break-word;width:100%;max-width:90%;margin:0;font-size:10px;font-weight:700;line-height:1.5}