@font-face {
    font-family: 'Lemon';
    font-weight: bold;
    src: url('fonts/Lemon.ttf')
}
@media print {
    #banner, #topnav {
        display: none !important;
    }
    #content, body {
         background: white !important;
    }
    a {
        color: black !important;
    }
}
@media (max-resolution: 2x) {
    body {
        font-size: 20px;
    }
    #map {
        width: 244px;
        height: 366px;
    }
}
@media (min-resolution: 150dpi), (orientation: portrait) {
    body {
        font-size: 3.5vw;
    }
    #map {
        width: 100%;
        min-height: 50vh;
    }
}

body {
    font-family: Lemon;
    font-weight: normal;
    margin: 0.5em 0;
    background:#c2e8e8;/* springhill afdee4  dynamico  bce0f2; orig c2e8e8;*/
}
#main {
    margin: 0 auto;
    width: 95vw;
    text-align: center;
}
#content {
    background: #ffebaf; /* #ffb1c1 */
    padding: 0.7em;
    flex-wrap: wrap;
}
#footer {
    font-size: 80%;
    text-align: center;
    margin: 1em ;
}
li {
    list-style-type: none;
}
ul {
    padding: 0;
}
hr {
    border: 1px solid black;
}
h2{
    margin: 0 0 0.5em 0;
}
h3 {
    text-decoration: none;
}
h4 {
    padding: 0;
    text-align: center;
    text-decoration: underline;
    font-variant-caps: small-caps;
}
h5{
    text-decoration: underline;
    margin: 0.5em 0.5em;
    padding:0;
}
h4,h5 {
    width: 90%;
    margin: 1em auto;
}
a {
    color: #dd3333;
    text-decoration: none;
}

.section {
    display: flex;
    justify-content: space-around;
    align-items: top;
    flex-wrap: wrap;
    padding-bottom: 1em;
}
sidebar {
    margin: 0.5em;
    margin-top: 2em;
}
sidebar,.attn {
    padding: 0.5em;
    font-size: 80%;
    border: 3px solid black;
}
.attn {
    max-width: 90%;
    margin: auto;
}
.attn dt {
    margin: 0;
    font-size: 125%;
}
.attn dd {
    margin: 0 0 .5em 0;
}
.head {
    font-size: 64%;
    flex: 1 0 60%;
    padding: 1em 4em;
}
sidebar,.placeholder {
    flex: 1 1 30%;
    min-width: 244px;
    max-width: 90%;
}
.flow {
    min-width: 15em;
    flex: 1 1 65%;
}

/* menu stying */
.section>.menu {
    min-width: 12em;
    flex: 1 1 60%;
}
.menu {
    margin: 0.5em 1em 1em 1em;
    width: calc(100% - 2em);
    text-align: left;
    padding-right: 1em;
}
.menu dt{
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
}
.menu .price{
    display: none;
    text-align: right;
}
.menu dd {
    font-family: Times;
    margin-left: 2em;
}
#foodwarning {
    margin: 0;
    font-size: 60%;
}


/* banner styling*/
#banner {
    display: flex;
    justify-content: space-between;
}
.starfield {
    width: 100%;
    position: relative;
}
.star {
    position: absolute;
    height: 7vw;
    width: 7vw;
}
.star:hover{
    display:none;
}
.one.left {
    top: 10%;
    left: 25%;
}
.two.left {
    top: 40%;
    left: 80%;
    transform: scale(.5);
}
.three.left {
    top: 70%;
    left: 20%;
    transform: scale(.7);
}
.one.right {
    top: 10%;
    right: 30%;
}
.two.right {
    top: 40%;
    right: 80%;
    transform: scale(.5);
}
.three.right {
    top: 70%;
    right: 20%;
    transform: scale(.7);
}


a #title{
    color: black;
}

#title {
    min-width: 9em;
    font-size: min(7vw, 40pt);
    text-align: center;
    margin: auto;
    padding: 0;
}
#subt {
    font-size: 50%;
}
#focus{
    margin: 0.1em;
    font-size: 150%;
}
#focus span {
    display: inline-block;
    width: 0.8em;
    margin: -0.02em;
    padding: 0 0.1em;
    border-radius: .1em;
}
#focus .a {
    transform: rotate(8deg);
    background: #ffebaf;
}
#focus .b {
    transform: rotate(-8deg);
    background: #ffb1c1;
}

#topnav {
    padding: 1em;
    margin: 1em auto 0 auto;
    display: flex;
    justify-content: space-around;
    background: #ffb1c1;
}
#topnav li {
    padding: 0.2em;
    border: 2px solid #dd3333;
    background: #ffebaf;
}