@media screen {
    body{
        background-color: #ccc;
    }
}

/* Style rules for mobile viewport */


 header{
            top: 0;
            background: linear-gradient(to right, #9c0000, #ffe600);
            position: -webkit-sticky;
            position: sticky;
            height: 80px;
        }

        header img{
            margin: 0 auto;
        }

        main{
            background: linear-gradient(to right, #00aaff, #ffcc00);
            padding: 2%;
            font-size: 1.15em;
            font-family: "Numans", sans-serif;
        }

        .mobile h3{
            text-shadow: 5px 5px 8px #ccc;
        }

        article{
            padding: 2%;
        }

        article h3{
            text-align: center;
        }

        article img{
            margin: 0 auto;
        }

        article ul{
            margin-left: 10%;
        }

        article:nth-of-type(2){
            background-color: rgba(204, 204, 204, 0.3);
        }

        .frame{
            position: relative;
            max-width: 450px;
            margin: 2% auto;
        }

        .pic-text{
            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            width: 100%;
            padding: 20px;
            text-align: center;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 1.5em;
            font-weight: bold;
        }

        .tel-link{
            background-color:chocolate;
            padding: 2%;
            margin: 0 auto;
            width: 80%;
            text-align: center;
            border-radius: 5px;
        }

        .tel-link a{
            color: #000000;
            text-decoration: none;
            font-size: 1.5em;
            display: block;
        }

        .hours{
            margin-left: 10%;
        }

        h1{
            text-align: center;
        }

        ul{
            list-style: square;
        }

        #Racoons{
            margin: 0 2%;
        }

        .round {
            border-radius: 8px;
        }

        .map{
            border: 2px soild #000;
            width: 95%;
            height: 50%;
        }

        #form {
            margin-top: 2%;
            background-color: #f2f2f2;
            padding: 2%;
        }

        #form h2{
            text-align: center;
        }

         img, video{
    max-width: 100%;
    display: block;
}

    video {
    margin: 0 auto 4%;
}

        /*Style rule for form elements*/
        fieldset, input, select, textarea{
            margin-bottom: 2%;
        }

        fieldset legend {
            font-weight: bold;
            font-size: 1.25em;
        }

        label {
            display: block;
            padding-top: 3%;
        }

        form #submit{
            margin: 0 auto;
            border: none;
            display: block;
            padding: 2%;
            background-color: #b3b3b3;
            font-size: 1em;
            border-radius: 10px;
        }

/* Style rules for hamburger menu */
.mobile-nav a{
    color: #fff;
    font-family: 'Francois One', sans-serif;
    text-align: center;
    font-size: 2em;
    text-decoration: none;
    padding: 3%;
    display: block;
}

.mobile-nav a.menu-con{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

/* nav li a{
    display: block;
    color: #fff;
    padding: 0.5em 1em;
    text-decoration: none;
} */

/* show mobile class, hide tablet-desktop class and menu-links id */
.mobile {
display: block;
}
    img, video{
    max-width: 100%;
    display: block;
}

    video {
    margin: 0 auto 4%;
}