@charset "utf-8";

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

   Author:   Lucas Schiele
   Date:     11/26/2024
   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 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: transform 1s cubic-bezier(0,5,1,-5);
}

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