body {background-image: url(../assets/gifs/tvbg.gif); ; background-color: rgb(226, 183, 183)}
 
*{box-sizing: border-box}

    iframe {border:none; background-color: transparent}
    
    /*"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 {display: block; margin-left: auto; margin-right: auto; height: auto; padding-top: 100px}

    p, nav, footer {margin-left: auto; margin-right: auto;font-family: georgia; font-style: normal; color: whitesmoke}
     
        a:link {text-decoration: none}
        a:visited {text-decoration: none}
        a:hover {text-decoration: underline}

    div.actbreak {font-family: arial; font-style: normal; font-weight: bold; letter-spacing:3px; color: whitesmoke}
    

/* for only the smallest little boys */
    iframe {display: center; height: 60px; width: 100%;}
    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}
    img {justify-content: center; max-width: 100%}
    div.actbreak {text-align:center; font-size: 30px; margin-top:100px; margin-bottom:100px}
    nav {text-align:center; font-size: 15px; padding-top:25px}
    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 {display: center; height: 87px; width: 100%;}
    h1 {font-size: 55px}
    p {}
    div.actbreak {text-align:center; font-size: 50px; margin-top:140px; margin-bottom:140px}
    img {display: center; justify-content: center; max-width: 100%}
    nav {}
    footer {}
}
    
/* move over kiddies playtime is over */
@media only screen and (min-width: 992px) {
    iframe {display:center; height: 120px; width: 100%;}
    h1 {font-size: 75px}
    p {text-align: center; font-size: 15px; padding-top: 50px}
    img {display:center; justify-content: flex-start; max-width: 100%; height: auto}
    div.actbreak {text-align: left; font-size: 75px; margin-top:250px; margin-bottom:250px; padding-left: 15px}
    nav {text-align:center}
    footer {text-align:center}
}