@charset "utf-8";

/*
   New Perspectives on HTML and CSS, 7th Edition
   Tutorial 8
   Tutorial Case

   Cinema Penguin Styles for Animation
   Author: Mohammad Z Taieeb
   Date: 04/26/2026

   Filename: cp_animate.css

*/

/* Transition Styles */

video {
   transition: transform 2s ease;
}

/* Key Frames Styles */

@keyframes spinVideo {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* Animation Styles */

#rotateVideo:checked ~ video {
   animation: spinVideo 3s linear infinite;
}

/* Animation Icon Styles */

label {
   font-size: 1.1em;
   cursor: pointer;
   margin-left: 5px;
}