body { width: 100%; min-height: 100vh; padding-bottom: 150px; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; } .inner { min-width: 300px; } @keyframes input-wave { from { background-position: 0px bottom } to { background-position: 18px bottom } } .input { display: block; width: 100%; padding: 0 0 .5em; font-size: 2rem; font-family: 'Dancing Script', cursive; color: rgba(white,.9); letter-spacing: 0.05em; background: none; border: none; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAA7UlEQVQoU63RvS6EQRTG8d9Bo0An3INGqLdyExIXQCJCITqNiEh2dRKFxhUoxA24CVGsRIlC5yOKI7MZyesNsRHTzTnP+c9zngn/dCIzL7AZEf2/MDNzCQcFlHjD4aAQ8ToMMDNn0cNy0RfQPabr8C02IuLyJ1hmjmIN+5isun4BTWC3rIex2jjHVkTcNYGZuYgTLNT6E3ZwGp/CzJzDMTq19ow9HGG8OihORmr/DNsR8ThYrfViua+g21j3BlOYqdprrEbEVXP2C6jhrgyWDJoOXqrDbkS8tzP8FtQAztdMHrDezuxXR8N8f1vzAVRZR6b5NCddAAAAAElFTkSuQmCC"); background-repeat: repeat-x; background-position: 0 bottom; animation: input-wave 0.4s linear infinite; // + .input { margin-top: 1em; } // &:focus { animation: 0; } } ::-webkit-input-placeholder { text-transform: uppercase; color: rgba(white,.6); font-weight: 600; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }