/* FONTS */
body {
    /* Default Sans-Serif system font stack */
    font-family: -apple-system, BlinkMacSystemFont, Noto, Noto Sans, Roboto, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, helvetica, arial, sans-serif;
    /* Formatting for main container */
    max-width: 70em;
    margin: 0 auto;
    padding: 10px;
}
/* Limelight font face */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Limelight';
  font-style: normal;
  font-weight: 400;
  src: url('./limelight-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.title {
    text-align: center;
    font-size: 2em;
    font-family: "Limelight", sans-serif;
}
.display {
    font-family: "FreeSerif", "Times New Roman", serif;
}
/* BAR */
.bar {
    display: flex;
    flex-direction: row;
    margin: 0 0 1em 0;
}
.bar input {
    box-sizing: border-box;
    padding: 0.5em;
    font-size: 1.5em;
    border-radius: 0.5em;
    border: none;
    box-shadow: 0 0 5em gray;
}
.bar-button {
    margin-left: 0.25em;
    align-self: flex-end;
    flex-grow: 0;
}
#info-button {
    min-width: 3em; /* So it doesn’t change size when changing text content */
}
.search-bar {
    width: 0;
    flex-grow: 1;
    background-color: #e9e9ed;
}
/* OPTIONS */
.options {
    display: flex;
    justify-content: space-evenly;
}
#finales {
    width: 6em;
    height: 1em;
}
/* RESULTS */
.result, .info {
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 1em;
    box-shadow: 0 0 5em gray;
}
.result .pronunciation {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 -0.5em 0;
}
.result .lemma {
    font-size: 5em;
    font-weight: bolder;
    margin: 0;
}
.result .cat {
    margin-top: -0.2em;
    font-weight: bold;
}
.result > p {
    margin: 0.2em auto 0.2em auto;
}
/* COLORES */
.a { color: gold; } /* #8A7500 for accessibility */
.ar { color: orange; } /* #A36A00 for accessibility*/
.e { color: firebrick; }
.é {color: firebrick}
.er { color: crimson; }
.i { color: royalblue }
.ir { color: deepskyblue; } /* #007EA8 for accessibility */
.o { color: darkslateblue; }
.u { color: indigo; }
.optional { opacity: 0.1 }

/* TODO
 * Make Info and GitHub buttons comply with Google Lighthouse (24px?)
 * Add option to change colors for accessibility
 * Fix padding around paragraphs in boxes, especially for info boxes (should top and bottom be less?)
 * Add Regul de Stief property and checkbox (how?)
 * Add advanced searching features (^ and $ and _ and filtering by properties e.g. categorie:verbe)
 * Prioritize exact match
 */