@media print {
    body { display: none; }
}
@media screen {
    :root {
    --font-family-code: monospace;
    --font-family-heading: serif;
    --font-family-text: sans-serif;
    --font-size-desc: 0.9rem;
    --background-color-code-block: #8E8E92;
    --background-color-icon: #6C6C70;
    --background-color-input: #D8D8DC;
    --border-radius: 0.25rem;
    --border-radius-button-round: 50%;
    --color-code-block: #F2F2F6;
    --color-link: #1144D4;
    --color-link-overlay: #CF94F8;
    --color-outline: #307BF6;
    --color-text: #000;
    --color-text-overlay: #fff;
    --color-text-button: #EBEBF0;
    --color-name: #727272;
    --color-icon: #727272;
    --color-red1: #9E2D38;
    --color-red2: #AB2426;
    --color-red3: #ED7678;
    --padding-articles-item: 0.75rem;
    --padding-block: 0.5rem;
    --box-shadow-item: 0 0 0.25rem;
    --box-shadow-button: 0 0 0.125rem;
    --box-shadow-inset-block: 0 0 0.5rem inset #0007;
    --margin-item: 0 0 0.5rem;
    --margin-bottom-field: 0.5rem;
    --margin-container: 0;
    --width-max: 100%;
    }
    * { box-sizing: border-box; }
    html, body { display: flex; flex-direction: column; align-items: center; font-family: var(--font-family-text); margin: 0; width: 100%; height: 100%; overflow: hidden; word-wrap: break-word; color: var(--color-text); }
}
@media screen and (orientation: landscape) {
    :root { --width-max: 50%; --margin-container: 0 auto; }
}

::backdrop { backdrop-filter: blur(0.125rem); }
a { text-decoration: none; color: var(--color-link); }
a:hover, a:focus { text-decoration: underline; }
/*button { border: none; border-radius: var(--border-radius); min-width: 4rem; padding: 0.5rem; box-shadow: var(--box-shadow-button); font-size: var(--font-size-label); cursor: pointer; }
*/

details h4 { display: inline; }
details p { padding-left: 1rem; }
details summary { cursor: pointer; }

dialog { border-radius: var(--border-radius);  }
fieldset { width: fit-content; }
figure { margin: 0.25rem auto; font-size: var(--font-size-desc); text-align: center; }
input[type=text], input[type=password]  { border: none; border-radius: var(--border-radius); font-size: 1rem; padding: 0.25rem 0.5rem; background: var(--background-color-input); }
input[type=text]:focus-visible { outline: 0.125rem solid var(--color-outline); }
h1, h2, h3, h4, h5 { font-family: var(--font-family-heading); }
h1 { margin: 1rem 0; text-align: center; }
h3, h5 { font-style: italic; }
hr { margin: 0.5rem 0; }
main { display: flex; flex-direction: column; padding: 0.5rem 1rem 1rem; width: var(--width-max); }
main a { color: var(--color-red2); }
pre { background: var(--background-color-input); border-radius: var(--border-radius); padding: 1rem; overflow: scroll; }

summary h2 { display: inline; margin-bottom: 0; }

header { display: flex; flex-direction: column; width: var(--width-max); }
.top { display: flex; flex-direction: column; width: var(--width-max); position: absolute; padding: 1rem; color: var(--color-text-overlay); }
nav a { color: var(--color-red3); }

.container { display: flex; flex-direction: column; margin: var(--margin-container); padding: 0.5rem 1rem 1rem; width: var(--width-max); }
.fixed-size { flex: 0 0 auto; }
.flex-size { flex: 1 1 auto; }
.main-content { display: flex; flex-direction: column; overflow: hidden; }

.desc { font-size: var(--font-size-desc); }

.articles { list-style: none; margin: 0; padding: 0; }
.articles .item { display: block; padding: var(--padding-articles-item); border-radius: var(--border-radius); box-shadow: var(--box-shadow-item); }
.articles li:not(:last-child) { margin: 0.5rem 0; }
.articles .item .header { margin-bottom: 0.5rem; }
.articles .item p { margin: 0.25rem 0; }

.details-content { margin-top: 0; }

.authors { margin-top: 0; }
#authors-heading { margin-bottom: 0; }
.author { display: flex; align-items: center; }
.author .name { padding-left: 0.25rem; font-size: var(--font-size-label); text-decoration: underline; }
.author .avatar { width: 2rem; height: 2rem; border-radius: 50%; }
.paragraph { text-indent: 2rem; }
.article .tags { margin: 0.5rem 0 0; font-size: var(--font-size-label); }

