body {background-color: #000000}
 
*{box-sizing: border-box}

    iframe {border:none}
    
    h1 {font-family: Gadget, sans-serif; font-style: normal; color: red;}

    img {display: block; height: auto}

    p, nav, footer {font-family: georgia; font-style: normal; color:slategrey}
     
        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: black}

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