/* html elements */
/* will be overwriten by tailwind utilities */
@layer base {
    h1, h2, h3, h4, h5 {
        font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
        /* color: var(--color-primary);*/
    }

    body, html {
        font: 400 14px/1.6 'Montserrat', Verdana, Helvetica, sans-serif;
        color: var(--secondary-color);
        background-color: var(--body_bg_color);
    }

    body:has(dialog[open]) {
        overflow: hidden;
    }

    dialog::backdrop {
        background-color: rgba(0, 0, 0, 1);
    }

    dialog:modal {
        max-width: 100vw;
        max-height: 100vh;
    }

    fieldset {
        @apply border-1 border-solid border-gray-300 rounded-md py-2 px-4 text-sm m-0;
    }

    hr {
        @apply border-solid border-slate-400 p-0 m-0 h-0;
        border-width: 0.5px;
    }

    turbo-frame {
        display: block;
        transition: opacity 0.3s ease;
    }

    turbo-frame[loading] {
        opacity: 0.5;
    }

    pre, code {
        @apply max-w-full break-words wrap-break-word overflow-hidden;
    }
}