:root {
    --background-dark: #37342c;
    --background-light: #f4e1ac;
    --content-dark: #ffffff;
    --content-light: #000000;
    --highlight-orange-dark: #ff8f4e;
    --highlight-orange-light: #a13202;
    --highlight-blue-dark: #879efd;
    --highlight-blue-light: #4c65c9;

    --background: var(--background-dark);
    --content: var(--content-dark);
    --highlight-blue: var(--highlight-blue-dark);
    --highlight-orange: var(--highlight-orange-dark);
}
* {
    background-color: var(--background);
    color: var(--content);
    font-family: Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
main {
    margin: auto;
    max-width: 600px;
}
h1 {
    color: var(--highlight-blue);
    font-size: 28px;
}
h2 {
    color: var(--highlight-orange);
    font-size: 24px;
}
a {
    color: var(--highlight-blue);
}
#lightDarkButton {
    position: absolute;
    top: 8px;
    right: 14px;
    z-index: 1;
}
#headingContainer {
    padding: 14px;
}
.lastUpdated {
    color: var(--highlight-orange);
}
#controls {
    position: sticky;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding-left: 14px;
    padding-top: 4px;
    padding-bottom: 8px;
}
#selections, #searchBar {
    display: inline-block;
}
input, button, select {
    border-color: var(--content);
    border-style: solid;
    border-width: 2px;
    border-radius: 6px;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}
#results {
    margin: auto;
    max-width: 600px;
    padding-left: 14px;
    padding-right: 14px;
}
.dictionaryEntry {
    padding-bottom: 10px;
}
.romanisation {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    color: var(--highlight-blue);
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.pronunciation {
    font-size: 14px;
    color: var(--content);
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 4px;
    padding-bottom: 0px;
}
.partOfSpeech {
    font-size: 12px;
    color: var(--highlight-orange);
    margin-top: 0px;
    padding-top: 0px;
}
footer {
    margin-top: 48px;
}
footer > * {
    color: var(--content);
    opacity: 0.7;
    font-size: 12px;
}
.hidden {
    visibility: hidden;
}