*{
    padding: 0;
    margin: 0;
}


body{
    background-color: lavender;
    font-family: "Poppins", sans-serif;
   
}

header{
    background-color: #ffffff;
    width: 100em;
    background-attachment: fixed;

}

#Section1-header-container{
    position: fixed;
    overflow: visible;
}
.section-1{
    
    display: flex;
    padding: 1px;
    padding-bottom: 0.1em;
    
}

.header{
    display: flex;
    list-style: none;
    justify-content: space-between;
    gap: 0.5em;
    
}




.sect1-right-icons >img{

    width: 2.5em;
    height:2.5em;
    margin-left: 2px;
    padding-top: 0.5em;

}

.sect1-SEarch{
    background-color: whitesmoke;
    width: 100%;
    height: 2em;
    margin-top: 0.5em;
    padding: 0.5em;
    border-radius: 12px;
    border:none;
    padding-top:0.2em;
    
}

#sect1-input{
    width: 12em;
    height: 1em;
    padding: 6px;
    font-size: 17px;
    padding-top: 0.7em;
    
   
}
.sect1-search >input{
    background-color: whitesmoke;
    border: whitesmoke;
    
}

.sect1-right-icons{
    display: flex;
    gap: 3px;
    margin-left: 0.3em;
}




.sect1-center-icons{
    display: flex;
    margin-left: 10em;
    padding-top:18px;
    gap: 5em;
}

.sect1-center-icons >li{
    font-size: 1.3em;
}

.sect1-left-icons{
    display: flex;
    margin-left: 24em;
    padding-top: 12px;
    padding-bottom: 0.2em;
    gap: 0.5em;
}

.sect1-left-icons >li{
    font-size:1.2em;
}

#sect1-left-icon1{
    background-color: whitesmoke;
    padding: 0.5em;
    border-radius: 2em;
}

#sect1-left-icon2{
    background-color: whitesmoke;
    padding:0.5em;
    border-radius: 2em;
}


#sect1-left-icon3{
    background-color: whitesmoke;
    padding: 0.5em;
    border-radius: 2em;
}


.sect1-img-left {
    width: 1.8em;
    height: 1.8em;
    border-radius: 3em;
    

} /*    ########## ENF OF  SECTION 1 HEADER ############# */









#Content-container {  /* ##### START OF CONTENT SECTIONS  ##### */
     display: grid;
     grid-template-columns: 200px  200px;
     height: 100vh;
    


}

.Section-2{
    background-color: lavender;
    grid-column:1/2;
    grid-row:1/3;
    width: 18em;
    position: fixed;
    height: 91vh;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 0.9em;
    

}


.Section-3{
    background-color:lavender;
    grid-column: 2/9;
    grid-row: 1/3;
    width: 60em;
    padding-top: 1em;
    margin-left: 4em;

    
   
}

.Section-4{
    background-color:lavender;
    grid-column: 9/10;
    grid-row: 1/3;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 5em;
    margin-top: 0.8em;
    

} 





.Section-4{
    width: 17em;
    margin-left: 76.7em;
    position: fixed;
    height: 37em;

}/* ##### END  OF CONTENT SECTIONS  ##### */



#Content-container{
    padding-top: 3em;
}


.sect2-container{  /* #### SECTION2 CONTAINER*/
  
  list-style: none;
  padding: 1em;
  
  
}

.sect2-container >li{
    padding: 0.3em;
    
}

.sect2-header{
    display: flex;
    text-align: center;
}
.sect2-header > img{
    border-radius: 1.2em;
    width: 2em;
    height: 2em;
    border-radius: 2em;
}

.sect2-header-Name{
    padding-top: 0.3em;
    margin-left: 0.3em;
    
}
.sect2-container small{
    margin-left: 0.6em;
    font-family: "Poppins", sans-serif;
    font-weight: 590;
    font-size: 12px;
}

