/* ========

FILE DATE 20230918

css file has classes for each page
Layout is in the index order
========= */

/* ******* structure *******
First section global code - body (typography & font, a & li links).

**** handheld:
image; container layout: header, page (eg index), footer, copyright;.
container.items: navbar, p*x*.

**** desktop; media query:
image; body (typography & font, a & [no li] & current-page & hover links for header and footer); navbar (ul & li & a links); dropdown (ul & li links);

page (eg index) layout: header, container.page; container.items: p*x*; container.footer with copoyright.

Further pages need structure visit to update this section.

end media query
== Notes: none ==
*/

/* ********** handheld ********** */

/* =====================
main & body / setup
===================== */

/* =============
typography - handheld
============= */

@import url("https://fonts.googleapis.com/css?family=Pompiere:400,500,600,700,900%display=swap");
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,500,600,700,900%display=swap");
    body {
        font-family: 'Pompiere', sans-serif;
        color: snow;
        font-size: 3rem;
        font-weight: 400;
        /* background-color: #333333; */
        margin: 0 auto;
        max-width: 1200px;
    }

    h1 {
        /* Main Title font size */
        font-size: 4rem;
        font-weight: 700;
        margin: 0;
        text-align: center;
    }

    h2 {
        /* Sub Title font size */
        font-size: 3.25rem;
        margin: 0;
        text-align: center;
    }

    h3 {
        /* Footer Title font size */
        font-size: 2.25rem;
        /* font-weight: 400; */
        margin: 0;
    }

    h4 {
        /* Footer Text font size */
        font-size: 2rem;
        /* font-family: 'Inconsolata', sans-serif; */
        font-weight: 600;
        margin: 0;
        color: darkgray;
    }

    h5 {
        /* copyright font size */
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        color: darkgray;
    }

    a {
        /* color: #5d82b3; */
        color: lightskyblue;
        font-weight: 600;
        text-decoration: none;
        /* border-bottom: 3px solid magenta; */
    }

    .current-page {
        /* Delft Blue */
        /* color: rgb(61, 94, 140); */
        color: rgb(4, 244, 4);
        font-weight: 900;
        box-shadow: 0 2px  rgb(4, 244, 4);
    }

    li {
        padding: 0px 0px 0px 0px;
        list-style: none;
        border: none;
    }

/* ********** handheld ********** */

/* =============
images - handheld
============= */
    .imgLogo {
        display: block;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 600px;
    }



                                                        /* =============
                                                        MEDIA QUERY
                                                        ============= */



/* =============
index desktop media query
============= */

@media (min-width: 981px) {

                    /* =============
                    index images - desktop
                    ============= */
                .imgLogo {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    width: 70%;
                    max-width: 500px;
                }



                /* =============
                typography - desktop
                ============= */

                body {
                    font-size: 1.25rem;
                    font-weight: 400;
                }

                h1 {
                    /* Main Title font size */
                    font-size: 2rem;
                    font-weight: 700;
                    margin: 0;
                    /* color: #5d82b3; maxim blue */
                }

                h2 {
                    /* Sub Title font size */
                    font-size: 1.75rem;
                    text-align: center;
                    margin: 0;
                    /* color: #3d5e8c; delt blue */
                }

                h3 {
                    /* Footer Title font size */
                    font-size: 1.3rem;
                    margin: 0;
                }

                h4 {
                    /* Footer Text font size */
                    font-size: 1.1rem;
                    font-weight: 600;
                    margin: 0;
                    color: lightgray;
                }

                h5 {
                    /* copyright font size */
                    font-size: 0.9rem;
                    font-weight: 700;
                    margin: 0;
                    color: lightgray;
                }

                a {
                    color: lightskyblue;
                    /* color: #3d5e8c; */
                    font-weight: 700;
                    /* text-decoration: none; */
                }

                a:hover {
                    color: rgb(4, 244, 4);
                    font-weight: 500;
                }


                /* =============
                navigation - Desktop (except for current-page, not required for handheld)
                ============= */
                .current-page {
                    /* Delft Blue */
                    /* color: rgb(61, 94, 140); */
                    color: rgb(4, 244, 4);
                    font-weight: 900;
                    box-shadow: 0 2px  rgb(4, 244, 4);
                }

                /* ============
                navbar & hover
                ============ */
                .navbar a:hover,
                .navbar a:focus {
                    color: #5d82b3;
                    font-weight: 900;
                }

                a:hover {
                    color: rgb(4, 244, 4);
                    font-weight: 500;
                }

                /* =============
                footer & links
                ============= */
                .footer a:hover,
                .footer a:focus {
                    color: #5d82b3;
                    font-weight: 900;
                }

}