/* Main styles */
    
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
    /* Other styles */
    
    body {
        /* background-image: url("././images/grunge.jpeg"); */
        /* background: rgb(235, 225, 197, 0.6); */
        text-align: center;
        /* background-size: .2em 100%; */
        /* font: 4em/1 Open Sans, Impact; */
        /* text-transform: uppercase; */
        /* margin: 0; */
        background-image: url('images/bg-3.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        /* position: absolute; */
        margin-top: 40px;
        font-size: 1.8em;
    }
    
    #banner:before {
        /* Orange Overlay */
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    #banner * {
        /* Makes elements display above overlay. */
    }
    
    h1 {
        font-family: gopher, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgb(255, 255, 255);
        text-align: left;
        margin-top: 1px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 1px;
    }
    
    .menu h3 {
        /* display: inline-block; */
        text-align: left;
        /* justify-content: space-between; */
        justify-self: end;
        padding-left: 10px;
        width: min-content;
        font-size: 40px;
    }
    
    h3 {
        text-align: left;
        font-family: gopher, sans-serif;
        font-weight: 400;
        font-size: 45px;
        font-style: normal;
        margin-top: 10px;
        /* margin-left: 5px; */
        /* margin-right: 10px; */
        padding-top: 10px;
        margin-bottom: 10px;
    }
    
    p {
        font-family: 'BioRhyme', serif;
        color: rgb(128, 255, 0);
        text-align: left;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    
    p.links {
        color: rgb(255, 255, 255);
        font-size: 100px;
        margin-top: 620px;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .marquee {
        color: rgb(255, 255, 255);
        display: block;
        /* left: 0; */
        position: absolute;
        margin-left: 10px;
        margin-right: 10px;
        /* font-size: 40px; */
    }
    
    a {
        cursor: pointer;
        color: rgb(255, 255, 255);
        text-decoration: underline;
        z-index: 5;
        position: relative;
        transition: all 0.2s ease-out;
    }
    
    a:hover {
        color: darkorange;
    }
    
    div>h1.link>a {
        display: inline-block;
        position: relative;
        z-index: 5;
    }
    
    div>h3.link>a {
        display: inline-block;
        position: relative;
        z-index: 5;
    }
    
    .bg1:hover {
        font-size: 55px;
        color: darkorange;
    }
    
    .bg2:hover {
        font-size: 55px;
        color: darkorange;
    }
    
    .bg3:hover {
        font-size: 55px;
        color: darkorange;
    }
    
    .bg4:hover {
        font-size: 55px;
        color: darkorange;
    }
    
    .bg5:hover {
        font-size: 55px;
        color: darkorange;
    }
    
    .bg6:hover {
        font-size: 55px;
        color: darkorange;
    }
    
    .bg1:hover+.background {
        background: url("././images/dog-1.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        font-size: 14px;
    }
    
    .bg2:hover+.background {
        background: url("././images/cat-1.jpg");
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-size: cover;
    }
    
    .bg3:hover+.background {
        background: green;
        background: url("././images/rabbits-1.jpg");
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-size: cover;
    }
    
    .bg4:hover+.background {
        background: green;
        background: url("././images/dog-4.jpg");
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-size: cover;
    }
    
    .bg5:hover+.background {
        background: green;
        background: url("././images/cat-2.jpg");
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-size: cover;
    }
    
    .bg6:hover+.background {
        background: green;
        background: url("././images/phone.jpg");
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-size: cover;
    }
    
    .background {
        background: transparent;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    
    .marquee {
        font-size: 30px;
        padding-top: 1%;
        padding-right: 1%;
        text-transform: none;
    }
    
    header {
        font-family: 'Gravitas One', cursive;
        text-align: left;
        margin: 2.5em auto;
        height: 2.6em;
        overflow: hidden;
        width: 100%;
    }
    
    ul,
    li {
        color: white;
        height: 3.5em;
        margin: 0px;
        /* margin-top: 0.2em; */
        padding: 0px;
        width: 100%;
    }
    
    li {
        list-style-type: none;
        /* margin: 0px 0 1px 0; */
        height: 1em !important;
        /* padding: 0px 0 0px 0; */
        font-size: 3em;
        text-transform: uppercase;
        width: 100%;
    }
    
    .t {
        animation-name: titleflip;
        animation: titleflip -10s ease-in-out infinite;
        -webkit-animation-name: titleflip;
        -webkit-animation: titleflip 12s ease-in-out infinite;
    }
    
    @-webkit-keyframes titleflip {
        0%,
        20% {
            -webkit-transform: translate(0px, -12.5em);
            -moz-transform: translate(0px, -12.5em);
        }
        20%,
        40% {
            -webkit-transform: translate(0px, -9.375em);
            -moz-transform: translate(0px, -9.375em);
        }
        40%,
        60% {
            -webkit-transform: translate(0px, -6.44em);
            -moz-transform: translate(0px, -6.44em);
        }
        60%,
        80% {
            -webkit-transform: translate(10px, -3.44em);
            -moz-transform: translate(0px, -3.44em);
        }
        80%,
        100% {
            -webkit-transform: translate(0px, -0.315em);
            -moz-transform: translate(0px, -0.315em);
        }
        100%,
        0% {
            -webkit-transform: translate(0px, -12.5em);
            -moz-transform: translate(0px, -12.5em);
        }
    }
    
    @media only screen and (max-width: 700px) {
        body {
            background-color: lightblue;
        }
        .bg1,
        .bg2,
        .bg3,
        .bg4,
        .bg5,
        {
            background: none;
        }
        .background {
            background: transparent;
            position: fixed;
            visibility: hidden;
        }
        /* side scroll  */