body {
  background: #766C6D;
  font-size: 105%;
  padding: 10px;
}

#utama {
  position: relative;
  background: #CFC3C3;
  width: 90%;
  border:5px;
  border: 3px ridge #956161;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

#utama2 {
  background: #010A6B;
  color: white;
  width: 450px;
  height: 350px;
  margin: -70px 0 0 -120px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
}
p{
    text-align:justify;
}
p .jawab{
  font-size:60%;
}
h1{
  font-size:240%;
  color:#000000;  
  text-align:center;
  text-transform:capitalize;
}
#petunjuk{
  font-size:140%;
  color:#181F88;  
  text-align:center;
}
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #06DCE7, ##03BBFD);
  background-image: -moz-linear-gradient(top, #06DCE7, #03BBFD);
  background-image: -ms-linear-gradient(top, #06DCE7, #03BBFD);
  background-image: -o-linear-gradient(top, #06DCE7, #03BBFD);
  background-image: linear-gradient(to bottom, #06DCE7, #03BBFD);
  -webkit-box-shadow: 0px 1px 3px #14048a;
  -moz-box-shadow: 0px 1px 3px #14048a;
  box-shadow: 0px 1px 3px #14048a;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #fcf23c;
  background-image: -webkit-linear-gradient(top, #fcf23c, #0367FC);
  background-image: -moz-linear-gradient(top, #fcf23c, #0367FC);
  background-image: -ms-linear-gradient(top, #fcf23c, #0367FC);
  background-image: -o-linear-gradient(top, #fcf23c, #0367FC);
  background-image: linear-gradient(to bottom, #fcf23c, #0367FC);
  text-decoration: none;
}
.btn2 {
  background: #3498db;
  -webkit-box-shadow: 0px 1px 3px #14048a;
  -moz-box-shadow: 0px 1px 3px #14048a;
  box-shadow: 0px 1px 3px #14048a;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  width:50px;
  text-decoration: none;
}

.btn2:hover {
  background: #fcf23c;
  background-image: -webkit-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: -moz-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: -ms-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: -o-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: linear-gradient(to bottom, #fcf23c, #fa6f05);
  text-decoration: none;
}
.btn3 {
  background-image: -webkit-linear-gradient(rgba( 208, 226, 120, 1), rgba( 215, 225, 188, 1));
  background-image: linear-gradient(rgba( 208, 226, 120, 1),rgba( 215, 225, 188, 1));
  background-repeat: no-repeat;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
}

.selesai{
  background: #3498db;
  background-image: -webkit-linear-gradient(rgba( 143, 4, 0, 1), rgba( 249, 16, 177, 1));
  background-image: linear-gradient(rgba( 143, 4, 0, 1),rgba( 249, 16, 177, 1));
  -webkit-box-shadow: 0px 1px 3px #14048a;
  -moz-box-shadow: 0px 1px 3px #14048a;
  box-shadow: 0px 1px 3px #14048a;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
    
}
.selesai:hover {
  background: #fcf23c;
  background-image: -webkit-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: -moz-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: -ms-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: -o-linear-gradient(top, #fcf23c, #fa6f05);
  background-image: linear-gradient(to bottom, #fcf23c, #fa6f05);
  text-decoration: none;
}


.menu {
	list-style:none;
	width:45em;
	margin:5px auto 0px 5px;
	height:40px;
	padding:0px 10px 0px 10px;

	/* Rounded Corners */
	
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;

	/* Background color and gradients */
	
	background: #7D219A;

	background: -moz-linear-gradient(top, #7D219A, #00B7F5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7D219A), to(#00B7F5));
	
	/* Borders */
	
	border: 1px solid #44758B;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}