1.input-container {
2  display: flex;
3  background: white;
4  border-radius: 1rem;
5  background: linear-gradient(135deg, #23272F 0%, #14161a 100%);
6  box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b;
7  padding: 0.3rem;
8  gap: 0.3rem;
9}
10
11.input-container input {
12  border-radius: 0.8rem 0 0 0.8rem;
13  background: #23272F;
14  box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0);
15  width: 100%;
16  flex-basis: 75%;
17  padding: 1rem;
18  border: none;
19  border: 1px solid transparent;
20  color: white;
21  transition: all 0.2s ease-in-out;
22}
23
24.input-container input:focus {
25  border: 1px solid #FFD43B;
26  outline: none;
27  box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);
28}
29
30.input-container button {
31  flex-basis: 25%;
32  padding: 1rem;
33  background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);
34  box-shadow: 0px 0px 1px rgba(255, 212, 59, 0.5), 0px 0px 1px rgba(255, 102, 0, 0.5);
35  font-weight: 900;
36  letter-spacing: 0.3rem;
37  text-transform: uppercase;
38  color: #23272F;
39  border: none;
40  width: 100%;
41  border-radius: 0 1rem 1rem 0;
42  transition: all 0.2s ease-in-out;
43}
44
45.input-container button:hover {
46  background: linear-gradient(135deg, rgb(255, 212, 59) 50%, rgb(255, 102, 0) 100%);
47  box-shadow: 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);
48}
49
50@media (max-width: 500px) {
51  .input-container {
52    flex-direction: column;
53  }
54
55  .input-container input {
56    border-radius: 0.8rem;
57  }
58
59  .input-container button {
60    padding: 1rem;
61    border-radius: 0.8rem;
62  }
63}