:root {
    --const-black: #000000;
    --const-white: #FFFFFF;
    --color-black: #302c2c;
    --color-white: #f6f6f6;
    --color-black-focus: #252222;
    --color-black-active: #000000;
    --color-gray: #464646;
    --color-gray-light: #eeeeee;
    --color-gray-semi: #757575;
    --color-blue: #5094fc;
    --color-blue-focus: #4683de;
    --color-blue-active: #3c6fbd;
    --color-red: red;
    --color-red-focus: rgb(234, 0, 0);
    --color-red-active: rgb(215, 0, 0);

    --color-timeweb: #454cee;
    --color-timeweb-focus: #3b40d0;
    --color-timeweb-active: #353abc;
    --color-firebase: #f38226;
    --color-firebase-focus: #d67423;
    --color-firebase-active: #bb6620;
    --color-regru: #3755fa;
    --color-regru-focus: #233cc8;
    --color-regru-active: #1f34af;

    --font-family-regular: RobotRegular, sans-serif;
    --font-family-bold: RobotoBold, sans-serif;

    --font-size-xxl: 28px;
    --font-size-xl: 24px;
    --font-size-l: 20px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xs: 10px;

    --border-radius-l: 20px;
    --border-radius-m: 10px;
    --border-radius-s: 5px;

    --size-width-navbar: 250px;
    --size-height-header: 70px;
}

@font-face {
    font-family: RobotRegular;
    src: url(/font/Roboto-Regular.ttf);
}

@font-face {
    font-family: RobotoBold;
    src: url(/font/Roboto-Bold.ttf);
}

* {
    margin: 0;
    padding: 0;
    color: var(--color-black);
    outline: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-family-regular);
    font-size: var(--font-size-m);
}

html {
    scroll-behavior: smooth;
    background-color: var(--const-white);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-width: 100vw;
    min-height: 100vh;
    min-width: 100dvw;
    min-height: 100dvh;
}

h1,
h2,
h3 {
    font-size: var(--font-size-xl);
    font-family: var(--font-family-bold);
}

h4,
h5,
h6 {
    font-size: var(--font-size-l);
    font-family: var(--font-family-bold);
}

a,
p,
b {
    font-size: var(--font-size-m);
}

a {
    text-decoration: none;
}

b {
    font-family: var(--font-family-bold);
}

label {
    font-size: var(--font-size-s);
}