.card22 {
width: 190px;
padding: 1.9rem 1.2rem;
text-align: center;
background: #2a2b38;
}
/*Inputs*/
.field22 {
margin-top: .5rem;
display: flex;
align-items: center;
justify-content: center;
gap: .5em;
background-color: #1f2029;
border-radius: 4px;
padding: .5em 1em;
}
.input-icon {
height: 1em;
width: 1em;
fill: #ffeba7;
}
.input-field22 {
background: none;
border: none;
outline: none;
width: 100%;
color: #d3d3d3;
}
/*Text*/
.title22 {
margin-bottom: 1rem;
font-size: 1.5em;
font-weight: 500;
color: #f5f5f5;
}
/*Buttons*/
.btn22 {
margin: 1rem;
border: none;
border-radius: 4px;
font-weight: bold;
font-size: .8em;
text-transform: uppercase;
padding: 0.6em 1.2em;
background-color: #ffeba7;
color: #5e6681;
box-shadow: 0 8px 24px 0 rgb(255 235 167 / 20%);
transition: all .3s ease-in-out;
}
.btn22-link {
color: #f5f5f5;
display: block;
font-size: .75em;
transition: color .3s ease-out;
}
/*Hover & focus*/
.field22 input:focus::placeholder {
opacity: 0;
transition: opacity .3s;
}
.btn22:hover {
background-color: #5e6681;
color: #ffeba7;
box-shadow: 0 8px 24px 0 rgb(16 39 112 / 20%);
}
.btn22-link:hover {
color: #ffeba7;
}
