/* Общий стиль страницы */
body {
  background-color: #111;
  font-family: 'Courier New', 'Fira Code', monospace;
  color: #00ff00;
  margin: 0;
  padding: 0;
  overflow: hidden;
  animation: bodyk 30s infinite linear; /* Плавная анимация фона */
}

/* Контейнер для контента */
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Внутренний контейнер */
.second-container {
  background-color: #1e1e1e;
  width: 600px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
  text-align: center;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  position: relative;
}

/* Кнопки */
.password-button{
  background-color: #1e1e1e;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 10px 20px;
  font-size: 18px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s ease;
  margin-top: 20px;
}
.password-button-copy{
  width: 100px;
  margin-left: 100px;
  position: absolute;
}
.password-button:hover,
.password-button-custom:hover,
.password-button-copy:hover {
  background-color: #00ff00;
  color: #1e1e1e;
  border-color: #1e1e1e;
}

/* Диапазон для длины пароля */
.check {
  width: 100%;
  margin-top: 20px;
  background-color: #333;
  border-radius: 10px;
  height: 10px;
}

.range-value {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}

/* Опции для выбора типа символов */
.PLR-option {
  margin-top: 20px;
}

.PLR-option input {
  margin-right: 10px;
}

.PLR-option label {
  font-size: 16px;
}

/* Анимация фона */
@keyframes bodyk {
  0% { background-color: #00ff00; }
  10% { background-color: #00cc00; }
  20% { background-color: #00b200; }
  30% { background-color: #008000; }
  40% { background-color: #006400; }
  50% { background-color: #004d00; }
  60% { background-color: #003300; }
  70% { background-color: #002200; }
  80% { background-color: #001100; }
  90% { background-color: #000000; }
  100% { background-color: #00ff00; }
}

/* Мигающий курсор */
.password-text {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  color: #00ff00;
  display: inline;
  border-right: 4px solid #00ff00;
  padding-right: 5px;
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  0% { border-color: transparent; }
  50% { border-color: #00ff00; }
  100% { border-color: transparent; }
}
.lower,
.upper,
.symbols,
.numbers{
  accent-color: #00ff00;
}
.check {
  width: 300px;
  height: 8px;
  background-color: #444;
  border-radius: 5px;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.check::-webkit-slider-runnable-track {
  background-color: #1e1e1e;
  border-radius: 5px;
}

.check::-webkit-slider-thumb {
  background-color: #39ff14;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
input, button {
  font-family: 'Courier New', monospace;
  background-color: #222;
  color: #39ff14;
  border: 2px solid #39ff14;
  padding: 10px;
  cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #39ff14;
  color: #111;
}

input[type="checkbox"]:not(:checked),
input[type="radio"]:not(:checked) {
  background-color: #333;
  color: #39ff14;
}
.password-button-custom{
  background-color: #1e1e1e;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 10px 20px;
  font-size: 18px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s ease;
  margin-top: 20px;
}

.back-arrow-img{
  position: absolute;
  top: 10px;
  left: 10px;
  margin-right: 0;
  display: block; 
}
.third-container{
  display: none;
  background-color: #1e1e1e;
  width: 600px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
  text-align: center;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  position: relative;
}
.password-text-custom{
  font-family: 'Courier New', monospace;
  font-size: 24px;
  color: #00ff00;
  display: inline;
  border-right: 4px solid #00ff00;
  padding-right: 5px;
  animation: blink 0.7s step-end infinite; 
}
.check-custom {
  margin-top: 40px;
  width: 300px; /* или другое значение по вашему усмотрению */
  height: 8px;
  background-color: #444;
  border-radius: 5px;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.check-custom::-webkit-slider-runnable-track {
  background-color: #1e1e1e;
  border-radius: 5px;
}

.check-custom::-webkit-slider-thumb {
  background-color: #39ff14;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Стили для значения кастомного диапазона (range-value) */
.range-value-custom {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  color: #39ff14;
}
.back-arrow-img {
  position: absolute;
  top: 10px;
  left: 10px;
  margin-right: 0;
  display: block;
}