* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #222;
}
.main {
    width: 500px;
    background-color: #FCFFF7;
    margin: 50px auto;
    border-radius: 5px;
    padding: 30px;
}
.range {
    position: relative;
}
.range span {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 18px;
  }
/* start: username area */
.input-area #user,
.input-area #pass,
.special-formet-area input {
    padding: 7px 12px;
    display: block;
    width: 100%;
    margin: 5px 0 20px 0;
    border: 1px solid #000;
    border-radius: 4px;
    height: 40px;
    font-size: 18px;
}
.input-area label h2 {
    font-size: 24px;
}

.input-area .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}
.input-area .controls .range {
    width: 100%;
}
.input-area .controls .range input {
    width: calc(100% - 30px);
}
/* end: username area */
/* start: button area */
.button-area {
    padding: 15px 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}
.button-area button,
.special-formet-area button {
    width: 48%;
    padding: 12px 20px;
    font-size: 18px;
    cursor: pointer;
}
.button-area #userAndPassGenerate {
    width: 100%;
}
/* end: button area */

/* start: special-formet-area */
.special-formet-area p {
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 10px;
    font-size: 16px;
}
.special-formet-area button {
    margin: 0 auto;
    display: block;
}
/* end: special-formet-area */