*{
   padding: 0;
   margin: 0;
   color: #ffffff;
   font-family: Arial, Helvetica, sans-serif;
}
body{
   background: #000000;
   clip: rect(35px, auto, 90px, auto);
}

/*header*/
header{
   position: relative;
   margin: 4rem 7rem;
   height: 90vh;
}

header nav{
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

header nav button{
   width: 200px;
   height: 40px;
   font-size: 14px;
   border: none;
   border-radius: 20px;
   background: #141414;
   cursor: pointer;
}

header nav div{
   display: flex;
   align-items: center;
   gap: 1rem;
   cursor: pointer;
}

header nav div a{
   text-decoration: none;
}

.div-header-logo p{
   font-size: 30px;
}

.div-profile-social-image a{
   text-decoration: none;
}

.bi-house-social, .bi-bell-fill-social, .bi-bookmark-fill-social, .bi-person-fill-social{
   display: none;
}

.div-profile-social{
   position: absolute;
   bottom: 0rem;
   display: flex;
   align-items: center;
   gap: 5rem;
}

.img-perflog-social{
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

.div-profile-social-image{
   display: flex;
   gap: 1rem;
}

.div-profile-social-image div{
   display: flex;
   flex-direction: column;
}

/*for you*/
.section-foryou{
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%);
   width: 800px;
   height: 90vh;
   border-left: .5px solid #ffffff9a;
   border-right: .5px solid #ffffff9a;
}

.div-foryou{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 60px;
   border-bottom: .5px solid #ffffff9a;
}

.div-foryou p{
   font-size: 14px;
   border-bottom: 3px solid #791b1b;
}

.div-foryou-post{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
   height: 200px;
   border-bottom: .5px solid #ffffff9a;
}

.div-post-anything{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 1.5rem;
}

.div-post-anything div:first-child{
   display: flex;
   align-items: center;
   gap: .5rem;
}

.div-everuone-cansee{
   display: none;
   gap: .5rem;
   margin: 0 4rem;
   cursor: pointer;
}

.div-everuone-cansee p, .div-everuone-cansee svg{
   fill: #ff0000;
   color: #ff0000ca;
}

.div-post-anything input{
   background: transparent;
   border: none;
}
.div-post-anything input:focus{
   outline: none;
}
.div-post-anything input::placeholder{
   font-size: 14px;
}

.hr-foryou-post{
   display: flex;
   justify-content: center;
   width: 90%;
   height: .5px;
   margin: 0 auto;
   background: #ffffff9a;
}

.btn-foryou-post{
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   width: 80px;
   height: 40px;
   border: none;
   border-radius: 20px;
   background-color: #292929;
   font-size: 14px;
   cursor: pointer;
}

.options-burtton-post{
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 1rem 4rem;
}

.options-burtton-post div{
   padding: 10px;
   border-radius: 50%;
   cursor: pointer;
}
.options-burtton-post div:hover{
   background-color: #ffffff14;
}

/*formulario post create*/
form{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: none;
   width: 800px;
   height: 400px;
   border-radius: 20px;
   background: #141414;
   animation: categories-animation 1s ease-in-out;
   position: absolute;
}

.div-close{
   position: absolute;
   top: 1rem;
   right: 1.5rem;
   cursor: pointer;
}

div#itext{
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 4rem 4rem;
}

div#itext img{
   width: 50px;
   height: 50px;
   border-radius: 50%;
}

div#itext input{
   font-size: 20px;
   background: transparent;
   border: none;
}
div#itext input:focus{
   outline: none;
}

.hr{
   display: flex;
   justify-content: center;
   width: 90%;
   height: .5px;
   margin: 15rem auto 2rem auto;
   background-color: #ffffff9a;
}

#isend{
   position: absolute;
   bottom: 2rem;
   right: 2rem;
   width: 100px;
   height: 40px;
   border: none;
   border-radius: 20px;
   font-size: 16px;
   background: #000000;
   cursor: pointer;
}

/*posted*/
.div-posted{
   display: flex;
   align-items: center;
   gap: .5rem;
   width: calc(100% - 2.5rem);
   margin: 1rem 2rem;
   padding-bottom: 10px;
   border-bottom: .5px solid #ffffff9a;
}

.div-posted img{
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

.div-name-perf-posted{
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

.div-name-perf-posted div:first-child{
   display: flex;
   align-items: center;
   gap: .5rem;
}

.div-name-perf-posted div:first-child p:last-child, .div-name-perf-posted div:first-child p.second, .div-name-perf-posted div:first-child p.three{
   font-size: 12px;
   color: #ffffffca;
}

@keyframes categories-animation {
   0%{
     opacity: 0;
   }
   100%{
     opacity: 1;
   }
 }