/* Background styles */
body {
	background:
	  radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%, rgba(240, 166, 17, 0) 0) 21px 30px,
	  radial-gradient(circle farthest-side at 0% 50%, #B71 24%, rgba(240, 166, 17, 0) 0) 19px 30px,
	  linear-gradient(#fb1 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0.6) 85%, #fb1 0) 0 0,
	  linear-gradient(150deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0) 0 0,
	  linear-gradient(30deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0) 0 0,
	  linear-gradient(90deg, #B71 2%, #fb1 0, #fb1 98%, #B71 0%) 0 0 #fb1;
	background-size: 40px 60px;
  }

  
  /* Center alignment styles */
  .center {
	width: 50%;
	margin: 0 auto;
	padding: 1%;
  }
  
  /* Form styles */
  .form {
	width: 100%;
	margin-top: 2%;
  }
  
  .form-label {
	font-size: larger;
	font-weight: bolder;
  }
  
  .form-control {
	padding: 1% 2%;
  }
  
  /* Container styles */
  .contain {
	-webkit-box-shadow: 25px 28px 47px 2px rgba(0, 0, 0, 0.48);
	-moz-box-shadow: 25px 28px 47px 2px rgba(0, 0, 0, 0.48);
	box-shadow: 25px 28px 47px 2px rgba(7, 0, 0, 0.48);
	background-image: linear-gradient(to right, #03cf2f, #58da3a, #81e448, #a3ef57, #c1f967);
  }
  
  /* Result styles */
  #result {
	margin-top: 4%;
	text-align: center;
	color: #02410b;
  }
  
  /* Heading styles */
  .heading {
	width: 50%;
	margin: 0 auto;
	padding: 2% 0;
	text-align: center;
	margin-top: 2%;
	color: rgb(250, 165, 54);
	background:
	  radial-gradient(black 15%, transparent 16%) 0 0,
	  radial-gradient(black 15%, transparent 16%) 8px 8px,
	  radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px,
	  radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
	background-color: #282828;
	background-size: 16px 16px;
  }
  
  /* Hide and show styles */
  .hide {
	display: none;
  }
  
  .show {
	width: 100%;
	background: none;
	margin: 0 auto;
	margin-top: 2%;
	background: #81e448;
  }
  
  /* Body image styles */
  #body {
	max-height: 200px;
	text-align: center;
  }
  
  /* Result text styles */
  #res {
	font-size: larger;
	text-align: center;
  }
  
  /* Body image container styles */
  #body {
	object-fit: contain;
  }
  
  /* Responsive styles */
  @media screen and (max-width: 820px) {
	.form {
	  margin: 0 auto;
	  padding: 1%;
	  font-size: x-large;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	}
  
	.center {
	  width: 100%;
	}
  }