* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: rgb(98, 0, 255);
    color: rgb(98, 0, 255);
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px;
}

.generator {
    width: 100%;
    max-width: 640px;
    padding: 32px 16px;
    background-color: rgb(35, 35, 35);
    border-radius: 32px;
}

h1 {
    margin-bottom: 16px;
}

input:not([type="checkbox"]) button {
    appearance: none;
    outline: none;
    border: none;
    background: none;
}

input[type="checkbox"] {
    cursor: pointer;
}

.password-wrap {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 16px;
}


/* adds a nice gradient effect under the generated password */
.password-wrap::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    height: 3px;
    left: 0;
    right: 0;
    border-radius: 3px;
    background: linear-gradient(to right, rgb(173, 37, 255) 20%, rgb(81, 140, 212) 80%)
}

/* color of password that appears */
.password-wrap input {
    flex: 1 1 0%;
    padding: 8px;
    color: rgb(40, 40, 71)
}

/* changes the box's text font style and colour */
.password-wrap input::placeholder {
    color: rgb(136, 136, 136);
    font-style: italic;
}

.password-wrap button {
	cursor: pointer;
	background: linear-gradient(to bottom,  rgb(173, 37, 255) 0%, rgb(81, 140, 212) 75%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* puts each setting on its own line */
label {
    display: block;
    white-space: nowrap;
    user-select: none;
    margin-bottom: 8px;
}


label input[type="number"] {
    text-align: right;
}

button[type="submit"] {
	cursor: pointer;
	padding: 0.5rem 1rem;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 0.25rem;
	background: linear-gradient(to right, #ad25fc 25%, #518cd4 50%);
	background-size: 200%;
	background-position: 25%;
	transition: 0.3s ease-out;
}

button[type="submit"]:hover {
    background-position:75%;
}