@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@500;600;800&display=swap');


*{
    font-family: 'Noto Sans Thai Looped', sans-serif;
    font-weight: 800;
}

body {

    background: url('image/bg2_2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container-fluid {
    justify-content: space-between;
}

.navbar {
    border: 2px solid rgb(255, 255, 255, .3);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.436);
    font-weight: 800;
}

.navbar img {
    width: 100%;
    height: 40px;
}

.navbar .nav-link {
    display: inline-block;
    color: rgb(125, 78, 34);
    margin-left: 20px;
    font-size: 17px;
    box-shadow: inset 0 0 0 0 #a3690552;
    transition: color .10s ease-in-out, box-shadow .10s ease-in-out;
    border-radius: 5px;
    opacity: 0;
    animation: slidetop .5s ease forwards;
    animation-delay: calc(.10s * var(--i));
}

@keyframes slidetop {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar .nav-link:hover {
    box-shadow: inset 150px 0 0 0 #a3690552;
}

.navbar .cart_icon a i {
    font-size: 22px;
    cursor: pointer;
}

.navbar .bi {
    font-size: 20px;
    padding: auto;
}