:root {
    --white: hsl(0, 100%, 100%);
    --black: hsl(0, 0%, 0%);

    --grey-950: hsl(255, 22%, 4%);
    --grey-900: hsl(255, 17%, 9%);
    --grey-850: hsl(255, 15%, 11%);
    --grey-800: hsl(248, 10%, 15%);
    --grey-700: hsl(248, 5%, 34%);
    --grey-600: hsl(251, 9%, 53%);
    --grey-200: hsl(252, 11%, 91%);

    --green: hsl(127, 100%, 82%);
    --yellow: hsl(42, 91%, 68%);
    --orange: hsl(13, 95%, 66%);
    --red: hsl(0, 91%, 63%);

    --gradient: linear-gradient(var(--grey-900), var(--grey-950));

    /* fonts */

    --ff: "Mono", monospace;
    --f-32: 2rem/1.3125em;
    --f-24: 1.5rem/1.3em;
    --f-18: 1.125rem/1.3em;
    --f-16: 1rem/1.25em;


    /*  */
    --thumb-size: 1.75rem;

}


@font-face {
    font-family: "Mono";
    src: url('./starter-code/assets/fonts/JetBrainsMono-VariableFont_wght.ttf');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;

}

body {
    color: var(--white);
    background-color: black;
    font-weight: 700;
    font: bold var(--f-18) var(--ff);
}

main {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;

}

article {
    display: grid;
    /* border: 1px solid; */
    padding: 2rem;
    gap: 1rem;

}



h1 {
    font: bold var(--f-24) var(--ff);
    color: var(--grey-600);
    text-align: center;
}


input {
    width: 100%;
    border: none;
    outline: none;
    font: inherit;
}

form {
    display: grid;
    gap: 2rem;
    color: var(--grey-200);

}



.form-group {
    background-color: var(--grey-800);
    padding: 1rem 2rem;
}

.password-generator {
    display: inline-flex;
    align-items: center;
   
}



.password__icon {
    display: flex;
    align-items: center;
    color: var(--green);
    text-transform: uppercase;
}

.copy-text {
    min-width: 8ch;
}

#copy-password {
    cursor: pointer;
}

#copy-password:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(146deg) brightness(104%) contrast(102%);
}



#generated-password {
    background-color: inherit;
    color: var(--grey-600);
    font: bold var(--f-32) var(--ff);
    flex: 1;

}

.form-group--two {
    display: grid;
    gap: 2rem;
    padding-block: 1.5rem 2.5rem;


}

.password-length {
    display: grid;
    gap: 1.5rem;

}


.password-length__texts {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--grey-200);

}

.password-length__value {
    font: bold var(--f-32) var(--ff);
    color: var(--green);
}



input[type=range] {
    cursor: pointer;
    width: 100%;
    outline: none;
    border: none;
    height: .5rem;
    background-color: var(--grey-850);
    -webkit-appearance: none;
    appearance: none;

}

/* webkit */
input[type=range]::-webkit-slider-runnable-track {
    height: .5rem;
    border-radius: 1rem;
    cursor: pointer;


}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -.8rem;
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: var(--white);
    border-radius: 50%;
    cursor: grab;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    



}


input[type=range]:focus-within::-webkit-slider-thumb {
    background-color: var(--black);
    border: .2rem solid;
    border-color: var(--green);
    cursor: grabbing;
}

input[type=range]:hover::-webkit-slider-thumb {
    background-color: var(--black);
    border: .2rem solid;
    border-color: var(--green);
    cursor: pointer;
}



/* moz */
input[type=range]::-moz-range-track {
    border-radius: 1rem;
    height: .5rem;
    cursor: pointer;

}

input[type=range]::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: white;
    border-radius: 50%;
    cursor: grab;

}

input[type=range]:focus-within::-moz-range-thumb {
    background-color: var(--black);
    border: .2rem solid;
    border-color: var(--green);
    cursor: grabbing;
}


/* ie */
input[type=range]::-ms-track {
    border-radius: 1rem;
    height: .5rem;
    cursor: pointer;
    color: transparent;
}


input[type=range]::-ms-fill-lower {
    border-radius: 1rem;
}


input[type=range]::-ms-fill-upper {
    border-radius: 1rem;
}


input[type=range]::-ms-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: white;
    border-radius: 50%;
    cursor: grab;

}

input[type=range]:focus-within::-ms-thumb {
    background-color: var(--black);
    border: .2rem solid;
    border-color: var(--green);
    cursor: grabbing;
}


/* fieldset */

fieldset {
    border: none;
    font: inherit;


}

.options__group {
    display: grid;
    grid-template-columns: 1.25em 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    font: inherit;

}


.options__input {
    -webkit-appearance: none;
    appearance: none;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 1.25em;
    background: inherit;
    font: inherit;
    color: inherit;
    border: 2px solid;
    cursor: pointer;
    /*  */
    display: grid;
    place-content: center;

}

.options__input:checked {
    background-color: var(--green);
    border-color: var(--green);
}

.options__input:hover {

    border-color: var(--green);
}



.options__input:checked::before {
    content: url('./starter-code/assets/images/icon-check.svg');
    height: 100%;
    width: 100%;
    display: block;
}


.password-strength {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background-color: var(--grey-850);
    text-transform: uppercase;
    align-items: center;
}

.password-strength__text {
    color: var(--grey-600);
    font: inherit;


}


.indicator {
    display: flex;
    align-items: center;
    gap: 1rem;


}

.indicator__meter {
    display: flex;
    gap: 0.5rem;
}

.indicator__text {
    font: bold var(--f-24) var(--ff);
    color: var(--white);
}

.meter {
    display: block;
    width: .65em;
    height: 1.75em;
    border: 2px solid white;
}


#btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    font: bold var(--f-18) var(--ff);
    text-transform: uppercase;
    background-color: var(--green);
    cursor: pointer;
    border: 2px solid var(--green);
    outline: none;
    color: var(--grey-800);
}


#btn:hover {
    background-color: transparent;
    color: var(--green);
    fill: var(--green);
}

#btn:hover img {
    filter: invert(88%) sepia(24%) saturate(607%) hue-rotate(66deg) brightness(99%) contrast(106%);
}


@media (max-width: 1023px) {
    .form-group--two {
        padding-block: 1.5rem;

    }

}

@media (max-width: 768px) {
    .form-group {
        padding-inline: 1rem;

    }

    #btn {
        padding: 1.25rem;
    }

    #generated-password {
        font: bold var(--f-24) var(--ff)
    }

    h1 {
        font: var(--f-16) var(--ff);
    }

    .indicator__text {
        font: bold var(--f-18) var(--ff);

    }
}