@media (min-width:576px) and (max-width:768px){
        #hero-area{
            display: block;
            position:relative;
            height:18vh;
            width:95vw;
            left:0;
            padding:0;
            margin:0 auto 0 auto;
        }
        #hero-area .moon-logo{
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            top:1vh;
            width:45%;
            margin:0 auto;
        }
    .hero-logo-bottom-spacer {margin-bottom: 7rem!important;}
        .navbar{
            margin:10vh auto 0 auto;
            width:98%;
        }
        @media only screen and (resolution >= 2dppx){
            .navbar{
            margin:0 auto;
            width:98%;
            }
        }
        .navbar-brand img {
            height: 6vw;
            margin-right: 10px;
        }
        .custom-toggler.navbar-toggler{
            position: relative;
            top: 0;        
            padding:0 2px 1px 2px;
        }
        .sticky.is-sticky{
            top:0vh;
            width:95vw;
    }
        #about{
            display: block;
            position: relative;
            margin:6vh auto 0vh auto;
            width:100%;
        }
        #about .section-column-content{
            margin:4em auto 0vh auto;
            padding:1em 2vw;
        }
        #about .section-text-about{
            padding:0 5px 0 5px;
            font-weight:initial;
            text-align:center;
        }
        #about .quote{
            margin-bottom: 0rem;
            margin-top: -3vh;
        }
        @media only screen and (resolution >= 3dppx){
            #hero-area .moon-logo{
                position:absolute;
                left:0;
                right:0;
                bottom:0;
                top:4vh;
                width:35vw;
                margin:0 auto;
                }
            #hero-area .moon-logo:before{
                background:rgba(0,0,0,.8);
                }
            .navbar{
                top:15vh;
                margin:0 auto;
                width:98%;
                }
            #about .section-column-content{
                top:-15vh;
                margin:4em auto 10em auto;
            }
        }
        #menu{
            display: block;
            position: relative;
            top:30vh;
            margin:6vh auto 8vh auto;
            width:100%;
        }
        #menu:target::before{
            content:"";
            display:block;
            position:relative;
            height:142px;
            min-height: 100px;
            overflow: hidden;
            margin-top:0vh;
            visibility:hidden;
        }
        #menu .section-column-content{
            margin:0 auto 10vh auto;
            padding:20px 2vw;
            top:-10em;
        }
        #menu .quote{
            font-size: clamp(1.3rem, 1.2284rem + 0.3181vw, 1.6rem);
            font-weight:initial;
            font-style:italic;
            background:0 0;
            text-align:center;
            margin-bottom: 0rem;
            margin-top: 2em;
        }
        #menu .menu-cards-frame {
            display:block;
            position: relative;
            overflow: hidden;
            padding:1vw 1vw;
        }
        #burgers .toppings {
            background-color: var(--moon-blue-bg-color);
            border-style:groove;
            border-radius:16px;
            padding:3%;
            margin:1vh 0 0 0;
        }
        #pizza .toppings {
            border-style:groove;
            border-radius:16px;
            padding:3%;
            margin:1vh 0 0 0;
        }
        #contact{
            display: block;
            position: relative;
            margin:6vh auto 8vh auto;
            width:100%;
        }
        #contact:target::before{
            content:"";
            display:block;
            position:relative;
            height:7vh;
            margin-top:16vh;
            visibility:hidden;
        }
        #contact .accent-image-pos-top {
            position:relative;
            left:auto;
            right:auto;
            max-width: 21%;
            height: auto;
            display: block;
            margin: auto;
        }
        #contact .logo-img {
            max-width: 30%;
            height: auto; 
            display: block;
            margin: 0 auto 0 auto;
            padding: 0 0 0 0;
            top:4vh;
            border:5px outset var(--moon-gold-color);
        }
        #contact .section-text{
            position:relative;
            white-space: pre-line;
            left:auto;
            right:auto;
            padding:0 5px 0 5px;
        }
        #contact .section-column-content{
            margin:0 auto 1vh auto;
            padding:20px 2vw;
            top:8vh;
        }
        #contact .quote{
            margin-bottom: 0rem;
        }
        #carouselfadehome .center-img{
            position:relative;
            width:25vw;
            border-style:solid;
            border-width:2px;
            border-radius:1rem;
            border-color:var(--moon-blue-color);
            margin: 0 auto 0 auto;
        }
        #carouselfadehome{
            position:relative;
            min-width:225px;
            min-height: 300px;
            margin-top: 0vh;
            margin-bottom: -10vh;
        }
        #carousel .car-img-1 {margin-top:0;}
        #carousel .car-img-2 {margin-top:0;}
        #carousel .car-img-3 {margin-top:0;}
        #carousel .car-img-4 {margin-top:0;}
        #carousel .car-img-5 {margin-top:0;}
        #carousel .car-img-6 {margin-top:0;}
        #carousel .car-img-7 {margin-top:0;}
        #carousel .car-img-8 {margin-top:0;}
        #carousel .car-img-9 {margin-top:0;}
        #carousel .car-img-10{margin-top:0;}
        #carousel .car-img-11{margin-top:0;}
        #carousel .car-img-12{margin-top:0;}
        #carousel .car-img-13{margin-top:0;}
        #carousel .car-img-14{margin-top:0;}
        #carousel .section-column-content{
            margin:3vh 0 0 0;
            padding:0 0 2vh 0;
            border-style:solid;
            border-width:2px;
            border-radius:1rem;
            border-color:var(--moon-blue-color);
        }
        .footer {
            position: relative;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            margin-top: 2vh;
        }
}