1.searchBox {
2  display: flex;
3  max-width: 230px;
4  align-items: center;
5  justify-content: space-between;
6  gap: 8px;
7  background: #2f3640;
8  border-radius: 50px;
9  position: relative;
10}
11
12.searchButton {
13  color: white;
14  position: absolute;
15  right: 8px;
16  width: 50px;
17  height: 50px;
18  border-radius: 50%;
19  background: var(--gradient-2, linear-gradient(90deg, #2AF598 0%, #009EFD 100%));
20  border: 0;
21  display: inline-block;
22  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
23}
24/*hover effect*/
25button:hover {
26  color: #fff;
27  background-color: #1A1A1A;
28  box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
29  transform: translateY(-3px);
30}
31/*button pressing effect*/
32button:active {
33  box-shadow: none;
34  transform: translateY(0);
35}
36
37.searchInput {
38  border: none;
39  background: none;
40  outline: none;
41  color: white;
42  font-size: 15px;
43  padding: 24px 46px 24px 26px;
44}
45
46