.topbar {
    color: var(--color-theme-white);
}

.navbar__menu li .active {
    color: var(--color-primary-selected);
}

.navbar__menu li:hover>div:not(.active) {
    color: var(--color-primary-hovered);
}

.navbar__menu li:focus>div:not(.active) {
    color: var(--color-primary-selected);
}

.navbar__menu li:hover>div a span:before,
.navbar__menu li:hover>div button p:before,
.navbar__menu li.active>div a span:before,
.navbar__menu li.active>div button p:before {
    opacity: 100%;
}

.break-all {
    word-break: break-all;
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.dark .topbar {
    color: var(--color-theme-black);
}

@media (width >=90rem) {
    .dark .navbar__menu li:hover>div:not(.active) {
        color: var(--color-dark-primary-hovered);
    }

    .dark .navbar__menu li:focus>div:not(.active) {
        color: var(--color-dark-primary-selected);
    }
}

.home-bg .text-box {
    display: inline-block;   /* shrink to content */
    background: #38383887;
    padding: 10px 15px;
}

.home-bg .container p {
    white-space: pre-wrap;
}
/* ------------------------------------------- */
.aspect-\[608\/450\] {
    aspect-ratio: 608/450;
}