html, body {
	position: relative;
	width: 100%;
	height: 100%;
}
body {
	background: var(--body-color);
	color: var(--text-color);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
	display: flex;
	flex-direction: column;
}
header, main{
	flex: 1 0 auto;
}
footer{
	flex-shrink: 0;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
button{
	font-family: 'Roboto Condensed', sans-serif;
}
.sr-only{
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

@media only screen and (max-width: 568px) {
	body{
		font-size: 16px;
	}
}

@media only screen and (min-width: 1080px) {
	body{
		font-size: 18px;
	}
}

:root{
	--negative: rgba(255,73,73,1);
	--positive: rgba(1,204,3,1);
}

[data-type="default"]{
	color: var(--item-detail-color);
}
[data-type="neutral"]{
	color: var(--text-color);
}
[data-type="positive"]{
	color: var(--positive);
}
[data-type="negative"]{
	color: var(--negative);
}