style.css

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background-color: #1c1c1c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23374151' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  font-family: "Inter", sans-serif;
  color: #d5d4d8;
}

h1 {
  font-family: "Roboto", sans-serif;
  font-size: 40px;
  color: #ffffff;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-header {
  background-color: #1f2937;
  padding: 0 30px;
  margin-top: 35px;
  width: 80%;
  height: auto;
}

.container-header-title {
  color: #4adf86;
  line-break: auto;
  white-space: pre;
}

.container-header-subtitle {
  font-size: 20px;
  opacity: 0.4;
}

.container-settings {
  font-size: 16px;
  margin: 30px auto;
}

.slide-container {
  margin-top: 10px;
  border-top: 1px solid #273549;
}

.slide-container-1,
.slide-container-2,
.slide-container-3 {
  display: flex;
  gap: 10px;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: #374151;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin-top: 20px;
  border-radius: 2px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #111827;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #111827;
  cursor: pointer;
}

.slider:hover {
  opacity: 1;
}

.container-result {
  display: flex;
  gap: 10px;
  border-top: 1px solid #273549;
}

.result-pwd-1,
.result-pwd-2 {
  border: 2px solid #273549;
  margin-top: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #374151;
  width: 50%;
  height: 15px;
}

.fa-light,
.fa-copy {
  cursor: pointer;
  align-self: center;
}

.fa-light,
.fa-copy:active {
  transform: scale(0.98);
}

.btn {
  background-color: #047857;
  font-size: 16px;
  color: #ffffff;
  margin: 20px auto;
  padding: 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #059669;
}

.btn-clear {
  background-color: #111827;
  font-size: 14px;
  color: #ffffff;
  margin: 10px auto;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-clear:hover {
  background-color: #374151;
}

.footer-fineprint {
  text-align: center;
  font-size: 0.85rem;
  color: hsla(0, 0%, 93%, 1);
  opacity: 0.3;
}