*{
    margin: 0 0;
    box-sizing: border-box;
    
}
.bg{
    background-image: url("../files/new_main_backg.png");
    background-size: cover;
    position: fixed;
    top: 0; left: 0;
    transform: scale(1.2);
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    filter: blur(15px);
    z-index: -1;
    animation-name: bgMainMove;
    animation-iteration-count: infinite;
    animation-duration: 180s;
    animation-timing-function: linear;
}
@keyframes bgMainMove {
    0%{transform: scale(1.2) translate(0%)}
    50%{transform: scale(1.45) translate(-2%, -2%)}
    100%{transform: scale(1.2) translate(0%)}
}
a{
    text-decoration: none;
}
.header img{
    height: 60px;
    
}
.header{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    height: 60px;
    position: sticky;
    top: 0px;
    box-shadow: 0px 2px 10px mediumpurple;
    box-shadow-spread: 70px;
    background-color: #7574a2;
}
.navbar{
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.navlinks{
    gap: 69px;
}
.navbar li:hover{
    display: flex;
    border-radius: 3px;
    background-color: #4c4f77;
    box-shadow: 0 0 20px #af89af;
    height: 43px;
    cursor: pointer;
}
.navbar li{
    display: flex;
    font-family: "Lexend Deca";
    font-weight: 800;
    width: auto;
    padding: 0 40px;
    height: 43px;
    justify-content: center;
    align-items: center;
}
.navbar a{
    color: rgb(255 247 247 / 0.73);
}
.user{
    display: flex;
    margin-left: auto;
    margin-right: 20px;
    padding: 5px 10px;
    font-family: "Lexend Deca";
    align-content: center;
    align-items: center;
    font-weight: 500;
    color: rgb(204 185 210);
    box-shadow: 0 0 15px #af89af;
    background-color: mediumpurple;
    height: 40px;
    width: fit-content;
}
.user:hover{
    transition: text-shadow;
    text-shadow: 100px 100px 99px rgb(255 41 168 / 0.35);
}
.navbar ul{
    list-style: none;
    display: flex;
}
main{
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    align-items: start;
    margin-top: 10px;
}
aside{
    position: sticky;
    top: 60px;
    font-family: "Lexend Deca";
    font-weight: 500;
    margin-left: 7px;
}
.user-card{
    border: 1px solid rgb(180 180 255 / 0);
    display: flex;
    height: 38px;
    align-items: center;
    align-content: center;
    text-decoration: none;
}
.user-card a{
    color: rgb(204 185 210);
    border-radius: 3px;
    padding: 0px 5px;
}
.user-card:hover{
    background-color: rgb(207 145 236 / 0.35);
    margin-left: 0;
}
.user-card img{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-left: 4px;
    object-fit: cover;
    position: relative;
}
.user-card span{
    max-width: 120px;
    overflow: hidden;
    margin-left: 4px;
}
.user-card button{
    border: 1px solid rgb(180 180 255 / 0.35);
    margin-left: auto;
    margin-right: 7px;
    font-family: "Lexend Deca";
    font-weight: 600;
    background-color: rgb(243 243 243 / 0.29);
    color: rgb(157 157 203);
}
.follow-button:hover{
    cursor: pointer;
    transition: 0.2s 0.2s;
    background-color: rgb(255 255 255);
    color: rgb(153 50 204 / 0.69);
}
.profile_plank{
    display: flex;
    align-items: center;
    border: 2px solid rgb(250 235 215 / 0.47);
    height: 20vh;
    background-color: #7574a2;
}
.profile_pic img{
    display: flex;
    border: 2px solid rgb(255 255 255 / 0.33);
    border-radius: 50%;
    height: 150px;
    width: 150px;
    object-fit: cover;
    margin-left: 7px;
}
.bio{
    display: flex;
    margin-bottom: auto;
    margin-top: 20px;
    flex-direction: column;
    padding-left: 20px;
    gap: 5px;
    font-family: "Lexend Deca";
}
.bio span{
    color: #dee0fa;
    padding-left: 4px;
    padding-right: 8px;
    background-color: #373757;
    width: fit-content;
    
}
.bio p{
    display: flex;
    align-items: center;
    width: 97%;
    height: 55px;
    background-color: #373757;
    color: #d0d0ee;
}
.post{
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
    font-family: "Lexend Deca";
    font-weight: 399;
    background-color: rgb(182 182 255 / 0.18);
}
.post p {
    color: rgb(204 185 210);
    height: auto;
    margin-top: 5px;
    background-color: rgb(181 187 234 / 0.09);
}
.attachment{
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}
.post a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: fit-content;
    font-family: "Lexend Deca";
    padding-right: 10px;
    border-radius: 100px;
    font-weight: 400;
    color: rgb(204 185 210);
    background-color: rgb(181 187 234 / 0.26);
}
.post button{
    border: 1px solid rgb(255 255 255 / 0.56);
    border-radius: 4px;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
    background: rgb(180 180 255 / 0.35);
    cursor: pointer;
    color: rgb(204 185 210);
}
.pfp{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    object-fit: cover;
    overflow: hidden;
}
.post button:hover{
    background-color: rgb(180 180 255 / 0.78);
    color: rgb(83 74 96 / 0.75);
}
.post a:hover{
    background-color: rgb(180 180 255 / 0.78);
}
article{
    display: grid;
    position: sticky;
    top: 60px;
    padding: 0 8px;
    font-family: "Lexend Deca";
    font-weight: 400;
}
section{
    background-color: rgb(182 182 255 / 0.18);
    min-height: calc(100vh - 60px);
}  
.trending{
    border: 1px solid;
    border-radius: 10px;
    padding: 3px 10px;
    margin-top: 8px;
    background-color: #9989cc;
}
.trending a{
    color: rgb(204 185 210);
}
h3{
    margin-top: 8px;
    color: rgb(151 116 155);
}
.trending p{
    color: rgb(255 255 255 / 0.16);
}
.trending:hover{
    /*background-color: rgb(238 221 250);*/
    background-color: rgb(207 145 236 / 0.81);
}

footer{
    display: grid;
    border: 1px solid #595959;
    padding: 10px;
    justify-content: center;
    font-family: "Lexend Deca";
    background-color: #7574a2;
    font-weight: 400;
    color: rgb(180 180 180 / 0.66);
}
footer p{
    justify-content: center;
    padding-left: 100px;
}
footer a{
    display: flex;
    justify-content: center;
    font-family: "Lexend Deca";
    font-weight: 700;
    text-decoration: none;
    color: rgb(180 180 180 / 0.66);
}
#button_edit_post_send{
    position: relative;
    bottom: 1px;
    align-items: center;
    box-shadow: none;
    border: 1px solid;
    border-radius: 0;
    height: 30px;
    width: 95%;
    background: rgb(180 180 255 / 0.35);
    cursor: pointer;
    color: rgb(204 185 210);
    top: 0.1px;
    margin-top: 3px;
    margin-bottom: 3px;
}
#button_edit_post_send:hover {
    background: rgb(167 167 252 / 0.87);
}