body
{
	background-color: #111;
	margin: 0;
}

@media screen and (width >= 540px)
{
	.ball
	{
		width: 500px;
		height: 500px;
		background-size: 500px, 500px;
		border-radius: 250px;
	}
	
	input
	{
		width: 450px;
		font-size: 24px;
	}
	
	.answer
	{
		font-size: 36px;
	}
}

@media screen and (width < 540px)
{
	.ball
	{
		width: 250px;
		height: 250px;
		background-size: 250px, 250px;
		border-radius: 125px;
	}
	
	input
	{
		width: 225px;
		font-size: 12px;
	}
	
	.answer
	{
		font-size: 18px;
	}
}

.ball
{
	background-color: #888;
	background-image: url("ball.png");
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
}

.answer
{
	color: white;
	user-select: none;
}

input
{
	margin: 20px auto;
	display: block;
	border-radius: 12px;
	background-color: #222;
	padding: 6px 12px;
	border-color: #777;
	color: white;
}