:root { --headerHeight: 50px; --contentWidth: 1024px; --colorPrimary: #ffd600; --colorPrimaryLight: #ffff52; --colorPrimaryDark: #c7a500; --colorSecondary: #aeea00; --colorSecondaryLight: #e4ff54; --colorSecondaryDark: #0075f6; --colorGrayDark: #dddedd; --colorGrayLight: #f3f3f5; --colorBlack: #282c33;}@media (max-width: 1024px) { :root { --contentWidth: 100%; }}
html { font-size: 16px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;}code { font-family: Menlo, Monaco, serif;}a,a:active { text-decoration: none; color: inherit;}a { color: var(--colorSecondaryDark);}b { font-weight: bold;}
.mobileOnly { display: none;}@media (max-width: 1024px) { .mobileOnly { display: block; }}
.header { width: 100%; position: sticky; z-index: 1; top: 0; background-color: var(--colorPrimary);}
.inner { width: var(--contentWidth); height: var(--headerHeight); display: flex; align-items: center; padding: 0 10px; box-sizing: border-box; margin: auto;}
@media(max-width:1024px) { .inner { height: auto; display: block; }}
.headerLink { color: black; font-size: 16px; font-weight: bold;}.brandWrap { height: var(--headerHeight); display: flex; justify-content: center; align-items: center;}@media (max-width: 1024px) { .brandWrap { display: grid; grid-template-columns: 50px 1fr 50px; }}.brand { font-size: 22px !important; text-align: center;}
.navButton { text-align: right;}
.headerItemList { height: var(--headerHeight); flex: 1; display: flex; align-items: center; padding-left: 15px;}@media (max-width: 1024px) { .headerItemList { justify-content: space-evenly; padding-left: 0; }}.headerItem { padding-left: 15px; /* width: auto; */ /* height: 100%; */ flex-shrink: 0; /* display: flex; align-items: center; */ position: relative;}.headerItem:first-child { padding-left: 0;}
.headerSublist { position: absolute; display: none; top: 40px; left: 0; width: 200px; border: 1px solid #ccc; background-color: white; padding: 10px; border-radius: 4px; z-index: 1}
.headerSublist li { padding: 5px 0;}.headerSublist li > a { color: black;}.headerSublist li > a:hover { color: var(--colorSecondary);}
.spacer { flex: 1;}
h1 { font-size: 25px; font-weight: bold; padding: 20px 0;}h2 { font-size: 20px; font-weight: bold; padding: 20px 0 10px 0; /* margin-top: 10px; */}h3 { font-size: 18px; font-weight: bold; padding: 10px 0 10px 0;}code { font-size: 1em; line-height: 1.1em;}body { background-color:var(--colorGrayLight);}.root { width: 100%;}.content { width: var(--contentWidth); min-height: calc(100vh - 50px); position: relative; display: grid; grid-template-columns: 240px 1fr; margin: auto; /*padding-top: 50px;*/}@media (max-width:1024px) { .content { display: block; }}.v1 { background-color: rgba(255,255,255,0.75); height: 30px; display: flex; justify-content: center; align-items: center;}
.indexHead { background-color: var(--colorBlack);}.indexHeadInner { width: var(--contentWidth); position: relative; margin: auto; padding: 30px 0; text-align: center;}.indexHead h1 { font-size: 45px; color: var(--colorPrimary);}.indexHead .subTitle { color: white; font-size: 24px; padding-bottom: 15px;}.indexHead .subButtons { padding: 15px 0; display: flex; justify-content: center;}
.indexHead .startButton { background-color: var(--colorSecondary); color: black; font-weight: bold; height: 44px; width: 120px; display: flex; justify-content: center; align-items: center; border-radius: 4px;}.indexHead .startButton:active { background-color: white; color: var(--colorSecondary);}.index { width: var(--contentWidth); margin: 0 auto; background: white;}
.index section { padding: 0 15px 0 15px; text-align: center; margin: auto;}
.codeComparison { display: grid; grid-template-columns: 490px 490px; column-gap: 15px;}
@media (max-width: 1024px) { .codeComparison { grid-template-columns: 100%; }}
/*Article*/.article { padding: 15px; box-sizing: border-box; background-color: white;}.article section { /*padding-top: 50px;*/}p { margin-bottom: 15px; line-height: 1.7;}.article code.q { padding: 0 5px; background-color: var(--colorGrayLight);}.article a { text-decoration: underline;}.article ul { padding-left: 15px;}.article li { list-style: inside; padding: 5px 0;}.article section h2 { position: sticky; top: 50px; background-color: white;}.article blockquote { background-color: var(--colorGrayLight); padding: 15px 0; text-align: center; width: 100%; box-sizing: border-box; margin: 15px 0; font-size: 22px; font-family: "Times New Roman", serif;}.sidebar { position: sticky; background-color:ehite; width: 240px; height: calc(100vh - 50px); top: 50px;}.sidebarInner { padding: 15px;}
@media (max-width: 1024px) { .sidebar { top: 0; left: 0; height: 100%; background-color: var(--colorGrayLight); position: fixed; visibility: hidden; z-index: 1; }}
.heading p { color: #9daab6; margin-bottom: 15px;}.sidebarSection { margin: 10px 0;}.sidebarSectionTitle { font-weight: bold; font-size: 22px; margin: 10px 0;}.sidebarSectionInner { padding-left: 15px;}.sidebarLink { padding: 5px 0;}.codeLink { padding: 5px 0; display: flex; align-items: center; justify-content: center;}.codeWindowHeader { background-color: #f6f6f6; height: 40px; display: grid; grid-template-columns: 100px 1fr 100px; padding: 0 10px; box-sizing: border-box; justify-content: flex-start; border-top-left-radius: 8px; border-top-right-radius: 8px;}.codeWindowButtonWrapper { display: flex; align-items: center;}.codeWindowButton { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px;}.codeWindowRedButton { background-color: #ea6459;}.codeWindowYellowButton { background-color: #e0c04c;}.codeWindowGreenButton { background-color: #72bf46;}.codeWrapper { margin-top: 0 !important; white-space: pre-wrap; word-wrap: break-word; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
@media (max-width: 1024px) { .article { position: static; margin-left: 0; }}.footer { text-align: center; background-color: var(--colorBlack); padding: 15px 0; color: white; width: 100%;}