@font-face {
  font-family: "Roboto (local)";
  font-weight: 400;
  font-style: normal;
  src: url(
      /wp-content/uploads/roboto-v32-cyrillic_latin_latin-ext-regular.woff2
    )format("woff2");
  font-display: swap
}

@font-face {
  font-family: "Roboto (local)";
  font-weight: 500;
  font-style: normal;
  src: url(
      /wp-content/uploads/roboto-v32-cyrillic_latin_latin-ext-500.woff2
    )format("woff2");
  font-display: swap
}

@font-face {
  font-family: "Roboto (local)";
  font-weight: 700;
  font-style: normal;
  src: url(
      /wp-content/uploads/roboto-v32-cyrillic_latin_latin-ext-700.woff2
    )format("woff2");
  font-display: swap
}

@font-face {
  font-family: "Roboto (local)";
  font-weight: 900;
  font-style: normal;
  src: url(
      /wp-content/uploads/roboto-v32-cyrillic_latin_latin-ext-900.woff2
    )format("woff2");
  font-display: swap
}

*,:after,:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: var(--flh)!important;
    outline: none
}

html {
    color-scheme: light dark;
    box-sizing: border-box;
    height: 100%;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 6.5em;
    hanging-punctuation: first
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    background: var(--ui-bg);
    color: var(--txt);
    font-family: 'Roboto (local)', sans-serif;
    display: grid; 
    grid-template-columns: 
    [full-start] auto
    [left-start] minmax(0, calc(var(--cont-w) / 2 - calc(var(--n-2xl) / 2)))
    [left-end right-start] minmax(0, calc(var(--cont-w) / 2 - calc(var(--n-2xl) / 2)))
    [right-end] auto
    [full-end];
    grid-template-rows: auto 1fr auto;
    column-gap:var(--n-2xl);
    min-height:100%;
    
    &.no-scroll {overflow: hidden}
}

::-webkit-scrollbar {width: var(--n-l)}
::-webkit-scrollbar-track {background: var(--ui-bg)}

::-webkit-scrollbar-thumb {
    background: var(--ntl-600);
    border-radius: var(--br-xl);
    border: .1875em solid var(--ui-bg)
}

ol{
    padding-left: var(--n-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--n-s)
}

#brx-header, #brx-footer, #brx-content, .brxe-section, .top-bar {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: full;
    align-items: start;

    & > * {grid-column: var(--cont-lyt)}
}

[class*=brxe-] {max-width: 100%}
.brxe-block {width: 100%}
#brx-content {margin: var(--n-2xl) 0 min(15vw, var(--n-6xl)) 0}

@media (width < 40em) {
  #brx-content {margin-top: var(--n-4xl)}
}