[data-theme="dark"] {
	--app-color-dark: #222428;
	--app-color-dark-rgb: 34, 36, 40;
  
	--app-color-light: #f4f5f8;
	--app-color-light-rgb: 244, 245, 248;
	--app-color-light-contrast: var(--app-color-dark);
  
	--app-color-dark-contrast: var(--app-color-light);
}

[data-theme="light"] {
	--app-color-light: #222428;
	--app-color-light-rgb: 34, 36, 40;
  
	--app-color-dark: #f4f5f8;
	--app-color-dark-rgb: 244, 245, 248;
	--app-color-dark-contrast: var(--app-color-light);
  
	--app-color-light-contrast: var(--app-color-dark);
}


html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
  
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
	  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	line-height: 1.618;
	letter-spacing: 0.7px;
  
	overflow-x: hidden;
  
	transition: all 150ms ease-in;
  
	position: relative;
  
	background-color: var(--app-color-dark);
  
	color: var(--app-color-light-contrast);
	box-sizing: border-box;
}

* {
	transition: background 150ms ease-in, background-color 150ms ease-in;
  
	-webkit-tap-highlight-color: transparent;
  
	box-sizing: border-box;
}
  
h1,
h2 {
  margin: 0;

  line-height: 1.618;
  font-family: 'Jetbrains Mono', monospace;
}

h1 {
  font-size: 2.618rem;
}

h2 {
  font-size: 1.618rem;
}

hr {
  height: 0.5px;

  border: none;

  background-color: rgba(var(--app-color-dark-rgb), 0.3);
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: inherit;
	text-decoration: none;
	vertical-align: middle;
	font-family: inherit;
  
	border: 0;
	border-radius: 0;
  
	outline: 0;
  
	margin: 0;
	padding: 0;
  
	display: inline-flex;
	align-items: center;
	justify-content: center;
  
	position: relative;
  
	user-select: none;
	appearance: none;
	cursor: var(--app-cursor-default), auto;
  
	background-color: transparent;
  
	-webkit-tap-highlight-color: transparent;
  }
  button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}