:root {
    --ebnf-body-bg-color: #fafafa;
    --ebnf-special-color: orangered;
    --ebnf-toolbar-height: 65px;
}

@font-face {
    font-family: 'stdfont';
    src: url('../fonts/tgl.31034-1-normal.ttf') format('truetype');
}

@font-face {
    font-family: 'codefont';
    src: url('../fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
}

body {
    font-family: stdfont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5; 
    background: var(--ebnf-body-bg-color);
    color: var(--bs-secondary);
    padding-left: 100px;
    padding-right: 100px;
}

.navbar-brand {
    font-family: 'stdfont';
    font-size: 28px;
}

div#content {
    margin-top: var(--ebnf-toolbar-height);
}

a {
    text-decoration: none;
    color: inherit;
}
a:hover {
    text-decoration: none;
    color: var(--bs-primary)
}
.no-hover *:hover {
    cursor: default;
}

textarea#grammar {
    width: 100%; height: 20em;
    border: 1px solid gray;
    font-family: codefont, "Lucida Console", fixed, monospace;
    font-size: 14px;
}
textarea#input {
    width: 100%; height: 10em;
    border: 1px solid gray;
    font-family: codefont, "Lucida Console", fixed, monospace;
    font-size: 14px;
}
pre {
    font-family: codefont, "Lucida Console", fixed, monospace;
    font-size: 14px;
}
pre.valid {
    color: green;
}
pre.invalid {
    color: var(--ebnf-special-color);
}