@import"https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap";*{padding:0;margin:0;box-sizing:border-box;list-style:none;text-decoration:none;outline:none;border:0;font-family:PT Sans,sans-serif}:root{--body-color: #f0f2f5;--facebook-color: #1b73e4;--menu-color: #65676b;--color-white: #fff;--hover-color: #e0e1e2;--navbar-height: 3.5rem;--menu-size: 2rem;--shadow: rgba(50, 50, 93, .25) 0px 2px 5px -1px, rgba(0, 0, 0, .3) 0px 1px 3px -1px;--radius: .7rem}body{background:var(--body-color);position:relative}a{color:var(--menu-color)}.main_body{display:grid;grid-template-columns:.5rem 1fr .3fr 2fr .3fr 1fr .5rem;margin-top:1.2rem}@media screen and (max-width: 1063px){.main_body{grid-template-columns:.5rem .5fr .3rem 2fr .3rem}}@media screen and (max-width: 700px){.main_body{grid-template-columns:.5rem 2fr .5rem}}.login__main{width:100%;min-height:100vh;max-height:100vh;background-image:url(https://cdn.wallpapersafari.com/23/82/JY6D8x.jpg);background-repeat:no-repeat;background-size:cover;position:relative}.login{width:50%;margin:auto;min-height:100vh;max-height:100vh;display:flex;align-items:center;justify-content:center;position:sticky;z-index:1000}.login__logo{width:100%;border-radius:1rem;overflow:hidden;cursor:pointer;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;background:rgb(255,255,255);transition:1s}.login button{background:var(--facebook-color);width:100%;padding:1rem;font-size:2rem;cursor:pointer;color:var(--color-white);font-weight:600;transition:1s}.login button:hover{background:var(--color-white);color:var(--facebook-color)}.cover{position:absolute;height:100%;top:0;z-index:1;width:100%;background-color:#020202;opacity:.5}.content{padding:0 .5rem;grid-column:4/5;width:100%;max-height:100vh;overflow-y:scroll}.content::-webkit-scrollbar{width:10px}@media screen and (max-width: 1063px){.content{grid-column:4/5}}@media screen and (max-width: 700px){.content{grid-column:1/4}}.post{width:100%;margin-top:1.5rem;display:flex;flex-direction:column;background:var(--color-white);box-shadow:var(--shadow);border-radius:var(--radius)}.post_section{display:flex;margin:auto;width:95%;border-bottom:1px solid lightgray;padding:.7rem 0;gap:1rem}.post_section>form{flex:1;display:flex;gap:1rem}.post_section>form input{padding:.5rem;border-radius:var(--radius);background:var(--body-color)}.post_section>form>button{background:skyblue;padding:0 2rem;cursor:pointer;border-radius:var(--radius);font-size:medium;transition:.2s}.post_section>form>button:hover{background:rgb(160,39,39);color:wheat}.post_section>form>button:disabled{background:gray;cursor:default;color:#a9a9a9}.post_input{flex:1}.dummy_options{display:grid;grid-template-columns:1fr 1fr 1fr;justify-content:space-evenly;align-items:center;width:95%;padding:.7rem}.dummy_options>div{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem;cursor:pointer}.dummy_options>div:hover{border-radius:var(--radius);background:var(--body-color)}.dummy_options>div>h3{font-size:medium}.imgUpload{position:relative}form .imgUpload{position:relative;width:30%;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem;cursor:pointer;border-radius:var(--radius);background:var(--body-color);overflow:hidden}form .imgUpload h3{font-size:medium}form .imgUpload input{position:absolute;cursor:pointer;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;opacity:0}.loading_animation{padding:.5rem;width:100%;display:flex;justify-content:center}.loading_animation progress{width:100%;-webkit-appearance:none}::-webkit-progress-bar{background-color:#fff;border-radius:2rem}::-webkit-progress-value{background:var(--facebook-color);border-radius:2rem}@media screen and (max-width: 1263px){.post_section{flex-wrap:wrap}.post_section>form>button{padding:.5rem 2rem}.post_section>form{flex-wrap:wrap}}@media screen and (max-width: 414px){.post_section{flex-wrap:wrap}.post_section>form{flex-wrap:wrap}.post_section>form>button{padding:.5rem 2rem}}.post__item{width:100%;margin-top:1rem;border-radius:var(--radius);background:var(--color-white);box-shadow:var(--shadow);overflow:hidden;position:relative}.post__top{display:flex;align-items:center;gap:.5rem;width:95%;padding:.7rem 0;position:relative;margin:auto}.post__info>h3{font-size:medium}.post__info>p{font-size:small;color:gray}.post__bottom{margin:auto;width:95%;padding:.7rem 0}.post__image{width:100%;margin-top:2rem 0}.post__image>img{width:100%}.post__buttons{width:95%;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;font-size:medium;color:gray;cursor:pointer;padding:.5rem 0}.post__buttons>div{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.45rem 0}.post__buttons>div:hover{background:var(--body-color)}.addComments{text-align:center;display:flex;justify-content:center;align-items:center;background:var(--facebook-color)}.addComments form{margin:.5rem;display:flex;gap:1rem;width:100%}.addComments input{padding:.5rem;border-radius:.5rem;width:100%}.addComments input:focus{padding:.5rem;border-radius:.5rem}.addComments button{padding:.5rem 2rem;border-radius:.5rem;background:rgb(121,4,115);color:var(--color-white);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.5s}.addComments button:hover{background:rgb(187,69,14);color:#fff}.addComments button:disabled{background:gray;border:var(--color-white);cursor:default;color:beige}.show__comments{padding:.5rem}.show__comments>strong{color:#140e4b}.show__comments p{display:flex;gap:.5rem;padding:0 .3rem}.commets_list{display:flex;align-items:center;gap:1rem;margin:.5rem 0}.commets_list p{background:rgb(214,68,10);border-radius:.5rem;padding:.5rem 3rem .5rem .5rem;display:flex;flex-direction:column;line-height:8px;color:#fff}.all__comments{position:absolute;z-index:500;left:50%;right:0;top:50%;display:none}.all__comments.showing{display:flex;flex-direction:column;background:var(--facebook-color);border-radius:.5rem 0 0;padding:1rem;max-height:50%;min-height:50%;min-width:50%;overflow-y:scroll}.all__comments.showing::-webkit-scrollbar{width:10px}.all__comments .commets_list p{line-height:1rem;padding:.5rem 2rem .5rem .5rem}.comments__head{display:flex;justify-content:space-between;align-items:center;background:var(--color-white);padding:0 .5rem;border-radius:.5rem}.comments__head button{background:rgb(255,227,227);padding:.5rem;color:#fff;border-radius:2rem;cursor:pointer}.overlap{position:absolute;top:0;right:0;left:0;bottom:0;background:rgba(0,1,12,.76);display:none}.overlap.active{display:block}.show__more{padding:.3rem 1rem;border-radius:.5rem;background:#570353;color:#fff;cursor:pointer}.story_item{position:relative;background-position:center center;background-size:cover;background-repeat:no-repeat;width:125px;height:200px;border-radius:var(--radius);box-shadow:var(--shadow);transition:.5s;cursor:pointer}.story_avatar{margin:.5rem;border:5px solid var(--facebook-color)}.story_item>h4{color:var(--color-white);position:absolute;bottom:.9rem;left:50%;transform:translate(-50%)}.story{display:flex;gap:.7rem;justify-content:center}nav{height:var(--navbar-height);background:var(--color-white);display:grid;grid-template-columns:1rem 1fr 1.25fr 1fr 1rem;align-items:center;position:sticky;top:0;z-index:1000}.logo{grid-column:2/3;display:flex;align-items:center;gap:.5rem;height:var(--navbar-height)}.logo img{height:73%}.logo form{height:80%;display:flex;align-items:center;gap:.5rem;background:var(--body-color);padding:.7rem;border-radius:2rem}.logo form input{background:var(--body-color);height:100%}.menus{grid-column:3/4;height:var(--navbar-height);display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;align-items:center;gap:.5rem}.menus a{font-size:var(--menu-size);height:87%;display:flex;justify-content:center;align-items:center}.menus a:hover{border-radius:1rem;background:var(--hover-color)}.profile{grid-column:4/5;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;height:var(--navbar-height)}.profile>div{height:73%;display:flex;gap:.5rem;align-items:center;border-radius:1rem;padding:.5rem 1rem;cursor:pointer}.profile>div:hover{background:var(--hover-color)}.profile_icons{background:var(--body-color);font-size:1.2rem}.home__logo{color:var(--facebook-color);border-bottom:5px solid var(--facebook-color)}@media screen and (max-width: 940px){.menus{display:none}}@media screen and (max-width: 635px){.profile_icons{display:none}}@media screen and (max-width: 414px){nav{grid-template-columns:1rem 1fr 1fr}.logo{grid-column:2/3}.profile{grid-column:3/4}.logo form{width:5rem;overflow:hidden}.logo form input{width:5rem}.profile>.profile_icons{display:none}}@media screen and (max-width: 679px){.profile>.profile_icons{display:none}}.widgets{grid-column:6/7;display:flex;flex-direction:column;min-height:100vh;max-height:100vh}.widgets>div{width:100%;display:flex;align-items:center;gap:1rem}.chats{justify-content:space-between;color:gray;font-size:1.2rem}.chats p{margin:.5rem;font-weight:600}.chats>div{justify-content:center;align-items:center;margin:.5rem;display:flex}.chats>div>a{padding:.5rem;border-radius:5rem;display:flex;align-items:center;justify-content:center}.chats>div>a:hover{background:var(--hover-color)}.chat__list{margin:.5rem;border-radius:1rem;padding:.5rem;transition:var(--transition)}.chat__list:hover{background:var(--hover-color)}@media screen and (max-width: 1063px){.widgets{display:none}}.sidebar{grid-column:2/3;width:max-content;padding:0 5rem 1rem 0;border-bottom:1px solid lightgray;height:max-content;width:100%}@media screen and (max-width: 700px){.sidebar{display:none}}.sidebarRow{display:flex;align-items:center;padding:1rem;cursor:pointer;gap:1rem;font-size:1.15rem}.sidebarRow:hover{background:var(--hover-color);border-radius:.7rem}.sidebarRow>h4{font-weight:300}.sidebar_icons{color:var(--facebook-color);font-size:1.7rem}