/* Brai Zsym Zmth | BRAILLE + SYMBOLS 2  Straight 400 */
/*
@font-face {
  font-display: swap; 
  font-family: 'Noto Sans Symbols 2';
  font-style: normal;
  font-weight: 400;
  src: url('noto-sans-symbols-2-v23-braille_math_mayan-numerals_symbols-regular.woff2') format('woff2'); 
  size-adjust: 100%;
}
*/

/* Brai | QUIVIRA normal 400 */
@font-face {
  font-display: swap; 
  font-family: 'Quivira';
  font-style: normal;
  font-weight: 400;
  src: url('Brai-quivira-subset-400-regular.woff2') format('woff2'); 
  unicode-range: U+2800-28FF;
  size-adjust: 120%;
}

/* Brai | ODT2BRAILLE-8DOT normal 400 */
@font-face {
  font-display: swap; 
  font-family: 'odt2braille';
  font-style: normal;
  font-weight: 400;
  src:  url('subset-odt2braille-8dot.woff2') format('woff2'); 
  unicode-range: U+2800-28FF; 
  size-adjust: 200%;
}

:root { 
    margin: 0; 
    padding: 0; 
    font-size: 100%;  
    font-family: 'Quivira'; 
    font-weight: 400; 
    line-height: 1.4;
    letter-spacing: 0; 
    max-width: 29rem; /* = 31 Braille characters for QUIVIRA FONT ONLY; */ 
    text-align: start; 
}

body {
    font-size: 1rem;   
    margin: 0 auto; 
    & * { 
        font: inherit;
        max-width: 100%; 
        margin: 0;
    }
}

body, body * {
    padding: 0; 
    border: none;
    list-style: none;    
    vertical-align: baseline; 
    writing-mode: horizontal-tb; 
    direction: ltr; 
    word-break: keep-all;
    text-decoration: none; 
    scroll-behavior: smooth; 
    text-rendering: optimizeLegibility; 
    font-kerning: normal; 
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;     
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; 
}


address, 
article, 
aside, 
blockquote, 
canvas, 
dd, 
div, 
dl, 
dt, 
fieldset, 
figcaption, 
figure, 
footer, 
form, 
h1, h2, h3, h4, h5, h6, 
header, 
hr, 
li, 
main, 
nav, 
noscript, 
ol, 
p, 
pre, 
section, 
table, 
tfoot, 
ul, 
video, 
xmp { 
    display: block; 
    font: inherit; 
}


a, 
abbr, 
acronym, 
b, 
bdo, 
big, 
br, 
button, 
cite, 
code, 
dfn, 
em, 
i, 
img, 
input, 
kbd, 
label, 
map, 
object, 
output, 
q, 
samp, 
script, 
select, 
small, 
span, 
strong, 
sub, 
sup, 
textarea, 
time, 
tt, 
var { 
    display: inline; 
    font: inherit; 
}

/* <br> not working ATM */
br { 
    all: unset; 
}

br::after { 
    content: "⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀    "; 
    display: inline-block; 
    overflow-x: hidden; 
    white-space: pre; 
}

hr { 
    hidden: hidden; 
    &::before { 
        content: "⠐⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒⠒"; 
        display: block; 
        overflow-x: hidden;
        white-space: pre;
        color: GrayText;
    }
}

hr.pause { 
    hidden: hidden; 
    &::before { 
        content: "⠐⠒⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂"; 
        display: block; 
        overflow-x: hidden;
        white-space: pre;
        color: GrayText;
    }
}


hr.section { 
    hidden: hidden; 
    &::before { 
        content: "⠐⠒⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶"; 
        display: block; 
        overflow-x: hidden;
        white-space: pre;
        color: GrayText; 
    }
}

hr.end { 
    hidden: hidden; 
    &::before { 
        content: "⠐⠒⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿"; 
        display: block; 
        overflow-x: hidden;
        white-space: pre;
        color: GrayText; 
    }
}

:is(hgroup *, h1, h2, h3, h4, h5, h6, caption, figcaption, th, button, header, footer, nav) {
    text-wrap: balance; 
}

h1::before {
  content: "⠸⠹\002800"; 
  display: inline-block; 
  color: GrayText; 
}

h2::before {
  content: "⠸⠹⠸⠹\002800"; 
  display: inline-block; 
  color: GrayText;
}

:is(menu, nav, ol, ul)::after { 
  content: "⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀    "; 
  display: block;
  overflow-x: hidden;
  white-space: pre;
}

:is(i, em, cite) { 
  &.e::before { 
    content: "⠨⠆";
  }
  &.ee::before { 
    content: "⠨⠂";
  }
  &.eee::before { 
    content: "⠨⠶";
  }
  &.eee::after { 
    content: "⠨⠄";
  }
} 

:is(b, strong, em.strong) { 
  &.e::before { 
    content: "⠘⠆";
  }
  &.ee::before { 
    content: "⠘⠂";
  }
  &.eee::before { 
    content: "⠘⠶";
  }
  &.eee::after { 
    content: "⠘⠄";
  }
}

q {
  quotes: "⠘⠦" "⠘⠴" "⠠⠦" "⠠⠴";
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}


p::before { 
  content: "\002800\002800\002800"; 
  display: inline-block;
}

ul > li::before { 
    content: "\002800⠸⠲\002800"; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
}

ul > ul::before { 
  content: "\002800"; 
  margin: 0; 
  padding: 0; 
}