@charset "utf-8";

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

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

   Filename: cp_media.css

*/

/* Audio and Video Player Styles */

#media {
   margin-top: 30px;
   padding: 10px;
}

#media h1 {
   margin-top: 20px;
   text-align: left;
}

video, audio {
   display: block;
   width: 90%;
   max-width: 500px;
   margin: 15px auto;
}

video {
   border: 4px solid rgb(51, 51, 51);
   box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5);
}

audio {
   height: 35px;
}

/* Track Styles */

label {
   display: block;
   margin: 10px 0px 20px 0px;
   font-size: 1.1em;
}
#rotateVideo {
   display: none;
}

label[for="rotateVideo"] {
   display: inline-block;
   background-color: rgb(56, 87, 119);
   color: white;
   font-size: 28px;
   border-radius: 50%;
   padding: 8px 14px;
   cursor: pointer;
   margin: 10px auto;
}