* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
  }
  
  body {
	background-color: #7d56f3;
  }
  
  .container {
	width: min(90%, 28.12em); /* Changed from 60% to 90% */
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
  }
  
  .container * {
	border: none;
	outline: none;
  }
  
  .input-wrapper {
	background-color: #ffffff;
	padding: 1.87em 1.5em;
	border-radius: 0.5em;
	box-shadow: 0 0.93em 1.25em rgba(0, 0, 0, 0.3);
	margin-bottom: 3.12em;
	display: grid;
	grid-template-columns: 1fr; /* Changed from grid-template-columns: 9fr 3fr; */
	gap: 1em;
  }
  
  input,
  button {
	font-weight: 500;
	border-radius: 0.31em;
  }
  
  input {
	background-color: #eeeeff;
	color: #080808;
	padding: 1.2em 1.25em;
	font-size: 0.87em;
  }
  
  button {
	color: #ffffff;
	background-color: #7d56f3;
	padding: 1.2em 1.25em; /* Added padding to match input field */
  }
  
  .output-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap; /* Added flex-wrap */
  }
  
  .output-wrapper div {
	height: 6.25em;
	width: 6.25em;
	background-color: #ffffff;
	border-radius: 0.31em;
	color: #080808;
	display: grid;
	place-items: center;
	padding: 1.25em 0;
	box-shadow: 0 0.93em 1.25em rgba(0, 0, 0, 0.3);
	margin-bottom: 1em; /* Added margin-bottom */
  }
  
  span {
	font-size: 1.87em;
	font-weight: 500;
  }
  
  p {
	font-size: 0.87em;
	color: #707070;
	font-weight: 400;
  }
  
  /* Media Query for screens smaller than 600px */
  @media (max-width: 600px) {
	.input-wrapper {
	  grid-template-columns: 1fr;
	}
  
	button {
	  width: 100%; /* Button takes full width */
	}
  
	.output-wrapper {
	  flex-direction: column; /* Stack the output vertically */
	  align-items: center; /* Center align the output */
	}
  
	.output-wrapper div {
	  width: 100%; /* Full width output boxes */
	  margin-bottom: 1em; /* Added margin-bottom */
	}
  }