@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 8
   Coding Challenge 4

   Author:   Matt Johnson
   Date:     11/25/24
   Filename: code8-4_form.css

*/

@keyframes drop-down {
   0% {
      top: -200px;
   }

   100% {
      top: 100px;
   }
}

@keyframes slide-right {
   0% {
      left: -400px;
   }

   100% {
      left: 0px;
   }
}

form#payment {
   animation: drop-down 3s;
}

h1 {
   animation: slide-right ease-in 3s;
}

input#cardBox,
input#csc {
   box-shadow: 0px 0px 0px brown;
   transition: box-shadow 1s linear;
}

input#cardBox:focus,
input#csc:focus {
   box-shadow: 0px 0px 25px brown;
}

input#csc:invalid {
   transform: translateX(5px) skewX(20deg) rotate(1deg);
   box-shadow: 0px 0px 10px red;
   transition: 1s cubic-bezier(0, 5, 1, -5);
}

input#csc:focus:invalid {
   transform: translateX(0px) skewX(0deg) rotate(0deg);
   transform-origin: bottom;
   box-shadow: transform 0px 0px 0px red;

}