.explode-letter {
    display: inline-block;
    position: absolute;
    animation: explode 1s forwards;
    font-size: 16px;
    white-space: pre;
  }

input#input-password {
	border-width: 2px;
    font-size: 18px;
    max-width: 400px;
    max-height: 50px;
    resize: none;
    white-space: pre-line;
    max-width: 100%;
    border-color: hsl(130deg 28% 80%);
    border-radius: 7px;
    color: #2a2a2a;
    padding: 10px 5px;
    background: aliceblue;
	text-align-last: center;
	min-width: inherit;
	box-sizing: border-box;
    background-image: linear-gradient( -225deg, #09ddff 0%, #107a42 29%, #13fff0 67%, #21553c 100% );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 3s linear infinite;
  display: inline-block;
  width: 100%;
  white-space: normal; /* Визуальный перенос, но при отправке будет одной строкой */
  word-wrap: break-word;
  overflow-wrap: break-word;
  height: auto;
  min-height: 50px;
}

div#idshifrator2 {margin-bottom: 10px;}

select {
    border-radius: 7px;
    border-width: 2px;
    border-color: #dfdfdf;
    font-size: 16px;
    appearance: none;
    box-shadow: none;
    flex: 1;
    padding: 0 1em;
}

.select {
position: relative;
    display: flex;
    width: 15em;
    height: 2.9em;
    border-radius: 0.22em;
    overflow: hidden;
    min-width: fit-content;
}

.select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    transition: .25s all ease;
	padding: 14px 14px 14px 14px;
    pointer-events: none;
    color: #bbbbbb;
}
.select:hover::after {
color: orange;
}
.select:active::after {
color: #61d5b7;
}
.select:focus::after {
color: #61d5b7;
}
select#sel-encryption:focus {
    border-color: #bbbbbb;
    border-width: 2px;
    border-style: solid;
    outline: none;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
@keyframes explode {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--translate-x), var(--translate-y)) scale(2);
    }
}

input#input-password:focus {
/*outline: none !important;*/
/*border-color: black;*/
/* solid red; */
box-shadow: 0 0 10px #719ece;
border-width: 2px;
border-color: #c7ffd0;

}

input#input-password::selection {
    background: hsl(199deg 98% 48% / 8%);
}


.menu-converter {
    display: flex;
    gap: 10px;
    margin: 0px 10px 20px 0px;
    padding: 0;
}

.menu-link-converter {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    background-color: #e0e0e0;
    color: #555555;
    border-radius: 7px;
    transition: all 0.3s ease;
}

.menu-link-converter:hover {
    background-color: #90ee90;
    color: #333333;
}

.menu-link-converter.active {
    background-color: #4caf50;
    color: white;
}

@media screen and (max-width : 752px) {
    .menu-converter { display: flex; flex-direction: column; gap: 8px; } .menu-link-converter { display: block; text-align: center; padding: 12px 20px; font-size: 16px; font-family: Arial, sans-serif; text-decoration: none; background-color: #e0e0e0; color: #555555; border-radius: 7px; transition: all 0.3s ease; } .menu-link-converter:hover { background-color: #90ee90; color: #333333; } .menu-link-converter.active { background-color: #4caf50; color: white; }
    input#input-password {min-width: 99%;}
}