@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
    /* Colors */
    --color-grey-200: #E6E5EA;
    --color-grey-600: #817D92;
    --color-grey-700: #54535B;
    --color-grey-800: #24232C;
    --color-grey-850: #18171F;
    --color-grey-900: #14131B;
    --color-grey-950: #08070B;
    --color-yellow-300: #F8CD65;
    --color-orange-400: #FB7C58;
    --color-red-500: #F64A4A;
    --color-green-200: #A4FFAF;
    --color-white: #FFFFFF;
    --color-black: #000000;
}
body {
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    background-color: var(--color-grey-900);
    color: var(--color-grey-200);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
main {
    width: clamp(21.4375rem, 80vw, 33.75rem);
    margin: 0 auto;
    padding:  0 1.5rem;
}
h1 {
    color: var(--color-grey-600);
    font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
    margin-bottom: clamp(1rem, 1rem + 0.5vw, 2rem);
    text-align: center;
}
.password-container {
    width: 100%;
    margin: 0 auto;
}

.password-input {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: clamp(1rem, 1vw, 1.5rem);
}
.password-input input {
    width: 100%;
    background-color: var(--color-grey-800);
    border: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: clamp(1rem, 1.6vw, 2rem);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--color-grey-200);

}
.password-input input::placeholder {
    color: var(--color-grey-700);
    font-size: clamp(1.5rem, 1vw, 2rem);
}
.hidden {
    display: none;
}
.copied {
    position: absolute;
    right: 55px;
    top: 1.8rem;
    font-size: clamp(1rem, 1vw, 1.125rem);
    color: var(--color-green-200);
    transition: all 0.2s ease-in-out;
}
.copy-icon {
    position: absolute;
    right: clamp(1rem, 1.6vw, 2rem);
    top: 1.6rem;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}
.copy-icon:hover {
    transform: scale(0.9);
    filter: invert(0.5) brightness(2);

}
.password-details-container, 
.strength-container,
button {
    width: 100%;
    padding-top: clamp(1rem, 1vw, 1.5rem);
    padding-bottom: clamp(1rem, 1vw, 1.5rem);
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
    background-color: var(--color-grey-800);
}
.character-length {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.character-length p {
    font-size: clamp(1rem, 1vw, 1.125rem);

}
.character-length span {
    color: var(--color-green-200);
    font-size: clamp(1.5rem, 2vw, 2rem);
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    background: var(--color-grey-850);
    outline: none;
    transition: background 0.3s;  
}
input[type="range"]::-webkit-slider-runnable-track { 
    height: 0.5rem;  
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-grey-200);
    cursor: pointer;
    border-radius: 50%;
    margin-top: -10px;
    position: relative;
    z-index: 2;
}
input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--color-grey-850);
    border: 2px solid var(--color-green-200);
}
input[type="range"]::-moz-range-thumb {
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-grey-200);
    cursor: pointer;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb:hover {
    background: var(--color-grey-850);
    border: 2px solid var(--color-green-200);
}
.checkboxes {
    margin: 2rem 0;
}
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: clamp(1rem, 1vw, 1.125rem);
}
.checkbox-container input {
    display: none;
}
.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-grey-200);
    background: var(--color-grey-800);
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.checkmark:hover {
    background: var(--color-grey-850);
    border: 2px solid var(--color-green-200);
}
.checkbox-container input:checked + .checkmark {
    background: url('/images/icon-check.svg') no-repeat center center var(--color-green-200);
    border: none;
}
.strength-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-grey-850);
    margin-bottom: clamp(1rem, 2vw, 2rem);;
}
.strength-container p {
    color: var(--color-grey-600);
    font-size: (1rem, 1vw, 1.125rem);
}
.strength-container span {
    color: var(--color-grey-200);
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    
}
.strength-indicator {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;   
}
.strength-bars {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.strength-bars .bar {
    width: 10px;
    height: 28px;
    border: 2px solid var(--color-grey-200);
}
.very-weak .bar:nth-child(1) {
    background-color: var(--color-red-500);
}
.weak .bar:nth-child(1),
.weak .bar:nth-child(2) {
    background-color: var(--color-orange-400);
}
.medium .bar:nth-child(1),
.medium .bar:nth-child(2),
.medium .bar:nth-child(3) {
    background-color: var(--color-yellow-300);
}
.strong .bar {
    background-color: var(--color-green-200);
}
button {
    display: flex;
    gap : 1rem;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: var(--color-green-200);
    cursor: pointer;
    color: var(--color-grey-800);
}
button:hover {
    border: 2px solid var(--color-green-200);
    background-color: var(--color-grey-800);
    color: var(--color-green-200);
}
.active-arrow {
   fill: var(--color-green-200);
}
.error-text {
    color: var(--color-red-500);
    font-size: clamp(1rem, 1vw, 1.125rem);
    margin-bottom: 1rem;
}