* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

ul, ol {
  list-style: none;
}

a {
  display: block;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

p a {
  display: inline;
}

img, video, iframe, picture, figure {
  display: block;
  max-width: 100%;
}

form, input, select, textarea, button, label {
  display: block;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
}

@font-face {
  font-family: "jetbrains";
  src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf");
  font-weight: 400 700;
}
:root {
  --colorRange: 10;
  --green-200: #a4ffaf;
  --grey-850: #17181f;
  --track-position: 50%;
}

body {
  font-size: 1rem;
  font-family: jetbrains;
  background-color: #08070b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-inline: 1rem;
}

.passwd__title {
  color: #817d92;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 auto;
}

.layout__generator {
  width: 100%;
  display: grid;
  gap: 2rem;
  background-color: #24232c;
  padding: 1rem;
}

.generator__copied {
  width: 100%;
  background-color: #24232c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.generator__title {
  color: #54535b;
  font-size: 1.5rem;
}

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

.copy__clip {
  background-color: transparent;
}

.copied__title {
  opacity: 0;
  font-size: 1.125rem;
  color: #a4ffaf;
  text-transform: uppercase;
}

@keyframes copiedClick {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.copied__title--click {
  animation: copiedClick 3s ease-in-out;
}

.copied__image {
  color: #ffffff;
  transition: all 2s ease-out;
}
.copied__image:hover {
  color: #a4ffaf;
}
.copied__image:focus {
  color: #a4ffaf;
}

.copied__clipboard {
  color: #a4ffaf;
}

.generator__bar {
  display: grid;
  max-width: 100%;
  margin-bottom: 0.5rem;
  position: relative;
}

.generator__length {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.length__title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.length__number {
  color: #a4ffaf;
  font-size: 1.5rem;
}

.bar__range {
  -webkit-appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.5em;
  background: linear-gradient(90deg, #a4ffaf var(--track-position), transparent 0);
  box-shadow: 0px 2.5px 5px 2px rgba(0, 0, 0, 0.6) inset, 0 0 1px #0d0d0d;
  border: 0.3 solid #08070b;
  cursor: pointer;
}
.bar__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1.75rem;
  width: 1.75rem;
  background-color: #fff !important;
  box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.7), 0 0 1px #0d0d0d, 1px 1px 10px 5px rgba(0, 0, 0, 0.5) inset;
  border-radius: 50%;
  border: 0.1rem solid #000;
  cursor: pointer;
}
.bar__range::-webkit-slider-thumb:hover {
  background-color: #08070b !important;
  box-shadow: 1px 1px 5px 5px rgba(255, 255, 255, 0.1) inset;
  border: 2px solid #a4ffaf;
}
.bar__range::-webkit-slider-thumb:focus {
  background-color: #08070b !important;
  box-shadow: 1px 1px 5px 5px rgba(255, 255, 255, 0.1) inset;
  border: 2px solid #a4ffaf;
}
.bar__range::-moz-range-thumb {
  height: 1.75rem;
  width: 1.75rem;
  background-color: #fff !important;
  border-radius: 50%;
  box-shadow: 1px 1px 2px 4px rgba(0, 0, 0, 0.7), 0 0 1px #0d0d0d, 1px 1px 10px 5px rgba(0, 0, 0, 0.5) inset;
  cursor: pointer;
}
.bar__range::-moz-range-thumb:hover {
  background-color: #08070b !important;
  box-shadow: 1px 1px 5px 5px rgba(255, 255, 255, 0.1) inset;
  border: 2px solid #a4ffaf;
}
.bar__range::-moz-range-thumb:focus {
  background-color: #08070b !important;
  box-shadow: 1px 1px 5px 5px rgba(255, 255, 255, 0.1) inset;
  border: 2px solid #a4ffaf;
}

.generator__include {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  display: grid;
  align-items: flex-start;
  gap: 1rem;
}

.include__item {
  display: flex;
  gap: 1rem;
}

.item__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.item__boxs {
  display: none;
}

.item__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #ffffff;
  border-radius: 0.2rem;
  display: grid;
  justify-items: center;
  align-items: center;
  transition: box-shadow 0.4s ease-in-out;
}

.item__icon {
  display: none;
}

.item__boxs:checked + .item__checkbox {
  border: none;
  box-shadow: inset 0 0 0 20px #a4ffaf;
}

.item__boxs:checked + .item__checkbox .item__icon {
  display: block !important;
  /* transition: all .4s ease; */
}

.generator__strength {
  background-color: #18171f;
  color: #817d92;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 0.875rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.bars__title {
  opacity: 0;
  text-transform: uppercase;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin-right: 1rem;
}

.bars__title--active {
  opacity: 1;
  transition: opacity 0.4 ease;
}

.bars__item {
  width: 0.625rem;
  height: 1.75rem;
  border: 2px solid #ffffff;
}

.bars__item--tooweek {
  background-color: #f64a4a;
  border: 2px solid #f64a4a;
  transition: all 1s ease;
}

.bars__item--week {
  background-color: #fb7c58;
  border: 2px solid #fb7c58;
  transition: all 1s ease;
}

.bars__item--medium {
  background-color: #f8cd65;
  border: 2px solid #f8cd65;
  transition: all 1s ease;
}

.bars__item--strong {
  background-color: #006a24;
  border: 2px solid #006a24;
  transition: all 1s ease;
}

.button__generate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: #08070b;
  background-color: #a4ffaf;
  border: 2px solid transparent;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: -1rem;
}
.button__generate:hover {
  cursor: pointer;
  color: #a4ffaf;
  background-color: #24232c;
  border: 2px solid #a4ffaf;
}
.button__generate:focus {
  cursor: pointer;
  color: #a4ffaf;
  background-color: #24232c;
  border: 2px solid #a4ffaf;
}

