1.container {
2  position: relative;
3  background: linear-gradient(135deg, rgb(179, 208, 253) 0%, rgb(164, 202, 248) 100%);
4  border-radius: 1000px;
5  padding: 10px;
6  display: grid;
7  place-content: center;
8  z-index: 0;
9  max-width: 300px;
10  margin: 0 10px;
11}
12
13.search-container {
14  position: relative;
15  width: 100%;
16  border-radius: 50px;
17  background: linear-gradient(135deg, rgb(218, 232, 247) 0%, rgb(214, 229, 247) 100%);
18  padding: 5px;
19  display: flex;
20  align-items: center;
21}
22
23.search-container::after, .search-container::before {
24  content: "";
25  width: 100%;
26  height: 100%;
27  border-radius: inherit;
28  position: absolute;
29}
30
31.search-container::before {
32  top: -1px;
33  left: -1px;
34  background: linear-gradient(0deg, rgb(218, 232, 247) 0%, rgb(255, 255, 255) 100%);
35  z-index: -1;
36}
37
38.search-container::after {
39  bottom: -1px;
40  right: -1px;
41  background: linear-gradient(0deg, rgb(163, 206, 255) 0%, rgb(211, 232, 255) 100%);
42  box-shadow: rgba(79, 156, 232, 0.7019607843) 3px 3px 5px 0px, rgba(79, 156, 232, 0.7019607843) 5px 5px 20px 0px;
43  z-index: -2;
44}
45
46.input {
47  padding: 10px;
48  width: 100%;
49  background: linear-gradient(135deg, rgb(218, 232, 247) 0%, rgb(214, 229, 247) 100%);
50  border: none;
51  color: #9EBCD9;
52  font-size: 20px;
53  border-radius: 50px;
54}
55
56.input:focus {
57  outline: none;
58  background: linear-gradient(135deg, rgb(239, 247, 255) 0%, rgb(214, 229, 247) 100%);
59}
60
61.search__icon {
62  width: 50px;
63  aspect-ratio: 1;
64  border-left: 2px solid white;
65  border-top: 3px solid transparent;
66  border-bottom: 3px solid transparent;
67  border-radius: 50%;
68  padding-left: 12px;
69  margin-right: 10px;
70}
71
72.search__icon:hover {
73  border-left: 3px solid white;
74}
75
76.search__icon path {
77  fill: white;
78}