@font-face {
    font-family: 'jetbrains_monoregular';
    src: url(assets/fonts/jetbrainsmono-variablefont_wght-webfont.woff);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'jetbrains_monoregular';
}

:root{
    --background : #000;
    --sectioncolor: #24232C;
    --grey : #817D92;
    --almostwhite: #E6E5EA;
    --neongreen: #A4FFAF;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background:var(--background);
}

h1{
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px; 
    text-align: right;  
    color: var(--grey);
    margin-bottom: 31px;
}

header{
    height: 80px;
    width: 540px;
    background: var(--sectioncolor);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

header p:first-child{
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    color: #E6E5EA;
    position: absolute;
    left: 32px;
    opacity: 0.5;
}

.copied{
    visibility: hidden;
    color: var(--neongreen);
    position: absolute;
    right: 69px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
}

.visible{
    visibility: visible;
}

.copy-svg{
    cursor: pointer;
    position: absolute;
    right: 32px;

}

.copy-svg:hover .copy{
    fill: white;
}

section{
    height: 528px;
    width: 540px;
    margin-top: 24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background: var(--sectioncolor);
}

.character-length{
    width: 476px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.character-length p:first-child{
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--almostwhite);
}

.character-length p:nth-child(2){
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    color: var(--neongreen);
}

input[type='range']{
	accent-color: var(--neongreen);
    width: 476px;
    height: 8px;
}

.include{
    /* border: 1px solid white; */
    height: 152px;
    width: 476px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

input[type='checkbox']{
	accent-color: var(--neongreen);
    transform: scale(1.5);
    border-radius: 0%;
    
}

label{
    margin-left: 24px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--almostwhite);
}

.strength{
    height: 72px;
    width: 476px;
    background: #18171F;
    display: flex;
    justify-content: space-around;
    gap: 100px;
    align-items: center;
    position: relative;
}

#text-strength {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--grey);
    text-transform: uppercase;
    position: absolute;
    left: 32px;
}

.strength-value{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#text-medium{
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    text-align: right;
    color: var(--almostwhite);
    text-transform: uppercase;
    margin-right: 10px;
    position: absolute;
    right: 110px;
}

.all-value{
    width: 64px;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 32px;
}

.value{
    width: 10px;
    height: 28px;
    border: 2px solid white;
}

.red{
    background: #F64A4A;
    border: 2px solid #F64A4A;
}

.orange{
    background: #FB7C58;
    border: 2px solid #FB7C58;
}

.yellow{
    background: #F8CD65;
    border: 2px solid #F8CD65;
}

.green{
    background: #A4FFAF;
    border: 2px solid #A4FFAF;
}

.generate{
    height: 65px;
    width: 476px;
    background: var(--neongreen);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.generate p {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--sectioncolor);
    text-transform: uppercase;
    margin-right: 24px;
    cursor: pointer;
}

.generate:hover {
    background: var(--sectioncolor);
    border: 2px solid var(--neongreen);
    color: var(--neongreen);

}

.generate:hover p{
    color: var(--neongreen);
}

.generate:hover .arrow path{
    fill: var(--neongreen);
}