.breadcrumbs { list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-block; }
.breadcrumbs li:not(:last-child)::after { display: inline-block; margin: 0 0.25rem; content: "⇨" }

.breadcrumbs2 { display: flex; }
.breadcrumbs2 .separator { margin: 0 0.25rem; }

.info-button { color: var(--color-link); cursor: pointer; }
.info-button {  }

.button-groups { margin-top: 0.5rem; text-align: right; }

.article-title-desc { }

.references .item { padding-left: 2rem; text-indent: -2rem; }

form .field { margin-bottom: var(--margin-bottom-field); }

#banner { width: 100%; min-height: 18vh; background: #9E2D38; display: flex; justify-content: center; box-shadow: var(--box-shadow-item); }
#banner .youtube-player { border: 0; flex-grow: 1; min-width: 32rem; min-height: 18rem; }

.lv0-list { padding: 0; list-style: none; }
.lv0-list > li:not(first-child) { margin-top: 1rem; }
.lv0-list > li > section { margin-left: 1rem; }
.lv0-list > li > section > ul { margin: 0 0 0 2rem; padding-left: 0; }

.play-button { cursor: pointer; }

.examples li:not(:last-child) { margin-bottom: 1rem; }

.action-group { margin: 1rem 0; }
.text-input { min-width: 50vw; font-size: 1rem; border: 0; border-radius: var(--border-radius); padding: 0.25rem 0.5rem; background: var(--background-color-input); }

#search-box { margin: 0 auto; width: fit-content; padding-top: 0.5rem; }

#search-result { overflow: scroll; margin-top: 0.25rem; }
#search-result details, p  { margin: 0.5rem 0 1rem; }
#search-result details h4 { margin: 1rem 0 0; padding-left: 1rem; }
#search-result details summary { display: block; }
#search-result h2 { margin: 1rem 0 0; }
#search-result h3, h4 { margin: 1rem 0 0.5rem; }
#search-result .lastUpdated { margin-bottom: 0.5rem; font-style: italic; font-size: small; }
#search-result .pronunciation { margin: 0.25rem 0; }
#search-result .abbreviation { margin: 0.25rem 0; }
#search-result .plural { margin: 0.25rem 0; }
#search-result .vietnamese { margin: 0.25rem 0; }
#search-result .synonyms { margin: 0.25rem 0; }
#search-result .usage { font-style: italic; }
#search-result .usages > li:not(:first-child) { margin-top: 0.5rem; }

#last-updated-list { max-height: 25%; min-height: 12.5%; overflow: scroll; box-shadow: var(--box-shadow-inset-block); border-radius: var(--border-radius); padding: var(--padding-block);}
#last-updated-list h2 { margin: 0 0 0.5rem; }
#last-updated-list ul { margin: 0; padding-left: 1.5rem; }

.topics { font-style: normal; }
.example-imgs { display: flex; flex-direction: column; }
.example-imgs figure { margin: 0 auto 1rem; }
.example-img { width: 20rem; height: 11.25rem; border-radius: var(--border-radius); }
.vert { width: 11.25rem; height: 20rem; }
.square { width: 20rem; height: 20rem; }
.s11 { width: 20rem; height: 20rem; }
.s12 { width: 10rem; height: 20rem; }
.s13 { width: 6.67rem; height: 20rem; }
.s14 { width: 5rem; height: 20rem; }
.s15 { width: 4rem; height: 20rem; }
.s21 { width: 20rem; height: 10rem; }
.s23 { width: 13.33rem; height: 20rem; }
.s25 { width: 8rem; height: 20rem; }
.s31 { width: 20rem; height: 6.67rem; }
.s32 { width: 20rem; height: 13.33rem; }
.s34 { width: 15rem; height: 20rem; }
.s35 { width: 12rem; height: 20rem; }
.s41 { width: 20rem; height: 5rem; }
.s43 { width: 20rem; height: 15rem; }
.s45 { width: 16rem; height: 20rem; }
.s51 { width: 20rem; height: 4rem; }
.s52 { width: 20rem; height: 8rem; }
.s53 { width: 20rem; height: 12rem; }
.s54 { width: 20rem; height: 16rem; }

.link { color: var(--color-link); }
.code-block { margin: 0.5rem 1rem 1rem; padding: 1rem; border-radius: var(--border-radius); background: var(--background-color-code-block); font-family: var(--font-family-code); color: var(--color-code-block); }