1.inp-border {
2  padding: 5px;
3  margin: 2em 1em;
4  border-radius: 50px;
5  max-width: 300px;
6}
7
8.input {
9  text-align: center;
10  padding: 15px;
11  outline: none;
12  border: double 0;
13  background: #252525;
14  border-radius: 50px;
15  position: relative;
16  box-sizing: border-box;
17  display: block;
18  width: 100%;
19  font-size: 1.5rem;
20}
21
22.a1 {
23  background: linear-gradient(
24    330.28deg,
25    #ff6e1d 100%,
26    #ff6e1d 100%,
27    #ff6e1d 100%
28  );
29}
30
31.a1 > input {
32  color: #caab98;
33}
34
35.a1 > input::placeholder {
36  color: #ff6e1d;
37  opacity: 0.6;
38}
39
40.inp-border:focus-within {
41  background: linear-gradient(
42    330.28deg,
43    #2cfff2 0%,
44    #1e78ff 30.73%,
45    #ff54a6 55.73%,
46    #ff6e1d 79.17%,
47    #ff3e3e 100%
48  );
49}
50
51.inp-border:hover {
52  background: linear-gradient(
53    330.28deg,
54    #2cfff2 0%,
55    #1e78ff 30.73%,
56    #ff54a6 55.73%,
57    #ff6e1d 79.17%,
58    #ff3e3e 100%
59  );
60}
61