.generate__icon {
  color: #08070b;
}
.generate__icon:hover {
  color: #a4ffaf;
}
.generate__icon:focus {
  color: #a4ffaf;
}

@media (min-width: 600px) {
  .passwd__title {
    font-size: 1.5rem;
  }
  .generator__copied {
    max-width: 33.75rem;
    padding: 2rem;
  }
  .generator__title {
    font-size: 2rem;
  }
  .generator__copy {
    width: 1.313rem;
    height: 1.5rem;
  }
  .layout__generator {
    max-width: 33.75rem;
    padding: 1.5rem 2rem;
  }
  .length__title {
    font-size: 1.125rem;
  }
  .length__number {
    font-size: 2rem;
  }
  .item__label {
    font-size: 1.125rem;
  }
  .generator__strength {
    padding: 1.5rem 2rem;
  }
  .button__generate {
    margin: 0;
    font-size: 1.125rem;
  }
  .bars__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 1400px) {
  body {
    justify-content: flex-start;
  }
  .layouts__passwd {
    margin-top: 8.313rem;
  }
}
@media (max-width: 350px) {
  .passwd__title {
    font-size: clamp(0.75rem, -0.25rem + 5.714vw, 1rem);
  }
  .generator__title {
    font-size: clamp(1.1rem, -0.5rem + 9.143vw, 1.5rem);
  }
  .copied__image {
    width: 1.125;
    height: 1.225;
  }
  .copied__title {
    font-size: 0.725rem;
  }
  .length__title {
    font-size: 0.875rem;
  }
  .item__label {
    font-size: clamp(0.75rem, -0.25rem + 5.714vw, 1rem);
  }
  .strength__title {
    font-size: clamp(0.825rem, 0.125rem + 4vw, 1rem);
  }
  .bars__item {
    width: 0.5rem;
    height: 1.125rem;
  }
  .bars__title {
    font-size: clamp(0.725rem, -0.375rem + 6.286vw, 1rem);
    margin-right: 0.2rem;
  }
  .button__generate {
    padding: 0.5rem 0;
  }
}

/*# sourceMappingURL=style.css.map */