/* https://flatuicolors.com/palette/au */
:root {
  --background: #dff9fb;
  --red: #eb4d4b;
  --red-light: #ff7979;
  --christian: #be2edd;
  --country: #6ab04c;
  --christian-light: #e056fd;
  --country-light: #badc58;
  --grey: #95afc0;
}
body {
    margin-top: 0;
    padding-top: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--background);
}
.container {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}
h1 {
    font-size: 3rem;
    text-align: center;
    text-shadow: 0 0.5rem 0.5rem #b2bec3;
}
.col { padding: .5rem; }
.christian { color: var(--christian); }
.country { color: var(--country); }
.grey { color: var(--grey); }
.red { color: var(--red); }
.main { font-weight: bold; }
.mobile { display: initial; }
@media (min-width: 768px) {
    html { font-size: 20px; }
    h1 {
        margin: 1rem;
        font-size: 6rem;
    }
    .flex { display: flex; }
    .col {
        flex: 1;
        padding: 1rem;
    }
    .mobile { display: none; }
}

.choices a {
    display: block;
    max-width: 500px;
    margin: auto;
    padding: 0.5rem;
    border: 0.5rem solid transparent;
    color: #fff;
    background-color: var(--red-light);
    border-radius: 0.5rem;
    text-decoration: none;
}
.choices a:hover { border-color: var(--red); }
.choices a:active { background-color: var(--red); }

nav {
    position: relative;
    text-align: right;
}
#nav-icon {
    display: block;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 900;
    color: var(--grey);
    text-decoration: none;
}
#nav-menu {
    position: absolute;
    top: 3rem;
    right: 1rem;
    display: none;
    font-weight: 500;
    text-align: right;
    background-color: #fff;
    box-shadow: 0 0.25rem .5rem rgba(0, 0, 0, 0.3);
}
#nav-menu.open { display: block; }
#nav-menu a {
    display: block;
    padding: .5rem 2rem;
    border-bottom: 1px solid var(--grey);
    color: var(--red);
    text-decoration: none;
}
#nav-menu a:hover {
    color: #fff;
    background-color: var(--red);
}

#search {
    box-sizing: border-box;
    width: 95%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: .5rem;
    font-size: 1.5rem;
    border: 0;
    border-bottom: .25rem solid var(--grey);
    background-color: transparent;
    border-radius: 0;
}
#search:focus { border-color: var(--red); }
@media (min-width: 768px) {
    #search { max-width: 800px; }
}
#results,
#noresult,
#noteven,
#even,
#table,
.words,
#choices,
#verdict { display: none; }

#results.open,
#noresult.open,
#noteven.open,
#even.open,
#choices.open,
#verdict.open,
.words.open { display: block; }
#table.open { display: flex; }

.stat-header {
  font-size: smaller;
  font-weight: bold;
}
.stat {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
}
.stat small {
    display: block;
    font-size: small;
    font-weight: normal;
}
.words {
  margin-bottom: 1rem;
  font-size: smaller;
  color: rgba(0,0,0,.6);
}
.words .christian { color: var(--christian-light); }
#current-word { color: #000; }