/* Remove margings and paddings, stretch to 100% */
html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: var(--primary-background);
}
/* Set default font */
* {
	color: var(--primary-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
/* Recolor icons with theme setting */
.dark .icon {
	-webkit-filter: invert(100%); /* Safari/Chrome */
	filter: invert(100%);
}
/* Decorate anchor tags */
a {
	color: --primary-color;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/* Decorate label classes */
label {
	display: block;
}
/* Style inputs, buttons, selects, textareas  */
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: #333;
	background-color: #f4f4f4;
	outline: none;
}
button:disabled {
	color: #999;
}
button:not(:disabled):active {
	background-color: #ddd;
}
button:focus {
	border-color: #666;
}
/* spinner */
.spin {
	-webkit-animation:spin 4s linear infinite;
	-moz-animation:spin 4s linear infinite;
	animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* headers */
h1, h2 {
	font-stretch: expanded;
}
/* Set css color variables */
:root {
	--primary-color: #fff;
	--secondary-color: #ccc;
	--primary-background: #222;
	--secondary-background: #333;
}
:root.light {
	--primary-background: #eceff1;
	--secondary-background: #f7f7f7;
	--primary-color: #000 ;
	--secondary-color: #9a9a9a;
}
/* Error messages */
.error {
	background-color: red;
	color: white;
	border-radius: 10px;
	padding: 10px;
}
.error a {
	color: white;
	font-weight: bold;
	text-decoration: underline;
}
/* Tags */
.tag {
	font-weight: bold;
	background-color: var(--secondary-background);
	border-radius: 10px;
	padding: 0.5rem;
}