@import url( 
"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); 

body { 
	background-color: #000000; 
	color: #000000; 
	font-family: "Roboto Mono", monospace; 
} 

.generator { 
	background-color: #f5f5f5; 
	width: 300px; 
	margin: 5px auto; 
	padding: 60px; 
	border-radius: 10px; 
} 

img {
    width: 100%;
    height: 250px;
    margin: 20px;
    object-position: top;
  }

div.password { 
	display: grid; 
	grid-template-columns: auto min-content; 
	border-radius: 10px; 
	overflow: hidden; 
} 

div.password input { 
	padding: 7px 10px; 
	background-color: #ddd; 
	border: 0; 
	color: #333; 
} 

button { 
	background-color: #ff0000; 
	color: #fff; 
	text-transform: uppercase; 
	padding: 5px 15px; 
	border: 0; 
	border-radius: 10px; 
} 

div.password button { 
	border-radius: 0; 
} 

div.range { 
	margin: 10px 0; 
	display: grid; 
	grid-template-columns: 1fr min-content; 
} 

div.range span { 
	background-color: #ddd; 
	padding: 10px; 
	margin-left: 20px; 
	min-width: 30px; 
	text-align: center; 
	border-radius: 10px; 
} 

div.options { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: 10px; 
} 

div.options label { 
	display: block; 
	background-color: #ddd; 
	padding: 10px; 
	border-radius: 10px; 
	cursor: pointer; 
	font-family: 'Roboto Mono', ; 
} 

button.generate { 
	width: 100%; 
	margin-top: 10px; 
	padding: 10px; 
} 

h1 { 
	text-align: center; 
    margin: 20px auto ;
	color: #f10707; 
}