:root {
  --color-canvas-default: #0d1117;
  --color-border-default: #30363d;
  --color-header-search-bg: #0d1117;
  --color-header-search-border: #30363d;
  --color-scale-white: #f0f6fc;

  --color-accent-emphasis: #1f6feb;
  --color-primer-shadow-focus: #0c2d6b;

  --color-accent-fg: #58a6ff;
}

@media all {
  body {
    background-color: var(--color-canvas-default);
    color: #c9d1d9;
    margin: 0;
  }

  body .root-main {
    display: flex;
    justify-content: center;

    padding: 16px;
    overflow: auto;
  }

  * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .box {
    display: flex;

    background-color: var(--color-canvas-default);
    border-color: var(--color-border-default);
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;

    padding: 16px;
  }

  .header-link {
    text-decoration: none;
    background-color: transparent;
    color: #f0f6fc;

    cursor: pointer;
  }

  .header-link:hover {
    color: rgba(240, 246, 252, 0.7);
  }

  .header-item {
    display: flex;

    margin-right: 16px;
    align-self: stretch;
    align-items: center;
    flex-wrap: nowrap;

    user-select: none;
  }

  .border-top {
    border-top: 1px solid var(--color-border-default);
  }
}

/* Larger screen */
@media (min-width: calc(1200px - (16px * 2))) {
  body .root-main {
    padding: 16px calc(16px + 200px);
  }
}