/* ### SECTION 2 LAYER1 */
.sect2-layer1{
    padding: 0.7em;
   
}
.sect2-shortcuts{
    font-size: 1em;
}
.sect2-layer2 {
    padding: 0.7em;
    font-size: 12px;

}  /* #### END OF SECTION 2 LAYER1 ###*/





.Section-3{ /* #### START SECTION 3 ####*/
  font-family: "poppins", sans-serif;
}
.Story-content{
    display: flex;
    padding: 0.8em;
    gap: 1em;
    justify-content: center;
}

.sect3-card1{ /* ### STORY CARD ONE ###*/
    background-image: url("images/img13.jpeg");
    background-size: cover;
    background-repeat: none;
    height: 12em;
    width: 9em;
    backface-visibility: visible;
    border-radius: 0.5em;
   
    
 
}

#sect3-story{
    width: 1.5em;
    border: 2px blue solid ;
    background-color: #ffff;
    padding: 0.1em;
    border-radius: 1em;
}

#sect3-story1{
    padding-top: 2em;

}

#Story-container{
    padding-top: 8.7em;
    text-align: center;
   
}
#sect3-icon-plus{
    background-color: #ffff;
    border:lavender 2px solid;
    padding: 3px;
    border-radius: 1em;
    font-size: 20px;
  
}
.sect3-story-name{
    background-color: #ffffff;
    color: black;
    overflow: visible;
    border-bottom-left-radius: 0.7em;
    border-bottom-right-radius: 0.7em;

}  /* #### END OF CARD 1 #### */




.sect3-card2 { /* #### SECT3 _CARD2 #### */
    background-image: url("images/img5.jpg");
    background-size: cover;
    background-repeat: none;
    height: 12em;
    width: 9em;
    border-radius: 0.5em;
  
       
        
}

#sect3-story{
    width: 1em;
    margin: 0.5em;
    border-radius: 1em;
}

.sect3-name1{
    padding-top: 7em;
    text-align: center;
    color: white;

}  /* ### END CARD 2 ###*/



.sect3-card3 { /* #### SECT3 _CARD3 #### */
    background-image: url("images/img5.jpg");
    background-size: cover;
    background-repeat: none;
    height: 12em;
    width: 9em;
    border-radius: 0.5em;
  
       
        
}

#sect3-story{
    width: 1.5em;
    margin: 0.5em;
    border-radius: 1em;
}

.sect3-name2{
    padding-top: 7em;
    text-align: center;
    color: white;
}




.sect3-card4 { /* #### SECT3 _CARD4 #### */
    background-image: url("images/img5.jpg");
    background-size: cover;
    background-repeat: none;
    height: 12em;
    width: 9em;
    border-radius: 0.5em;
  
       
        
}

#sect3-story{
    width: 1.5em;
    margin: 0.5em;
    border-radius: 1em;
}

.sect3-name3{
    padding-top: 7em;
    text-align: center;
    color: white;
}





.sect3-card5 { /* #### SECT3 _CARD5 #### */
    background-image: url("images/img5.jpg");
    background-size: cover;
    background-repeat: none;
    height: 12em;
    width: 9em;
    border-radius: 0.5em;
  
       
        
}

#sect3-story{
    width: 1.5em;
    margin: 0.5em;
    border-radius: 1em;
}

.sect3-name4{
    padding-top: 7em;
    text-align: center;
    color: white;
}

.POST-CONTAINER{
    display: grid;
    place-items: center;
}

.posting-section{
    background-color: white;
    width: 32em;
    padding: 3px;
    border-radius: 10px;
}

.Post-layer1{
    display: flex;
    justify-content: center;
    gap: 0.1em;
    padding-top: 6px;  
    padding-bottom: 0.4em;  

}


.Post-layer1 >img{
    width: 2.4em;
    height: 2.5em;
    border-radius: 10em;
    margin-right: 0.8em;
}

hr{
    width: 29em;
    color: #e7e5e5;
    text-align: center;
    margin: 0.4em;
    margin-left: 1.2em;
}

