body {background-color: #f5f4ef}
 
*{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, 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}

                    /* Comment Box *

                        /* Section Container Positions, Spacing, Utilities */

                        header {
                        text-align: left;
                        margin: 0;
                        }

                        .section {
                        padding:0;
                        width: 100%;
                        margin: ;
                        }

                        .container {
                        width: 100%;
                        margin: 0;
                        padding:0;
                        }

                        .container-row {
                        width: 90%;
                        margin: 0;
                        }

                        /* Button Standard */

                        .btn-main,
                        .btn-light,
                        .btn-dark {
                        display: block;
                        padding: 0.6rem 2rem;
                        margin: 1rem;
                        transition: all 0.1s;
                        border: none;
                        border-radius: 2px;
                        cursor: pointer;
                        }

                        .btn-main {
                        color: whitesmoke;
                        background-color: indigo;
                        }

                        .btn-light {
                        color: #0a2472;
                        background-color: white;
                        }

                        .btn-dark {
                        color: white;
                        background-color: #0a2472;
                        }

                        button[class^='btn-']:hover,
                        a[class^='btn-']:hover,
                        input[class^='btn-']:hover {
                        background-color: palevioletred;
                        color: whitesmoke;
                        font-weight: 100;
                        /*(transform: skewY(20deg) add a little animation on hover to make it more fun)*/
                        }

                        /* Project Starts Here */

                        /* Journal Entry Section */

                        /* Title */

                        .entry-text-title {
                        width: 20em;
                        margin: 1em auto;
                        padding: 1em;
                        border-radius: 2px;
                        border: 2px solid black;
                        background-color: white;
                        font-family: 'Space Mono', monospace;
                        }

                        /*
                        .entry-text-title:focus {
                        outline-color: lightcoral;
                        font-family: 'Space Mono', monospace;
                        color: black;
                        font-size: 1rem;
                        }
                        */

                        .entry-text-title::placeholder {
                        color: gray;
                        font-family: 'Space Mono', monospace;
                        font-size: 1rem;
                        }

                        .entry-text-title::-ms-value {
                        color: black;
                        font-family: 'Space Mono', monospace;
                        font-size: 1rem;
                        }

                        /* Text Box */

                        .container-row-journal {
                        display: flex;
                        justify-content: left;
                        }

                        .entry-form {
                        max-width: 100%;
                        margin: 0 auto;
                        }

                        .journal-label {
                        display: block;
                        line-height: 1.6;
                        font-size: 1.2rem;
                        font-weight: 700;
                        }

                        .entry-text-box {
                        width: 100%;
                        height: 20em;
                        margin: 1em auto;
                        padding: 1em;
                        border-radius: 2px;
                        border: 2px solid black;
                        background-color: white;
                        font-family: 'Space Mono', monospace;
                        }

                        @media (min-width: 769px) {
                        .entry-text-box {
                            width: 40em;
                            height: 20em;
                            margin: 1em auto;
                            padding: 1em;
                            border-radius: 2px;
                            border: 2px solid black;
                            background-color: white;
                            font-family: 'Space Mono', monospace;
                        }
                        }

                        .entry-text-box:focus {
                        outline-color: lightcoral;
                        font-family: 'Space Mono', monospace;
                        color: black;
                        font-size: 1rem;
                        }

                        .entry-text-box::placeholder {
                        color: gray;
                        font-family: 'Space Mono', monospace;
                        font-size: 1rem;
                        }

                        .entry-submit-btn {
                        margin: 0;
                        }

                        /* Journal Results Section */

                        .sectionEntryResults {
                        width: 100%;
                        margin: 0 auto;
                        }

                        .entryResultRow {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        width: 100%;
                        margin: 1em auto; 
                        display: flex;
                        justify-content: left;
                        align-items: left;
                        flex-wrap: wrap;
                        }

                        .single-entry-div {
                        max-width: 100%;

                        margin: 1em auto;
                        padding: 1em 1em;
                        }

                        .single-entry-date {
                        background-color: lightgoldenrodyellow;
                        width: 100%;
                        }

                        .heading-results {
                        text-align: left;
                        text-decoration: underline;
                        text-decoration-color: lightgoldenrodyellow;
}
    
/* 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}
}