body	{
	font-family: "segoe ui light", arial, sans-serif;
	margin: 0;
	padding: 0;
        
}
body .web{
	width: 450px;
	height: 600px;
	background-color: lightgrey;
	background-image: url(img/kalkulatorcat.jpg);
	position: relative;
	margin: 0 auto;
	padding: 0;
}



#heading {
	background-color: none;
	padding-top: 10px;
}
#heading h1 {
	font-family: "arial", tahoma sans-serif;
	font-size: 30px;
	color: white;
	text-align: center;
	
}
#konten {
	background-color: none;
}
#konten table {
	font-size: 24px;
	background-color: white;
	opacity: 0.8;
	position: relative;
}
#konten table input[type="number"] {
	font-size: 24px;
	font-family: "arial", tahoma, sans-serif;
	width: 160px;

}
#konten table button {
	font-size: 24px;
	font-family: "arial", tahoma sans-serif;
}
button.button:hover{
        color: white;
        background-color: grey;               
}

#konten .hasil {
	font-family: "arial", tahoma sans-serif;
}
.peringatan {
	color: red;
	font-family: "arial", tahoma sans-serif;
}
#footer {
	background-color: none;
	color: white;
	text-align: center;
}
#footer p a{
	text-decoration: none;
	color: white;
}
@media	(min-width: 320px) and (max-width: 720px){
	body .web	{
		width: 100%;
	}
	#heading h1 {
		font-size: 26px;
	}
	#konten table {
		font-size: 19px;
	}
	#konten table input[type="number"] {
	font-size: 20px;
	width: 130px;
	}
	}
	#konten table button {
	font-size: 20px;
	}

}
@media (max-width: 1024px){
	body .web	{
		width: 100%;
		background-repeat: no-repeat;

	}
}