body {background-image: url(../misc/splash-bg/opened-up.jpg)}

*{box-sizing: border-box}

h1 {font-family: times new roman,serif; font-style:italic; font-weight:100; color:RED}

h2 {font-family: times new roman,serif; font-style:normal; font-weight:100; color:red}

p{font-family: georgia; font-style: oblique; color:darkseagreen; letter-spacing: 4px}

nav {margin-bottom: 1px; font-family: georgia; color:red}
a:link {text-decoration:none;color:red}
a:hover {text-decoration: underline;color:darkseagreen}
a:visited {text-decoration: none;color:red}

.letter:hover {
    display: inline-block; text-align:center;
    animation-name: wavy;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    position: relative;
    top: 0;
    left: 0;
}

@keyframes wavy {
  0% {scale: 100%; color:red;}
  50% {scale: 200%; color:yellowgreen;}
  100% {scale: 100%; color:blueviolet}
}


table,th,td{border: 2px dashed orange  ; border-collapse: collapse}
    th {text-align: center; font-family: helvetica; font-style:italic; color:black;font-weight:800}
    td {text-align: center; font-family: times new roman, serif; font-style:italic, bold; color:azure}

iframe {border:none; align-items: center}

footer {margin-bottom: 1px; font-family: georgia}
#coolgallery-container {margin-left: auto; margin-right: auto}


/* for only the smallest little boys */
    h1 {font-size:10vw; margin-top: 2px; margin-bottom: 2px; text-align:center}
    h2 {font-size:5vw; margin-top: 2px; margin-bottom: 2px; text-align:center}
    p {text-align: center; font-size: 10px; margin-top: 2px; margin-bottom: 2px}
    #poster {max-width:300px; height: auto}
    nav {text-align: center; font-size: 14px}
    .splashnav {font-size: 20px; padding-bottom: 100px}
    footer {text-align: center; margin-top: 10px; font-size: 14px}
    table {max-width:700px ; margin-top: 40px; margin-left: auto; margin-right: auto}
        th {font-size:15px}
        td {font-size:14px}
    iframe {height: 500px; width: 100%;}
    #splash {max-width: 45%; height: auto}
    #avi {max-width: 90px; height:auto}
    #coolgallery {max-height: 200px; display: block; margin-top: 50px; margin-left: auto; margin-right: auto}
    
/* for big kids only */
@media only screen and (min-width: 600px) {
    h1 {margin-bottom: -20px; text-align:center}
    h2 {margin-bottom: 0px; text-align:center}    
    p {text-align: center; font-size: 12px; padding-left:5px}
    #poster {max-width:450px; height: auto}
    nav {text-align: center; font-size: 17px; padding-left:5px; margin-top:5px}
    table {margin-left: auto; margin-right: auto}
        th {font-size:23px}
        td {font-size:21px}
    footer {text-align: center; margin-top: 10px; font-size: 14px}
    #splash {max-width: 70%; height: auto}
    #coolgallery {max-height: 350px}
}

/* move over kiddies playtime is over */
@media only screen and (min-width: 992px) {
    h1 {text-align: center;}
    p {text-align:center}
    #poster {max-width:600px; height: auto}
    nav {text-align:center}
    table {margin-left: auto; margin-right: auto}
        th {font-size:30px}
        td {font-size:27px}
    footer {align-content: center; margin-top: 50px; margin-bottom: 10px; font-size: 14px}
    #splash {max-width: 100%; height: auto}
    #coolgallery {max-height: 500px}
}