body {background-image: url(../assets/img/speed-1994.jpg)}
 
*{box-sizing: border-box}

    iframe {border:none}
    
    /*see CSS FLEXBOX tutorial for lining up gifs or images in a row*/
    .gifline {display:flex; align-items:center}
    .gifline img {max-width: 25vw;}

    .gifsingle {display:flex; align-items:center}
    .gifsingle img {max-width: 50%;}

    /*"a.header" is the class for the header link (defined as 'a href', etc) in the header_filmclub.html file, which is used across all pages. This is to make sure the header text has the same font and animation across all pages.*/
    a.header {font-family: Gadget, sans-serif; font-style: normal; animation:color-change 40s infinite;}
@keyframes color-change {
        0% {color:red;} 
        10% {color:purple;}
        20% {color: blueviolet}
        30% {color: blue;}
        40% {color: lightseagreen}
        50% {color: green;}
        60% {color: yellowgreen;} 
        70% {color: yellow}
        80% {color: orange;}
        90% {color: orangered}
        100% {color: red}

    }

    img
    p {font-family:georgia; font-style:italic; color:aliceblue; text-shadow: 2px 2px whitesmoke}
    nav, footer {font-family: georgia; font-style: normal; color:slategray}
     
        a:link {text-decoration: none}
        a:visited {text-decoration: none}
        a:hover {text-decoration: underline}
    
    #tvnav { background-image: url(https://filmclub.online/assets/gifs/tvlink_clipstatic.gif);
            -webkit-background-clip: text; 
            color: transparent;}
    #tvnav:hover {text-decoration: underline; color: rgb(90, 0, 90)}
    
/* for only the smallest little boys */
    iframe {height: 60px; width: 100%;}
    .gifline {justify-content:center}
    .gifsingle {justify-content:center;}
    h1 {text-align: center; font-size: 30px; margin-top: 2px; margin-bottom: 2px; letter-spacing:10px}
    p {text-align: center; font-size: 10px; margin-top: 2px; margin-bottom: 2px; letter-spacing:0.5px}
    nav {text-align:center; font-size: 15px; padding-bottom: 15px}
    footer {text-align: center; margin-top: 10px; font-size: 14px}
    #button {margin-top: 5px; margin-bottom: 5px}
    
/* for big kids only */
@media only screen and (min-width: 600px) {
    iframe {height: 87px; width: 100%;}
    .gifline {justify-content:center}
    .gifsingle {justify-content:center}
    h1 {font-size: 55px}
    p {}
    nav {}
    footer {}
}
    
/* move over kiddies playtime is over */
@media only screen and (min-width: 992px) {
    iframe {height: 120px; width: 100%;}
    .gifline {justify-content:left}
    .gifsingle {justify-content:left; max-width:1000px}
    h1 {text-align: left; font-size: 75px; padding-left: 8px}
    p {text-align: left; font-size: 14px; padding-left: 8px}
    nav {text-align:left; padding-left: 15px}
    footer {text-align:left}
}