@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 8
   Review Assignment

   Cinema Penguin Styles for Animation
   Author: Andrew Hainline 
   Date:   11/24/25

   Filename: cp_animate2.css

*/

/* Transition Styles */

/* Track Styles */
::cue {
   background-color: transparent;
   text-shadow: 1px 1px 2px black;
   color: rgb(255, 177, 66);
   font-size: 1.2em;
   font-family: sans-serif;
}

::cue(.Title) {
   font-size: 2em;
   font-family: serif;
}

nav#topLinks a {
   color: rgb(255, 255, 255);
   text-shadow: rgba(0, 0, 0, 1) 1px -1px 1px;
   transform: scale(1, 1) translateY(0px);
   transition: all 1.2s linear;
}

nav#topLinks a:hover {
   color: rgb(255, 183, 25);
   text-shadow: rgba(0, 0, 0, 0.5) 0px 15px 4px;
   transform: scale(2, 2) translateY(-15px);
}

/* Marquee Styles */

div#marquee {
   position: relative;
}

div#marquee table {
   position: absolute;
}


/* Keyframe Styles */
  
@keyframes scroll {
   0%   { top: 250px; }
   100% { top: -1300px; }
}

/* Animation Styles */

div#marquee table {
   animation: scroll 50s linear infinite;
}

div#marquee:hover table {
   animation-play-state: paused;
}