:root {
  --textColor: #333;
  --inputFocusBorder: #35b5f4 !important;
  --headerBackground: #eee;
  --webHeaderHeight: 3rem;
  --searchBorder: #ccc;
  --searchInputBorder: #ccc;
  --searchActionBorder: #ccc;
  --searchActionHoverBackground: #ccc;
  --contentBackground: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --textColor: #ccc;
    --headerColor: #999;
    --headerBackground: #1c1c1c;
    --searchBorder: black;
    --searchInputColor: white;
    --searchInputBorder: black;
    --contentBackground: #33373a;
    --searchActionBorder: black;
    --searchActionHoverBackground: #333;
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font: 14px/1.4 -apple-system,
    BlinkMacSystemFont,
    "San Francisco",
    "Segoe UI",
    Roboto,
    Ubuntu,
    "Helvetica Neue",
    Arial,
    sans-serif;
  color: var(--textColor);
  background-color: var(--contentBackground);
}

* {
  box-sizing: border-box;
}

.webview {
  height: 100%;
  width: 100%;
  border: none;
}

.webview:focus {
  outline: none;
}

.header {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--headerColor);
  background-color: var(--headerBackground);
  -webkit-app-region: drag;
  user-select: none;
}

.header .app-title {
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

.is-darwin .header {
  display: flex;
}

.is-darwin .webview {
  height: calc(100% - 24px);
}
