/*
	Annette Emily Farah
	Fall 2020
	WEB 2150 WW1 - HTML5 Multimedia
	Instructor: Professor Ashley Herbert
    Textbook: HTML5 Media: Integrating Audio and Video with the Web by Shelly Powers

	Assignment 12: Creating Accessible Media
    Adding Captions to a 48-second Godzilla Movie Clip

    Stylesheet for videoClip.html: styles.css
*/


/* ******************************************************
*********************************************************

Styles for Video Clip

*********************************************************
****************************************************** */
html, body {
	margin: 0 auto;
    padding: 0;
    background: #000000;    /* black */
    color: #adadad;         /* light gray */
}

#vid {
	margin: 5% auto;
	padding: 0;
    max-width: 1000px;
    width: 100%;
    /*position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);*/
}

::cue {
    background-image: linear-gradient(to bottom, dimgray, lightgray);
    color: rgb(0, 0, 0);
}

video {
	margin: 0 auto;
	padding: 0;
	width: 100%
    /*position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;*/
}

video::cue {
    margin: nil;
    padding: nil;
    width: nil;
    position: nil;
    background: nil;
    color: nil;
    text-shadow: nil;
    font-size: nil;
    /*font-family: nil;*/
    font-weight: nil;
    text-align: nil;    
}

video:hover {

    /* add glow */
    -moz-box-shadow: 2px 2px 15px #5efd7c;
    -webkit-box-shadow: 2px 2px 15px #5efd7c;
    -o-box-shadow: 2px 2px 15px #5efd7c;
    -ms-box-shadow: 2px 2px 15px #5efd7c;
    box-shadow: 0 0 15px #5efd7c;
}

::cue(b) {
    color: #ffa500;
    background-color: #000000;
    font-size: 3em;
    text-shadow: 2px 2px 8px #ff0000;
    
    /* Didn't work in Firefox */
    -moz-color: #ffa500;
    -moz-background-color: #000000;
    -moz-font-size: 3em;
    -moz-text-shadow: 2px 2px 8px #ff0000;
    
    /* Didn't work to get rid of gray left/right edges */
    background-image: linear-gradient(to bottom, black, black);
    background-blend-mode: darken;    
    background-image: nil;
}


/* ******************************************************
*********************************************************

Styles for other elements: main, h1, h2, footer

*********************************************************
****************************************************** */
main {
    margin: 0 auto;
    padding: 0;
	width: 50%;
}

.headings {
    margin: 0 auto;
    padding: 15px 0 0 0;
    width: 80%;
    text-align: center;
    line-height: .5em;
    color: #727272;
}

.headings:hover {
    color: #5efd7c;
}

h1 {
    font-size: 1.4em;      
}

h2 {
    font-size: 1.1em;
    font-weight: normal;  
}

footer {
    margin: 2% auto;  
    padding: 0;
    width: 80%;
    text-align: center;
    /*position: absolute;
    bottom: 0;*/    
    color: #727272;
}

footer p  {             
    margin: 0 auto;            
    padding: 0;            
    font-size: .8em; 
    text-align: center;
    line-height: 20px;
}

footer:hover {
    color: #5efd7c;
}

a {
    text-decoration: none;
    color: #8b8957;
}

a:hover {
    color: #ffff00;
}