* {

    box-sizing: border-box;

}

body {

    margin: 0;

    height: 100vh;

    background: #241a35;

    color: white;

}
.container {

    display: flex;

    height: 100vh;

    overflow: hidden;

}
.left {

    width: 20%;

    height: 100vh;

}
.middle {

    width: 60%;

    height: 100vh;

    display: flex;

    flex-direction: column;

}
.right {

    width: 20%;

     height: 100vh;

}
.left,
.middle,
.right {

    border: 1px solid black;

    min-height: 600px;

    padding: 20px;

}
.header {


    padding: 25px;

    text-align: center;

     font-family: Arial;

    font-size: 72px;

    font-weight: bold;


}

.post {


    margin-top: 20px;

    
}

.posts {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    scrollbar-width: none;

    text-align: center;

}

.posts::-webkit-scrollbar {

    display: none;

}


.video-post {

    min-height: 0;

}

.video-wrapper {

    width: 100%;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

    aspect-ratio: 16 / 9;

}

.video-wrapper iframe {

    width: 100%;

    height: 100%;

    border: 0;

}


.header {

    color: transparent;

    background-image: linear-gradient(
        90deg,
        #ffd2f0 0%,
        #ff7bcf 30%,
        #8cffb2 65%,
        #8cffb2 100%
    );

    background-size: 120px 100%;

    background-clip: text;

    -webkit-background-clip: text;

    animation: pigeon-shimmer 8s ease infinite;

}

.post {

    color: white;

    margin-top: 20px;

}


@keyframes pigeon-shimmer {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}
.audio-post {

    display: flex;

    justify-content: center;

    align-items: center;

}

.audio-button {

    width: 100px;

    height: 100px;

    border: 4px solid #ff7bcf;

    background: #ff7bcf;

    color: #241a35;

    font-family: Arial;

    font-size: 42px;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

@media (max-width: 700px) {

    .left,
    .right {
        display: none;
    }

    .middle {
        width: 100%;
    }

}