.font-balinese {
    font-family: "Noto Serif Balinese", serif;
    font-weight: 400;
    font-style: normal;
}

article p {
    margin-top: 10px;
}

::selection {
    background-color: color-mix(
        in srgb,
        oklch(58.8% 0.158 241.966) 90%,
        transparent
    );
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(
            in oklab,
            var(--color-emerald-600) 90%,
            transparent
        );
    }
    color: var(--color-white);
}

.feature ul {
    list-style-type: disc;
}

.feature li {
    margin-left: 20px;
    margin-bottom: 10px;
}

.feature li:last-child {
    margin-bottom: 0;
}

.feature p {
    margin-bottom: 10px;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-160 {
    max-width: 160px;
}

.h-24 {
    height: 6rem;
}

.h-32 {
    height: 8rem;
}

.top-2\.5 {
    top: 0.625rem;
}

.sidebar-nav {
    & li {
        &.account-menu {
            &.active,
            &:hover {
                & .navbar-link {
                    color: var(--color-emerald-600) !important;
                }
            }
        }
    }
}

article .post-content p {
    margin-bottom: 1.25rem;
}

article .post-content h1,
article .post-content h2,
article .post-content h3,
article .post-content h4,
article .post-content h5,
article .post-content h6 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-weight: bold;
}

article .post-content ul,
article .post-content ol {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    margin-left: 1.85rem;
}

article .post-content ul li,
article .post-content ol li {
    margin-bottom: 10px;
    list-style: disc;
}

article .post-content p:last-child {
    margin-bottom: 0;
}

@layer utilities {
    .focus\:border-indigo-600 {
        &:focus {
            border-color: var(--color-emerald-600);
        }
    }
}

@layer utilities {
    .fill-green-600\/5 {
        @supports (color: color-mix(in lab, red, red)) {
            fill: color-mix(in oklab, var(--color-green-600) 5%, transparent);
        }
    }

    .fill-emerald-600\/5 {
        @supports (color: color-mix(in lab, red, red)) {
            fill: color-mix(in oklab, var(--color-emerald-600) 5%, transparent);
        }
    }

    .fill-red-600\/5 {
        @supports (color: color-mix(in lab, red, red)) {
            fill: color-mix(in oklab, var(--color-red-600) 5%, transparent);
        }
    }

    .fill-orange-600\/5 {
        @supports (color: color-mix(in lab, red, red)) {
            fill: color-mix(in oklab, var(--color-orange-600) 5%, transparent);
        }
    }
}

#topnav {
    &.nav-sticky {
        & .navigation-menu {
            &.nav-light {
                & > li {
                    &:hover,
                    &.active {
                        & > a {
                            color: var(--color-emerald-600) !important;
                        }
                    }
                }
            }
        }
    }
}

#topnav {
    & .has-submenu {
        & .submenu {
            & .has-submenu {
                &:hover {
                    & > .submenu-arrow {
                        border-color: var(--color-emerald-600);
                    }
                }
            }
        }
    }
}

#topnav {
    & .has-submenu {
        & .submenu {
            & .has-submenu {
                &:hover {
                    & > .submenu-arrow {
                        &:where(.dark, .dark *) {
                            border-color: var(--color-emerald-600);
                        }
                    }
                }
            }
        }
    }
}

#topnav {
    & .has-submenu {
        &.active {
            & .submenu {
                & li {
                    &.active {
                        & > a {
                            &:where(.dark, .dark *) {
                                color: var(--color-emerald-600) !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 992px) {
    #topnav {
        & .navigation-menu {
            & > li {
                & .submenu {
                    & li {
                        & a {
                            &:hover {
                                color: var(--color-emerald-600) !important;
                                &:where(.dark, .dark *) {
                                    color: var(--color-emerald-600) !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.tns-nav {
    margin-top: calc(var(--spacing) * 3);
    text-align: center;
    button {
        margin: calc(var(--spacing) * 1);
        border-radius: 3px;
        border-style: var(--tw-border-style);
        border-width: 0px;
        background-color: color-mix(
            in srgb,
            oklch(51.1% 0.262 276.966) 30%,
            transparent
        );
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-emerald-600) 30%,
                transparent
            );
        }
        padding: 5px;
        --tw-duration: 500ms;
        transition-duration: 500ms;
        &.tns-nav-active {
            rotate: 45deg;
            background-color: var(--color-emerald-600);
        }
    }
}

.tns-nav {
    & button {
        &.tns-nav-active {
            rotate: 45deg;
            background-color: var(--color-emerald-600);
        }
    }
}