html, body, #root {
  height: 100%;
  overflow: hidden;
}

.App {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
}

.light-theme {
  --font-color-primary: #292929;
  --font-color-secondary: rgb(85, 85, 85);
  --background-color-primary: #fff;
  --background-color-secondary: #eee;
  --border-color-primary: #ddd;
  --background-color-urlbar: #dddddd;
  --accent-background-color: linear-gradient( 90deg, rgba(28, 201, 144, 1) 0%, rgba(39, 223, 119, 1) 48%, rgba(39, 223, 119, 1) 48%);
}

.dark-theme {
  --font-color-primary: #f3f3f3;
  --font-color-secondary: rgb(185, 185, 185);
  --background-color-primary: rgb(54, 54, 54);
  --background-color-secondary: rgb(12, 12, 12);
  --border-color-primary: #bebebe;
  --background-color-urlbar: #2c2c2c;
  --border-color-urlbar: #575757;
  --accent-background-color: linear-gradient( 90deg, rgba(28, 201, 144, 1) 0%, rgba(39, 223, 119, 1) 48%, rgba(39, 223, 119, 1) 48%);
}

button:focus {
  outline: none !important;
}

.native-header {
  color: #fff;
  font-size: large;
  width: 100%;
  font-weight: bold;
}

.text-color-primary {
  color: var(--font-color-primary);
}

.text-color-secondary {
  color: var(--font-color-secondary);
}