/*@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";*/

.scrollport {
    overflow-x: auto;

    display: flex;
    gap: var(--size-10);
    align-items: start;
    padding: var(--size-10);
}

.img{
    border : solid;
    border-color : rgb(220,53,69);
    padding : 3px;
}

body {
    font-family: iranyekan;
}

.menu:hover {
    background-color : rgb(245, 245, 245);
    transition-delay : 0.02s;
    transform : scale(1.1);
}

.post2 {
    cursor: pointer;
    transition: 0.15s linear;
}

    .post2:hover {
        transform: scale(0.95);
        transition: 0.2s linear;
    }

    .post2-img{
        aspect-ratio : 16/9;
        object-fit : fill;
    }

.post {
    display: contents;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.post-img {
    width: 100%;
    height: 70%;
    border-radius: 6px;
    transition: 0.3s linear;
}

.post-content {
    background-color: #ffffffdc;
    backdrop-filter: blur(Spx);
    margin: 0 20px;
    padding: 30px;
    border-radius: 6px;
    transform: translateY(-60px);
    transition: 0.3s linear;
    box-shadow: 0px 7px 25px rgba(130, 130, 130, 0.08);
}

    .post-content h3 {
        overflow : hidden;
        text-overflow : ellipsis;
        white-space : nowrap;
        direction : rtl;
        text-align : right;
        font-size: 13px;
        margin-bottom: 10px;
    }

.date {
    font-size: 15px;
    font-style: italic;
    color: rgb(240, 20, 54);
}

.post:hover .post-img {
    transform: translateY(20px);
}

.post:hover .post-content {
    transform: translateY(-80px);
}

@media screen and (max-width : 1200px) {
    .blog-posts {
        justify-content: center;
    }

    .post {
        width: min-content;
    }
}

::-webkit-scrollbar {
    width : 5px;
    height : 3px;
}

::-webkit-scrollbar-track {
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #dc3545;
}