@supports (font-variation-settings: normal) {
    @font-face {
        font-family: Roboto;
        src: local('Roboto'), local('roboto'),
            url('fonts/RobotoVww.woff2') format('woff2-variations'),
            url('fonts/RobotoVww.ttf') format('truetype-variations')
        ;
        font-weight: 100 900;
        font-display: swap;
    }
} /* variable */

@supports not (font-variation-settings: normal) {
    @font-face {
        font-family: Roboto;
        src: local('Roboto'), local('Roboto-Regular'), local('roboto regular'),
            local('roboto'), local('roboto-regular'),
            url('fonts/Roboto.woff2') format('woff2'),
            url('fonts/Roboto-Regular.ttf') format('truetype')
        ;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
    }

    @font-face {
        font-family: Roboto;
        src: local('Roboto Medium'), local('Roboto-Medium'), local('roboto medium'),
            local('roboto-medium'),
            url('fonts/Roboto.woff2') format('woff2'),
            url('fonts/Roboto-Medium.ttf') format('truetype')
        ;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
    }

    @font-face {
        font-family: Roboto;
        src: local('Roboto Medium'), local('Roboto-Medium'), local('roboto medium'),
            local('roboto-medium'),
            url('fonts/Roboto.woff2') format('woff2'),
            url('fonts/Roboto-Medium.ttf') format('truetype')
        ;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
    }

    @font-face {
        font-family: Roboto;
        src: local('Roboto Bold'), local('Roboto-Bold'), local('roboto bold'),
            local('roboto-bold'),
            url('fonts/Roboto.woff2') format('woff2'),
            url('fonts/Roboto-Bold.ttf') format('truetype')
        ;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
    }
} /* not variable */

/* css css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    scrollbar-gutter: stable;
}

/* Prevent font size inflation */
html {
    font-family: 'Roboto',system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,arial;
    font-family: var(--font-family);
    font-size: 16px;
    font-size: max(16px, min(calc(6px + .75vw), 26px));
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
}

body {
    line-height: 1.5;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
    background-color: inherit;
}

p, h1, h2, h3, h4, h5, h6, input {
    word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, li {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

:root {
    --font-family: 'Roboto',system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,arial;
    --font-weight: 400;
    --font-weight-input: 400;
    --font-weight-title: 500;
}

.loader-cont {
    display: flex;
    justify-content: center;
    align-items: center;
}

.base-loader {
    width: -moz-fit-content;
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.5rem;
    clip-path: inset(0 3ch 0 0);
    animation: l4 1s steps(4) infinite;
}

@keyframes l4 {to{clip-path: inset(0 -1ch 0 0)}}