#Post-layer1 {
    width: 29em;
    background-color: lavender;
    padding:0.5em;
    border: hidden;
    border-radius: 1.3em;
    border-color: lavender;
    border-style: none;
    cursor: pointer;

} /* ##### END OF LAYER 1 #####*/



.Post-layer2{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 1.5em;
    padding-top: 0.5em;
}



/* ## LAYER1 POST SUB 1 ##*/
.layer2-post-sub1{
    display: flex;
    cursor: pointer;
}

.post-layer2-text1{
    padding-top: 0.4em;
}
.post-layer2-image1 >img{
    width: 2.3em;
}


/* ## LAYER2 POST SUB 2 ##*/
.layer2-post-sub2{
    display: flex;
    text-align: center;
    cursor: pointer;
}

.post-layer2-image2 >img{
    width: 1.4em;
  
}

.layer2-post-sub2{
    padding-top: 0.3em;
}



/* ## LAYER2 POST SUB3 ##*/
.layer2-post-sub3{
    display: flex;
    cursor: pointer;
}

.layer2-post-sub3:hover{
    background-color: #e7e5e5;
    height: 2em;
    width: fit-content;
}
.layer2-post-sub3{
    padding-top:0.3em ;
}

.post-layer2-image3 >img{
    width: 2em;


} /* #### END OF SECTION 2 #### */




.Post-layer3{
    background-color: #ffffff;
    margin: 1em;
    padding: 0.5em;
    border-radius: 0.4em;
    cursor: pointer;

}

#post-layer3-sect1{
    display: flex;
}

#post-layer3-sect1 >li{
   display: flex;
}

#post-layer3-sect1 >img {
    width: 2em;
    height: 2em;
    border-radius: 2em;
    padding: 4px;

}
#post-layer3-sect1 >li{
    border: lightblue 1px solid ;
    padding: 0.3em;
    border-radius: 7em;
   
}

#post-layer3-sect1 >li:hover{
    background-color: #dbdbdb4f;
}
.post-layer3-text1{
    padding-top: 0.5em;
    color: #18a3ff;
    font-family:"Poppins", sans-serif;
    font-size: 14px;
}

.post-layer3-Add-Video {
    width: 2em;
    height: 2em;
    border-radius: 2em;
    
    
}


.post-layer3-plus-vidoe{
    padding-top: 9px;
    border: 2px lightblue solid;
    border-radius: 2em;
}   /* ### End of Post layer 3 ### */





.Post-layer4{  /* ###POST LAYER 4 ###*/
    background-color: #ffffff;
    width: 32em;
    margin: 0.1em;
    padding: 0.1em;
    border-radius: 0.4em;
    cursor: pointer;
}

#post-layer4-sect1{
    display: flex;
}
.Post-layer4-imgpro >img{
    width: 2em;
    height:2em;
    border: 1px solid grey;
    border-radius: 3em;
    margin: 0.5em;
    
}

.Post-layer4-proname{
    font-size: 11px;
    margin-top: 1em;
    display: flex;
}

.Post-layer4-moreicon{
    padding-top: 1.3em;
    margin-left: 20em;
    font-size: 1em;
}

.Post-layer4-News{
    margin: 0.5em;
    font-family: sans-serif;
    cursor: default;
}

.Post-layer4-image-post >img{
    width: 32.2em;
    height: 20em;
}

/* ### EMOJI SECTION  ###*/


.Post-layer4-Emojy {
    display: flex;
    margin-left: 1em;
}

.Post-layer4-Emojy1{
    width: 1em;
    height: 1em;
    padding-top: 0.3em;
}

.Post-layer4-Emojy2{
    width: 1.1em;
    height: 1.1em;
    padding-top: 4px;
    

}

.Post-layer4-like-num{
    padding: 3px;
    font-size: 15px;
}
.Post-layer4-comment{
    padding-top: 6px;
    margin-left: 18em;
    font-size: small;
}


