.input-dinamic {
   position: relative;
   padding: 15px 0 0;
   margin: 1rem 0;
   width: 50%;
}
 .input-dinamic input {
   font-family: inherit;
   width: 100%;
   border: 0;
   border-bottom: 2px solid #9b9b9b;
   outline: 0;
   font-size: 1.3rem;
   padding: 7px 0;
   background: transparent;
   transition: border-color 0.2s;
}
 .input-dinamic input::placeholder {
   color: transparent;
}
 .input-dinamic input:placeholder-shown ~ label {
   font-size: 1.2rem;
   cursor: text;
   top: 20px;
}
 .input-dinamic label {
   position: absolute;
   top: 0;
   display: block;
   transition: 0.2s;
   font-size: 1rem;
   color: #9b9b9b;
}
 .input-dinamic input:focus {
   padding-bottom: 6px;
   font-weight: 700;
   border-width: 3px;
   border-color: var(--color-1);
}
 .input-dinamic input:focus ~ label {
   position: absolute;
   top: 0;
   display: block;
   transition: 0.2s;
   font-size: 1rem;
   color: var(--color-1);
   font-weight: 700;
}
/* reset input */
.input-dinamic input:required, input:invalid {
   box-shadow: none;
}