/* CSS Variables */
:root {
	--dark: #05152E;
	--darker: #1F2937;
	--darkest: #001E3C;
	--grey: #6B7280;
	--violet: #8b3dbe;
	--purple: #9466b3;
	--light: #FFFFFF;
	--strokeCheckerColor: red; /* Default color for checker on images */
}

* {
	box-sizing: border-box;
	font-family: "Fira sans", sans-serif;
}

body{
	background-color: var(--dark);
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	color: var(--light);
}

/* It forces the backdrop to cover the entire page because the 100vw and 100vh is calculated not considering the zoom */
.modal-backdrop {
	width: 100%;
	height: 100%;
}

.modal-xs div.modal-content{
	margin:auto;
	width: 100px;
}

.navbar{
	background-color: var(--dark);
}

header {
	width: 100%;
}

main {
	flex: 1 1 0%;
	width: 100%;
}

h1 {
	font-size: 2.5rem;
	font-weight: 300;
	color: var(--light);
	margin-bottom: 1rem;
	text-align: center;
}

input,
li button {
	appearance: none;
	border: none;
	outline: none;
	background: none;
}

a{
	text-decoration: none;
	color: #4965a3;
}

a.hotlinkUnsplash{
	color: var(--light);
	background-color: var(--purple);
	border: 1px solid var(--violet);
	text-decoration: none;
	padding: 0 10px;
	font-weight: bold;
	border-radius: 8px;
	position: absolute;
	display: block;
}

.headerDialog{
	background-color: var(--darkest);
	color: var(--light);
}