@charset "utf-8";

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

   Author: Andrew Hainline  coding challenge 4
   Date:   11/20/25
   Filename: code8-4_debug.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 3s ease-in;
}


input#cardBox,
input#csc {
   box-shadow: 0px 0px 0px brown;
   transform: translateX(0px) skewX(0deg) rotate(0deg);
   transition: box-shadow 1s linear, transform 0.2s ease-in-out;
}

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

input#csc:invalid {
   transform: translateX(10px) skewX(20deg) rotate(2deg);
   box-shadow: 0px 0px 10px red;
}


input#csc:focus:invalid {
   transform-origin: bottom;
}