.Post-layer4-Share{
    padding-top: 6px;
    margin-left: 2em;
    font-size: small;

}

.Post-layer4-react-section{
    display: flex;
    justify-content: center;
    gap: 5em;
    padding: 2px;



}   /* #### END OF SECTION 3 POSTS ### */



/* ## ----------------------#------------------------- #### */





.Section-4{  /* ### START OF SECTION 4 #### */
   gap: 2em;
   
}

.Section-4-header{
    padding: 0.4em;
    font-size: 17px;
    font-weight: 400;
    margin-left: 0.5em;
}

.sect4-card1{
    margin: 0.5em;
}
.sect4-card1-sub1 {
    display: flex;
    justify-content: center;
  
    
}

.sect4-card1-sub1:hover {
    background-color: gainsboro;
    border-radius: 0.5em;
    
}
.sect4-card1-sub1 >img{ 
    width: 7em;
    height: 8em;
    border-radius: 0.5em;
  
}

.sect4-card1-sub1 >p{
    padding-top: 4em;
    font-size:10px;
    letter-spacing:1px;
    
}



/* # SECTION 4 -LAYER1 CARD 1 */
.sect4-card2-sub2 {
    display: flex;
    justify-content: center;
    margin-right: 1.3em;
    
}

.sect4-card2-sub2:hover {
    background-color: gainsboro;
    border-radius: 0.5em;

}

.sect4-card2-sub2 >img{ 
    width: 9em;
    height: 8em;
    border-radius: 0.5em;
  
 
    
}

.sect4-card2-sub2 >p{
    padding-top: 4em;
    font-size:10px;
    letter-spacing:1px;
    
}


/* ### SECTION 4 LAYER2 ## */



.sect4-layer2-header{
    display: flex;
    
}

.sect4-layer2-header >p{
    font-size: 12px;
    margin-left: 2.5em;
}

#sect-layer4-icon{
    padding-top: 3px;
    margin-left: 3.4em;
}

.sect4-layer2page >img{
    width: 2em;
    height: 2em;
    border-radius: 3em;
    
}
.sect4-layer2page >p{
    margin-left: 4px;
    padding-top: 4px;

}
.sect4-layer2page{
    display: flex;
    text-align: center;
    margin-left: 1.7em;
    padding: 0.5em;
    
}

.sect4-layer4-icons{
    list-style: none;
    padding: 0.5em;
    margin-left:4em;
    font-size: small;
    
}


/* ## SECTION 4 -LAYER 2 BRITHDAY CARD */
.sect4-layer2-brithday{
    margin-left: 0.5em;
}
.sect4-brith-header{
    margin-left: 1.5em;
}
.Sect4-layer2-card1{
    display: flex;
}
.Sect4-layer2-img-gift >img{
    width: 4em;
}

.Sect4-layer2-text1{
    font-size: 12px;
    padding-top: 1.4em;
}

.sect4-layer2-brith-text{
    font-size: 10px;
}  /* END SECTION 4 LAYER 2 #### */




/* ### SECTION 4 LAYER 3 ### */

.Section-4-layer3{
    margin-left: 2em;
    gap: 2em;
    display: flex;
    
}

.Sect4-layer3-header{
    font-family: 'Poppins', sans-serif;
}

.Sect4-layer3-icons{
    margin-left: 2em;
   
}



/* ### SECTION 4 LAYER 3 CONTACT */

.Section-4-layer3-conta-container{
    margin-bottom: 1em;
}
.Sect4-Icon-cont{
    display: flex;
    margin-left: 1em;

}
.Sect4-Icon-cont >img {
    width: 2.8em;
    height: 3em;
    border-radius: 3em;

}

.Sect4-cont-name{
    padding-top: 0.7em;


} /* ## END SECTION 4 LAYER 3 CONTACTS OR FREIDS  ######*/




.Section4-layer4{
    margin-left: 2em;
}

.section-layer-4-text1{
    font-size: 12px;
}