body
{
	font-family: 'Kanit', sans-serif;
	font-weight: 400;
	padding: 5% 5% 5% 5%;
}

/*small viewport*/
@media (min-width: 200px)
{
	body
	{
		padding: 5% 5% 5% 5%;
	}

	.specsInputBarTier
	{
		width: 90%;
	}

	.tierSpecializationDiv
	{
		padding: 1% 1% 1% 1%;
		border-style: solid;
		border-radius: 10px;
	}

	.focusPointsDiv
	{
		padding: 1% 1% 1% 3%;
		border-style: solid;
		border-radius: 10px;
		margin: 10% auto auto auto;
	}
}

/*medium viewport*/
@media (min-width: 700px)
{
	body
	{
		padding: 5% 10% 5% 10%;
	}

	.specsInputBarTier
	{
		width: 90%;
	}

	.tierSpecializationDiv
	{
		padding: 1% 1% 1% 1%;
		border-style: solid;
		border-radius: 10px;
		width: 90%;
		margin: auto;
	}

	.focusPointsDiv
	{
		padding: 1% 1% 1% 3%;
		border-style: solid;
		border-radius: 10px;
		width: 90%;
		margin: 5% auto auto auto;
	}
}

/*large viewport*/
@media (min-width: 1500px)
{
	.specsInputBarTier
	{
		width: 85%;
	}

	.tierSpecializationDiv
	{
		padding: 1% 1% 1% 1%;
		border-style: solid;
		border-radius: 10px;
		width: 35%;
		margin: auto;
	}

	.focusPointsDiv
	{
		padding: 1% 1% 1% 3%;
		border-style: solid;
		border-radius: 10px;
		width: 35%;
		margin: 5% auto auto auto;
	}
}