/*root variables font-size*/
:root {
    --font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.nice-navbar{
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.3px);
    -webkit-backdrop-filter: blur(8.3px);
    border: 1px solid rgba(255, 255, 255, 0.41);
    position: absolute;
    width: 54%;
    border : 0;
    z-index: 1000;
    left: 23%;
}

.nice-footer{
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.3px);
    -webkit-backdrop-filter: blur(8.3px);
    border: 1px solid rgba(255, 255, 255, 0.41);
    border: 0;
}



.navbar{
    border-radius: 15px;
    shadow: 0 0 10px rgba(0,0,0,0.1);
}

.colored-text{
    background: rgb(131,58,180);
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content {
    padding: var(--spacer) 11rem;
}

.custom-card{
    img{
        object-fit: cover;
        border-radius: 10px;

        transition: filter 700ms ease, transform 150ms ease;
        transition-property: transform;
        transition-duration: .15s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
    }

    .blog-title{
        font-size: 20px;
        font-weight: 700;
    }

    .blog-short-desc{
        font-size: 14px;
        font-weight: 400;
    }

    img:hover{
        transform: scale(1.04);
    }

}


.text-muted-foreground{
    color: #6c757d;
    --text-opacity: 1;
    color: rgba(108, 117, 125, var(--text-opacity));
}


body{
    background-image: url('https://mehmeteminsayim.com/images/bg-top.webp');
    background-size: 75% 50%;
    background-repeat: no-repeat;
    background-position: top;
}

.page-content{
    background-image: url('https://mehmeteminsayim.com/images/bg-bottom.webp');
    background-size: 75% 15%;
    background-repeat: no-repeat;
    background-position: bottom;
}



@media (max-width: 768px) {
    .bg-nice-transparent{
        width: 95%;
    }

    .content {
        padding: var(--spacer) 1rem;
    }

    .nice-navbar{
        width: 92%;
        left: 4%;
    }
}

.navbar-nav-link:focus,.navbar-nav-link:hover {
    color: #fff;
    background-color: rgba(4, 66, 255, 1);
}