body,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: "Oswald", sans-serif;
            }

            body,
            html {
                background-color: #fff;
                height: 100%;
                color: #8dcacb;
                font-size: 1.2rem;
                line-height: 1.4;
            }

            #myNavbar {
                 font-size: 1rem;   
                 font-weight:900;     
            }

            /* Create a Parallax Effect */
            .bgimg-1,
            .bgimg-2,
            .bgimg-3,
            .bgimg-4,
            .bgimg-5 {
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }

             .w3-wide {
                letter-spacing: 10px;
            }

            #intro_container {
                width: 700px;
            }

            .video1 {
              width: 100%;
              height: auto;
                
            }
            
            .cooper {
                font-family: 'cooperblack';
                /* font-size: 2rem;
                line-height: 1.2em; */
            }
            h1.cooper {
                font-size: 1.4rem;
                line-height: 1.3em;

            }
            h1.title {
               background-color: #fff;

            }
            h2 {
                font-size: 0.9rem;
                line-height: 1.4em;
                color:#fff;
            }
            h1.smaller {
                font-size: 0.5rem;
                line-height: 1.3em;
                background-color: #fff;
              
            }
            h3.cooper {
                font-size: 1.2rem;
                line-height: 1.2em;
            }

           .style-white {
                color: #fff;
            }
            .style-dark_teal {
                color: #8dcacb;
            }
             .style-light_teal {
                color: #d4f5ee;
            }
            .style-light_pink {
                color: #ffd9c6;
            }
            .style-dark_pink {
                color: #fea789;
            }
            .bg-bright_pink {
                background-color: #f90498;
            }
            .style-bright_pink {
                color: #f90498;
            }
            .style-dark_blue {
                color: #023e74;
            }
            .style-gold {
                color: #EFBF04;
            }
            .bg-dark_pink {
                background-color: #fea789;
            }
            .bg-light_pink {
                background-color: #ffd9c6;
            }
            .bg-dark_teal {
                background-color: #8dcacb;
            }
            .bg-light_teal {
                background-color: #d4f5ee;
            }
            .bg-dark_blue {
                background-color: #003e78;
            }

             .bg-red {
                background-color: #F99B7C;
            }

            .hero-shadow {
                -webkit-box-shadow: 0px 15px 54px -1px rgba(0,0,0,0.45);
                -moz-box-shadow: 0px 15px 54px -1px rgba(0,0,0,0.45);
                box-shadow: 0px 15px 54px -1px rgba(0,0,0,0.45);
                margin:0 0 50px 0;
            }

            /* First image (Logo. Full height) */
            .bgimg-1 {
                background-image: url('./images/shrine.jpg');
                min-height: 100%;
            }
            /* .bgimg-1 {
                background-image: url('./images/bg-intro.jpg');
                min-height: 100%;
            } */

             /* Second image (Portfolio) */
            .bgimg-2 {
                background-image: url("./images/studio.jpg");
                min-height: 400px;
            }

            /* Third image (Contact) */
            .bgimg-3 {
                background-image: url("./images/flyers.jpg");
                min-height: 400px;
            } 
            
            /* Fourth image (Contact) */
            .bgimg-4 {
                background-image: url("./images/lavender.jpg");
                min-height: 400px;
            }

            /* Fourth image (Contact) */
            .bgimg-5 {
                background-image: url("./images/contact.jpg");
                min-height: 400px;
            }

            .section_header{
                text-shadow: 2px 3px 9px rgba(0,0,0,0.2);
            }

            .w3-wide {
                letter-spacing: 10px;
            }

            .w3-hover-color {
                color:#003e78;
            }

            .w3-hover-opacity {
                cursor: pointer;
            }

             .square_container {
                
                aspect-ratio: 1/1;
                position: relative;
            }
            .square_container h2 {
                text-align: center;
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .square_container p {
                text-align: center;
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

             .google-map {
                padding-bottom: 50%;
                position: relative;
            }

            .google-map iframe {
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                position: absolute;
            }

             /* Turn off parallax scrolling for tablets and phones */
             @media only screen and (max-device-width: 1600px) {

                .bgimg-1,
                .bgimg-2,
                .bgimg-3,
                .bgimg-4,
                .bgimg-5  {
                    background-attachment: scroll;
                    min-height: 550px;
                }
                .cooper {
                    font-family: 'cooperblack';
                    font-size: 1.4rem;
                    line-height: 1.2em;
                }
                 h1.cooper {
                    font-size: 1.2rem;
                    line-height: 1.2em;
                }
                 h2.cooper {
                    font-size: 1.2rem;
                    line-height: 1.2em;
                }
                 h3.cooper {
                    font-size: 0.8rem;
                    line-height: 1.4em;
                    letter-spacing:2px;
                }
                #intro_container {
                    width: 600px;
                }
            }
             @media only screen and (max-width: 600px) {

                .bgimg-1 {
                    background-attachment: scroll;
                    min-height: 450px;
                }
                .bgimg-2,
                .bgimg-3,
                .bgimg-4,
                .bgimg-5  {
                    background-attachment: scroll;
                    min-height: 200px;
                }
                .cooper {
                    font-family: 'cooperblack';
                    font-size: 0.8rem;
                    line-height: 1.2em;
                }
                 h1.cooper {
                    font-size: 1.2rem;
                    line-height: 1.2em;
                }
                h2.cooper {
                    font-size: 1.0rem;
                    line-height: 1.2em;
                }
                 h3.cooper {
                    font-size: 0.8rem;
                    line-height: 1.4em;
                    letter-spacing:2px;
                }

                #intro_container {
                    width: 350px;
                }


               
            }


            /* Small devices (portrait tablets and large phones, 600px and up) */
            @media only screen and (min-width: 600px) {
                


            }

            /* Medium devices (landscape tablets, 768px and up) */
            @media only screen and (min-width: 768px) {
                


            }

            /* Large devices (laptops/desktops, 992px and up) */
            @media only screen and (min-width: 992px) {



            }

            /* Extra large devices (large laptops and desktops, 1200px and up) */
            @media only screen and (min-width: 1200px) {...}