@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&family=Spartan:wght@100;200;300;400;600;700;800;900&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    nav {}
    
    .post-info-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        display: flex;
        align-items: center;
        border-radius: 5rem 5rem 5rem 5rem;
        margin-top: 25rem;
        margin-bottom: 25rem;
        position: relative;
        margin-left: 3rem;
        margin-right: 3rem;
        border: 1.5rem solid black;
    }
    
    .rgb::after {
        content: "";
        background: linear-gradient(45deg, #ff0000 0%, black 50%, #e20202 100%) repeat 0% 0% / 300% 100%;
        position: absolute;
        inset: -3px;
        border-radius: 16px;
        filter: blur(8px);
        z-index: -1;
        /*or z-index */
        animation: rgb 6s linear infinite;
    }
    
    @keyframes rgb {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    a {
        text-decoration: black;
        color: rgb(255, 255, 255);
        font-size: 1.5rem;
    }
    
    body {
        position: absolute;
    }
    
    #video {
        position: fixed;
        z-index: -1;
        width: auto;
    }
    
    .inercontainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .introduction {
        text-align: center;
        font-size: 3rem;
        color: white;
        margin-top: 3rem;
        margin-bottom: 3rem;
        text-shadow: 2rem red;
    }
    
    #introduction-text {
        margin-top: 6rem;
        margin-bottom: 6rem;
        text-shadow: 2rem red;
    }
    
    #instalogo {
        margin-top: 2rem;
        margin-bottom: 2rem;
        opacity: 0.5;
    }
    
    #instalogo:hover {
        opacity: 0.8;
        transform: scale(1.2, 1.2);
    }
    
    .follow {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    #logo {
        margin-top: 3rem;
        margin-bottom: 1rem;
    }
    
    #logo:hover {
        transform: scale(1.2, 1.2);
    }
    
    header {
        width: 100%;
        background: rgb(65, 0, 4);
        background: linear-gradient(90deg, rgba(65, 0, 4, 1) 0%, rgba(0, 0, 0, 1) 52%);
        border-radius: 0rem 0rem 0rem 5rem;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: rgba(255, 255, 255, 0.801) 0px 22px 70px 4px;
        color: aliceblue;
        border: 2px solid rgb(255, 249, 249);
    }
    
    .text {
        color: white;
        margin-left: 2rem;
        font-size: 3rem;
    }
    
    .likes-comments-shares {
        display: flex;
        justify-content: space-evenly;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    .image-container {
        padding: 3rem;
    }
    
    #image {
        border-radius: 5rem 5rem 5rem 5rem;
        box-shadow: rgb(255, 255, 255) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
    
    #image:hover {
        box-shadow: rgb(255, 0, 0) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        transform: scale(1.1, 1.1);
    }
    
    .container {
        margin: 1rem;
        display: flex;
        align-items: center;
    }
    
    .informations {
        padding: 3rem;
        width: 50%;
    }
    
    .discribing {
        margin-top: 3rem;
        text-align: center;
        color: aliceblue;
        font-size: 5rem;
        opacity: 0.7;
    }
    
    .discribing:hover {
        margin-top: 3rem;
        text-align: center;
        color: rgb(172, 0, 0);
        opacity: 1;
        transform: scale(1.2, 1.2);
    }
    
    #iner-body {
        width: 100%;
    }
    
    @media screen and (min-width: 300px) {
        .image-container {
            padding: 3rem;
        }
        #iner-body {
            width: 100%;
        }
        body {
            width: 100%;
        }
        nav {
            width: 100%;
        }
        header {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 0rem 0rem 7rem 7rem;
        }
        .inercontainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .informations {
            display: flex;
            flex-direction: column;
            align-items: center;
            order: 2;
        }
        .likes-comments-shares {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .post-info-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .image-container {
            order: 1;
            width: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            order: 1;
        }
        .disc {
            order: 0;
        }
        #video {
            width: auto;
            height: 100%;
        }
        .post-info-container {
            padding-top: 2rem;
            padding-bottom: 2rem;
            padding-left: 2rem;
            padding-right: 2rem;
            border-radius: 5rem 5rem 5rem 5rem;
            margin-top: 25rem;
            margin-bottom: 25rem;
            position: relative;
            margin-left: 3rem;
            margin-right: 3rem;
            border: 1.5rem solid black;
        }
        .rgb::after {
            content: "";
            background: linear-gradient(45deg, #ff0000 0%, black 50%, #e20202 100%) repeat 0% 0% / 300% 100%;
            position: absolute;
            inset: -3px;
            border-radius: 16px;
            filter: blur(8px);
            z-index: -1;
            /*or z-index */
            animation: rgb 6s linear infinite;
        }
        @keyframes rgb {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    }