@charset "utf-8";

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

   Cinema Penguin Styles for Animation
   Author: Cody Hill Pearson
   Date:   11/22/2025

   Filename: cp_animate.css

*/

/* Transition Styles */
nav#topLinks a {
    color: rgb(255, 255, 255);
    font-size: 1em;
    letter-spacing: 0em;
    text-shadow: rgba(0, 0, 0, 1) 1px -1px 1px;
    transition: color 1.5 ease-in 0.5s,
		font-size 2s ease,
		letter-spacing 2s ease-out,
		text-shadow 2s cubic-bezier(0.6,0,0.8,0.5);
}

nav#topLinks a:hover {
    color: rgb(255, 183, 25);
    font-size: 3em;
    letter-spacing: 0.1em;
    text-shadow: rgba(0, 0, 0, 0.5) 15px -3px 8px;
}

/* Key Frames Styles */

@keyframes spin{
	0% {transform: rotate(0deg);}
	23% {transform: rotate(0deg);}
	28% {transform: rotate(90deg);}
	39% {transform: rotate(90deg);}
	42% {transform: rotate(180deg);}
	68% {transform: rotate(180deg);}
	72% {transform: rotate(270deg);}
	90% {transform: rotate(270deg);}
	94% {transform: rotate(360deg);}
	100% {transfomr:rotate(360deg);}
}

/* Animation Styles */

video{
	animation:spin 104.04s linear infinite;
}
input#rotateVideo:checked~video{
	animation play state:runnning;
}
input#rotateVideo:not(:checked)~video{
	animation-play-state:paused;
}


/* Animation Icon Styles */
input#rotateVideo{
	display:none;
}
input#rotateVideo:not(:checked) + label::after {
    content: "\21bb";
}

input#rotateVideo:checked + label::after {
    content: "\270b";
}
label{
background: rgb(56,87,119);
border-radius:65px;
color:rgba(255,255,255,0.7);
display:block;
font-size:35px;
font-weight:bold;
line-height:50px;
margin:10px auto;
position:relative;
text-align:center;
width:50px;
z-index:2;
}