#intro div h2{
    letter-spacing: normal;
    transition: all 1s ease-in;
}

#intro div h2:hover{
    letter-spacing: 1vw;
    font-size:max(3vw,3vh);
    transition: all 0.4s ease-out;
}

.deporte-selector {
    position: relative;
    display: flex;
    overflow-x: auto;
    background-color: rgba(200, 200, 200, 0.089);
    border-radius: 20px;
    padding: 10px;
    width:fit-content;
    max-width: 80vw;
    margin:1rem auto;
}

.deporte {
    flex: 0 0 auto;
    padding: 20px 40px;
    margin: 5px;
    border: 2px solid var(--main);
    border-radius: 15px;
    cursor: pointer;
    color: var(--main);
    user-select: none;
    position: relative;
    z-index: 1;
    background: none;
    transition: color 0.3s ease;
    font-weight: 700;
    transition: border 0.15s ease-in-out;
}

.deporte:not(.selected):hover{
    border-color:var(--white);
    color:var(--white)
}

.deporte.selected {
    color: var(--white);
}

.deporte::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--main);
    z-index: -1;
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: left;
}

.deporte.selected::after {
    transform: scaleX(1);
}


#posts_container{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin:2rem auto;
    max-width: 90vw;
}

    .postCard_container{
        width:400px;
        max-width:90vw;
        display:flex;
        flex-direction: column;
        justify-content: center;
        margin:1.5rem;
        border:1px solid var(--main);
        padding:max(1vw,1vh);
        border-radius:1rem 0;
    }

        .postCardImage_container{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 390px; /* Adjust as needed */
            position: relative;
            overflow: hidden;
            background-color: #3d3d3d; /* Optional: for better visualization */
            margin:0 auto;
        }

        .postCard_container img{
            max-width:90%;
            max-height:90%;
            justify-self: center;
            align-self: center;
        }


        .postCard_container h3{
            font-size:max(1.5vw,1.5vh,24px);
            font-weight: 600;
            margin:1rem 0;
        }

        .postCard_container p{
            margin-bottom:1rem;
        }

        .blogButton button{
            border-radius:0.5rem;
            border:1px solid var(--main);
            padding:0.5rem 1rem;
            cursor:pointer;
            transition:all 0.3s;
            font-weight:700;
        }

        .blogButton button:hover{
            background-color:var(--main);
            color:var(--black)
        }


#intro, #postContent_container{
    margin:4rem;
}

#postTitle{
    background: linear-gradient(135deg, var(--main) 0%, rgba(177,201,239,0) 150%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:max(40px,5vw,5vh) !important;
}

#posttag{
    font-size: min(3vw,3vh);
    color: rgba(177,201,239,1);
    background: linear-gradient(90deg, var(--white) 0%, rgba(177,201,239,0) 120%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}