/** Colors and variables **/
:root {
  color-scheme: light dark;
  
  --g-background-color: #f2f1f4;
  --g-content-background-color: #fcfcfa;
  --g-font-color: #121314;
  --g-font-size: 16px;
  --g-font-weight: 400;
  --g-line-height: 22px;
  
  --h-font-size: 24px;
  --h-font-weight: 700;
  --h-line-height: 32px;
  --h1-color: #e7034a;
  --h2-color: #db9507;
  
  --link-font-color: #1d6dff;
  --link-font-color-hover: #1051c9;
  
  --code-background-color: rgb(9 40 241 / 16%);
  --kbd-background-color: #e7e9ed;
  --kbd-border-color: #9da3ae;
  
  --nav-hover-background-color: rgb(24 24 24 / 16%);
  --nav-active-background-color: rgb(24 24 24 / 85%);
  --sidebar-version-color: rgb(0 0 0 / 40%);
  
  --odd-background-color: rgb(200 200 200 / 12%);
  --even-background-color: rgb(0 0 0 / 16%);
  
  --notice-background-color: rgb(245 126 56 / 30%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-background-color: #0c0d0e;
    --g-content-background-color: #252931;
    --g-font-color: #e1e5e8;
    
    --h1-color: #e31a51;
    --h2-color: #ecc234;
    
    --link-font-color: #4989ff;
    --link-font-color-hover: #2d63c4;
  
    --code-background-color: rgb(135 95 208 / 34%);
    --kbd-background-color: #575d65;
    --kbd-border-color: #7c7f88;
    
    --nav-hover-background-color: rgb(255 255 255 / 16%);
    --nav-active-background-color: rgb(255 255 255 / 85%);
    --sidebar-version-color: rgb(255 255 255 / 25%);
  
    --odd-background-color: rgb(255 255 255 / 12%);
    --even-background-color: rgb(0 0 0 / 12%);
    
    --notice-background-color: rgb(245 126 56 / 25%);
  }
}

/** General styling **/

body {
  background: var(--g-background-color);
  color: var(--g-font-color);
  font-family: 'Roboto', sans-serif;
  font-size: var(--g-font-size);
  font-weight: var(--g-font-weight);
  line-height: var(--g-line-height);
  min-width: 380px;
}

a {
  color: var(--link-font-color);
  font-weight: 700;
  text-decoration: none;
}
a:hover {
  color: var(--link-font-color-hover);
}

h1 {
  font-size: 32px;
  line-height: 40px;
}

li {
  margin: 0.25em 0;
}

em {
  font-weight: 500;
}

/** Main layout **/

.main {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 24px 24px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 240px;
}

.sidebar-logo {
  background-image: url("../logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 500 / 240;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
}

.sidebar-version {
  color: var(--sidebar-version-color);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.navigation {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.navigation-item {
  padding: 6px 8px 6px 24px;
  text-align: right;
}
.navigation-item:hover {
  background-color: var(--nav-hover-background-color);
  color: var(--link-font-color);
}
.navigation-item.active {
  background-color: var(--nav-active-background-color);
  color: var(--g-background-color);
}

.content {
  background-color: var(--g-content-background-color);
  padding: 24px 32px;
  max-width: 900px;
  width: calc(100% - 64px);
}

/** Compact adjustments **/

@media (max-width: 760px) {
  .main {
    flex-direction: column;
  }
  
  .sidebar {
    max-width: 100%;
  }
  
  .navigation-item {
    padding: 8px 16px;
    text-align: center;
  }
}

@media (max-width: 540px) {
  .main {
    padding: 12px 4px;
  }
  
  .content {
    padding: 12px 20px;
    width: calc(100% - 40px);
  }
}


/** Page content **/

.content > h1 {
  color: var(--h1-color);
}
.content > h2 {
  border-bottom: 1px solid var(--g-font-color);
  color: var(--h2-color);
  margin-top: 1.75em;
  margin-bottom: 1em;
  padding-bottom: 12px;
}
.content > h3 {
  margin-top: 1.3em;
  margin-bottom: 0.825em;
}
.content > h4 {
  margin-top: 1.125em;
  margin-bottom: 0.675em;
}

.content > p {
  margin-top: 0.825em;
  margin-bottom: 0.825em;
}
.content > p code {
  background-color: var(--code-background-color);
  border-radius: 2px 2px;
  padding: 0 4px;
}

.content > table {
  margin-bottom: 1.25em;
  width: 100%;
}
.content > table th {
  border-bottom: 2px solid var(--g-font-color);
  padding: 6px 12px;
}
.content > table td {
  padding: 6px 10px;
}
.content > table > tbody > tr:nth-child(2n + 1) {
  background-color: var(--odd-background-color);
}
.content > table > tbody > tr:nth-child(2n) {
  background-color: var(--even-background-color);
}

.content kbd {
  background-color: var(--kbd-background-color);
  border: 1px solid var(--kbd-border-color);
  border-bottom-width: 2px;
  border-radius: 3px 3px;
  font-size: 95%;
  font-weight: 600;
  padding: 1px 6px;
}

.content img {
  display: block;
  margin: 0 auto;
  max-width: 75%;
}

@media (max-width: 540px) {
  .content img {
    max-width: 90%;
  }
}


/** Page elements **/

.warning {
  background-color: var(--notice-background-color);
  padding: 10px 16px;
}
.warning:before {
  content: "⚠️";
  display: inline-block;
  vertical-align: text-bottom;
  padding-right: 4px;
}

.caption {
  display: block;
  font-style: italic;
  font-size: 95%;
  font-weight: 300;
  opacity: 0.9;
  margin: 0 auto;
  padding: 4px 12px;
  text-align: center;
  max-width: 75%;
}