1/*The eye icon on the password can be stylize with any tool you want
2to use (the only way i know to do this correctly is using JS)
3this is meant to be wide supported and it really depends on you browsers
4if i realize any way to stylize the eye it could be added in the future
5in other input type*/
6
7.container {
8  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
9  font-style: italic;
10  font-weight: bold;
11  display: flex;
12  margin: auto;
13  aspect-ratio: 16/9;
14  align-items: center;
15  justify-items: center;
16  justify-content: center;
17  flex-wrap: wrap;
18  flex-direction: column;
19  gap: 1em;
20}
21
22.input-container {
23  filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);
24  animation: blinkShadowsFilter 8s ease-in infinite;
25}
26
27.input-content {
28  display: grid;
29  align-content: center;
30  justify-items: center;
31  align-items: center;
32  text-align: center;
33  padding-inline: 1em;
34}
35
36.input-content::before {
37  content: "";
38  position: absolute;
39  width: 100%;
40  height: 100%;
41  filter: blur(40px);
42  -webkit-clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);
43  clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);
44  background: rgba(122, 251, 255, 0.5568627451);
45  transition: all 1s ease-in-out;
46}
47
48.input-content::after {
49  content: "";
50  position: absolute;
51  width: 98%;
52  height: 98%;
53  box-shadow: inset 0px 0px 20px 20px #212121;
54  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, hsl(295, 60%, 12%) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);
55  -webkit-clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);
56  clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);
57  animation: backglitch 50ms linear infinite;
58}
59
60.input-dist {
61  z-index: 80;
62  display: grid;
63  align-items: center;
64  text-align: center;
65  width: 100%;
66  padding-inline: 1em;
67  padding-block: 1.2em;
68  grid-template-columns: 1fr;
69}
70
71.input-type {
72  display: flex;
73  flex-wrap: wrap;
74  flex-direction: column;
75  gap: 1em;
76  font-size: 1.1rem;
77  background-color: transparent;
78  width: 100%;
79  border: none;
80}
81
82.input-is {
83  color: #fff;
84  font-size: 0.9rem;
85  background-color: transparent;
86  width: 100%;
87  box-sizing: border-box;
88  padding-inline: 0.5em;
89  padding-block: 0.7em;
90  border: none;
91  transition: all 1s ease-in-out;
92  border-bottom: 1px solid hsl(221, 26%, 43%);
93}
94
95.input-is:hover {
96  transition: all 1s ease-in-out;
97  background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
98}
99
100.input-content:focus-within::before {
101  transition: all 1s ease-in-out;
102  background: hsla(0, 0%, 100%, 0.814);
103}
104
105.input-is:focus {
106  outline: none;
107  border-bottom: 1px solid hsl(192, 100%, 100%);
108  color: hsl(192, 100%, 88%);
109  background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
110}
111
112.input-is::-moz-placeholder {
113  color: hsla(192, 100%, 88%, 0.806);
114}
115
116.input-is::placeholder {
117  color: hsla(192, 100%, 88%, 0.806);
118}
119
120@keyframes backglitch {
121  0% {
122    box-shadow: inset 0px 20px 20px 30px #212121;
123  }
124
125  50% {
126    box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);
127  }
128
129  to {
130    box-shadow: inset 0px 20px 20px 30px #212121;
131  }
132}
133
134@keyframes rotate {
135  0% {
136    transform: rotate(0deg) translate(-50%, 20%);
137  }
138
139  50% {
140    transform: rotate(180deg) translate(40%, 10%);
141  }
142
143  to {
144    transform: rotate(360deg) translate(-50%, 20%);
145  }
146}
147
148@keyframes blinkShadowsFilter {
149  0% {
150    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
151  }
152
153  25% {
154    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);
155  }
156
157  50% {
158    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
159  }
160
161  75% {
162    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
163  }
164
165  to {
166    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
167  }
168}