@font-face {
    font-family: 'Roboto';
    src: url('/files/Roboto-Regular.woff2') format('woff2');
    font-stretch: 100%;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/files/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
}

html {
    --theme-bg: #ffffff;
    --theme-color: #212121;
    --theme-border: #f1f1f1;
    --group-bg: #f1f1f1;
    --block-bg: #ffffff;
    --opacity-bg: rgba(255, 255, 255, .7);
    --link-color: #2799d4;
    --text-color: #212121;
    --hint-color: #708499;
    --group-padding: 6px;
    --group-gap: 3px;
    --subgroup-gap: 6px;
    --block-padding: 6px 8px;
    --active-color: #2E86C1;
    --border-radius: 6px;
}

html[data-theme='dark'] {
    --text-color: #f5f5f5;
    --bg: #17212b;
    --group-bg: #17212b;
    --block-bg: rgba(255, 255, 255, .05);
    --opacity-bg: rgba(255, 255, 255, .3);
    --hint-color: #708499;
}

* {
    box-sizing: border-box;
}

a, .link {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

b, strong {
    font-weight: 700;
}


body {
    color: var(--theme-color);
    font-family: 'Roboto', 'Tahoma', 'Arial', sans-serif;
    font-weight: 400;
    margin: 0 auto;
}

.flex {
    display: flex;
}
.flex-v {
    flex-direction: column;
}
.flex-c {
    align-items: center;
    justify-content: center;
}

.fs {
    min-height: 100vh;
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .only-mobile {
        display: none;
    }
}

@media only screen and (max-width: 599px) {
    .only-full {
        display: none;
    }

    .header {
        text-align: center;
    }

    .main-title,
    .main-subtitle {
        padding: 0 12px;
    }

    .block_link_with_icon {
        margin: 0 12px 12px;
    }

}