$aureolin: #f7ed05ff;
$deep-jungle-green: #1b5e61ff;
$black: #000001ff;
$titanium-yellow: #f0e714ff;
$dark-jungle-green: #353535;

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --animate-duration: 1300ms;
  --animate-delay: 0.9s;
}

body {
  background: $black;
  font-family: "Share Tech", sans-serif;
}
.header {
  padding: 2em;
}

.container {
  max-width: 576px;
  width: 100%;
  margin: 0 auto;
  padding: 0.5em;
}
// Utilities
.d-block {
  display: block;
}

// TYPOGRAPHY
#rangeValue {
  font-size: 3rem;
  text-align: center;
  color: $aureolin;
  font-weight: bold;
}


.header h1 {
  font-size: 2.25rem;
  text-shadow: 0 1px $deep-jungle-green ;
  font-weight: bolder;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-secondary {
  color: $aureolin;
}
.text-primary {
  color: $deep-jungle-green;
}
.text-bold {
  font-weight: bold;
}
label {
  color: $deep-jungle-green;
  line-height: 1.5rem;
  font-size: 1.4rem;
  margin: 0.3em 0;
}

.inputs {
  // input[type="checkbox"] {
  //     /* Add if not using autoprefixer */
  //     -webkit-appearance: none;
  //     appearance: none;
  //     /* For iOS < 15 to remove gradient background */
  //     background-color: #fff;
  //     /* Not removed via appearance */
  //     margin: 0;
  //     font: inherit;
  //     color: currentColor;
  //     width: 1em;
  //     height: 1em;
  //     border: 0.10em solid currentColor;
  //     border-radius: 0.15em;
  //     transform: translateY(-0.075em);
  //     // display: grid;
  //     // place-content: center;
  //   }
  //   input[type="checkbox"]::before {
  //     content: "";
  //     width: 0.65em;
  //     height: 0.65em;
  //     transform: scale(0);
  //     transition: 120ms transform ease-in-out;
  //     box-shadow: inset 1em 1em var(--form-control-color);
  //   }
}
.userInputBox {
  display: block;
  margin-top: 1em;
  padding: 0.4em;
  width: 90%;
  background-color: $aureolin;
  border: none;
  color: $aureolin;
  margin: 0 auto;
}
.checkboxes {
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.genBtn {
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  padding: 1.4em;
  font-size: 1.4rem;
  background: $aureolin;
  color: $deep-jungle-green;
  border: none;
  border-radius: 0.6em;
  margin: 2em 0;
  cursor: pointer;
  &:hover,&:focus {
    color: $aureolin;
    background-color: #353535;
  }
}
.pass-display {
  padding: 1.8em;
  width: 100%;
  border-radius: 0.5em;
  display: flex;
  justify-content: space-between;
  gap: 0.7em;
  flex: 1 50%;
  background-color: $deep-jungle-green;
}
.passwords {
  background-color: $deep-jungle-green;
  // padding: 1.8em;
  border-radius: 0.3em;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  line-height: 1.5rem;
}
@media (min-width: 480px) {
  .pass-display {
    flex-direction: row;
  }
}
.passwordTwo {
}
.checkbox {
  // appearance: none;
}
.fa-copy {
  // display: flex;
  // align-self: center;
  // justify-self: end;
  font-size: 2rem;
  color: $aureolin;
  cursor: pointer;
  top: 0.8em;
  left: 12em;
}

//  #860029 #29132e #6a7e6a