*{
    padding: 0;
    margin: 0;
    background-color: black;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


.instagram{
    height: 100vh;
    width: 100%;
    display: flex;

}


.left_bar{
    width: 18%;
    height: 100vh;
    border-right: 1px solid #504949;
    
}


#logo{
    font-family:'Times New Roman', Times, serif;
    font-size: 29px;
}

.left_bar .items{
    display: flex;
    text-align: center;
    align-items: center;
    padding: 12px;
    font-size: 16px;
    margin: 6px;
    
}

.left_bar .items .material-symbols-outlined{
    margin-right: 12px;
    font-size: 27px;
}


.post{
    width: 55%;
    height: 100vh;

}

.post .story .items{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 12px;
    font-weight: 200;
}

.post .story{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.post .story .items .profile{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.post .story .items .profile .img{
    background-image: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
    padding: 2px;
    border-radius: 50%;
    display: inline-block;
}

.post .story .items .profile .img img{
 height: 60px;
 width: 60px;
 border-radius: 50%;
 object-fit: cover;
 display: block;
 padding: 3px;
}

.post .main_post{
    height: 75vh;
    width: 70%;
    margin: auto;
}

.post .main_post .profile{
    margin: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.post .main_post .profile img{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    display: inline-block;
    background-image: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.post .main_post .img{
    display: flex;
    justify-content: center;
    align-items: center;
}

.post .main_post .img img{
    height: auto;
    width: 100%;
    border-radius: 10px;
}

.post .main_post .engagement{
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post .main_post .engagement .material-symbols-outlined{
    font-size: 1.8rem;
}

.post .main_post .engagement .left{
    display: flex;
    align-items: center;
    gap: 20px;
}


.suggestion_section{
    width: 25%;
    height: 100vh;
  
}

.suggestion_section .suggestion{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 14px;
}

.suggestion_section .profile{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.suggestion_section .profile .img img{
    height: 50px;
    width: 50px;
    border-radius: 100%;
}

.suggestion_section .suggestion .follow{
    color: blueviolet;
}

.suggestion_section .suggestion .profile p{
    color: #bcbab7;
}

.suggestion_section .suggestion .see{
    color: white;
}

.m{
    margin-top: 40px;
}
  @media (max-width: 768px) {
        .container {
            margin: 100px auto;
            max-width: 90%;
            padding: 30px;
        }

        input, textarea {
            width: 100%;
        }

        button {
            margin: 20px auto 0;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 20px;
        }

        h1 {
            font-size: 20px;
        }

        button {
            width: 100%;
        }
    }