body { font-family: -apple-system, "Helvetica Neue", Helvatica, Verdana, Arial, "Source-Han-Sans-SC", "Heiti SC", Heiti, sans; font-size: 16px; color: #222831; background-color: #ffffff; }
@media (prefers-color-scheme: dark) { body { color: #E3E7EF; background-color: #222222; } }

section { max-width: 1440px; margin: 0 auto; }
section .section-container { margin: 0 20px; }
section .section-container .section-header { display: flex; justify-content: space-between; border-left: 10px solid #222831; padding-left: 10px; margin-left: -20px; padding-top: 6px; padding-bottom: 6px; }
section .section-container .section-header h1, section .section-container .section-header ul { margin: 0; }
@media (prefers-color-scheme: dark) { section .section-container .section-header { border-left-color: #E3E7EF; } }
section .section-container h2 { font-size: 0.75rem; font-family: -apple-system, "Helvetica Neue", Helvatica, Verdana, Arial, "Source-Han-Sans-SC", "Heiti SC", Heiti, sans; font-weight: normal; text-transform: uppercase; margin: 36px 0 0 0; color: #595E66; }
@media (prefers-color-scheme: dark) { section .section-container h2 { color: #92979F; } }
section .locale-button { border: 2px solid #595E66; color: #595E66; padding: 2px 5px; border-radius: 7px; font-size: 14px; font-weight: bold; }
@media (prefers-color-scheme: dark) { section .locale-button { border-color: #92979F; color: #92979F; } }
section .locale-button:hover { border: 2px solid #222831; color: #222831; }
@media (prefers-color-scheme: dark) { section .locale-button:hover { border-color: #E3E7EF; color: #E3E7EF; } }

section#hero { max-width: 2560px; }
section#hero .content { display: flex; flex-direction: row; }
section#hero .content .image { width: 50%; flex-grow: 0; flex-shrink: 0; background-image: url("/assets/about/teng-brandywine-meadows.jpeg"); background-position: center; background-size: cover; height: 100vh; max-height: 150vw; min-height: 560px; }
@media (min-width: 566px) { section#hero .content .image { background-image: url("/assets/about/teng-brandywine-meadows-hd.jpeg"); min-height: 650px; } }
section#hero .content .text { width: 50%; flex-grow: 0; flex-shrink: 0; background-color: #eeeeee; display: flex; flex-direction: column; justify-content: center; }
@media (prefers-color-scheme: dark) { section#hero .content .text { background-color: #3d3d3d; } }
section#hero .content .text .text-content { max-width: 360px; margin-left: 40px; margin-right: 20px; padding-bottom: 40px; }
@media (max-width: 840px) { section#hero .content .text .text-content { margin-left: 20px; padding-bottom: 10px 0; } }
section#hero .content .text .text-content h3 { font-size: 36px; margin: 0.35em 0 0.85em; }
section#hero .content .text .text-content small { font-weight: normal; margin-top: 40px; font-size: 14px; color: #595E66; margin-block-end: 0; }
section#hero .content .text .text-content small a { text-decoration: underline; }
@media (prefers-color-scheme: dark) { section#hero .content .text .text-content small { color: #92979F; } }
section#hero .content .text .text-content p { font-size: 20px; line-height: 1.6em; margin: 1.2em 0; }
section#hero .content .text .text-content p strong { color: #b55400; }
@media (prefers-color-scheme: dark) { section#hero .content .text .text-content p strong { color: #E67B1E; } }
section#hero .content .text .text-content p a { text-decoration: underline; }
section#hero .content .text .text-content p a:hover { color: #b55400; }
@media (prefers-color-scheme: dark) { section#hero .content .text .text-content p a:hover { color: #E67B1E; } }
section#hero .content .text .text-content p i.icon { font-style: normal; }
section#hero .content .text .text-content p i.icon:before { content: ""; background-color: #222831; mask-repeat: no-repeat; mask-position: center; mask-size: contain; width: 1.3em; height: 1.3em; display: inline-block; margin: 0 0.1em -0.35em 0; }
@media (prefers-color-scheme: dark) { section#hero .content .text .text-content p i.icon:before { background-color: #E3E7EF; } }
section#hero .content .text .text-content p i.icon-instagram:before { mask-image: url("/assets/icons/instagram.svg"); }
section#hero .content .text .text-content p i.icon-send-email:before { mask-image: url("/assets/icons/send.svg"); }
section#hero .content .text .text-content p i.icon-terminal:before { mask-image: url("/assets/icons/code.svg"); }
@media (max-width: 768px) { section#hero .content .text .text-content h3 { font-size: 30px; }
  section#hero .content .text .text-content p { font-size: 16px; } }
@media (max-width: 566px) { section#hero .content { flex-direction: column; }
  section#hero .content .image { width: 100%; max-height: 150vw; min-height: 100vw; }
  section#hero .content .text { width: 100%; padding: 20px; box-sizing: border-box; }
  section#hero .content .text .text-content { margin: 0 auto; max-width: 420px; }
  section#hero .content .text .text-content h3 { margin: 0.5em 0 0.5em; } }

section#home-blog .section-container { max-width: 620px; margin: 40px auto; padding: 0 20px; }