body { font-family: Arial;
        margin: 0;
        background-image:
            repeating-linear-gradient(45deg, white, blanchedalmond 1mm);
        width: 100vw;
        height: 100vh;
     }
p { font-size: 14pt; }
ul {
    font-size: 14pt;
    list-style-type: square;
}
p.greeting { font-size: 24pt; }
ul li strong {
    font-style: italic;
}
.advertising { margin-left :30pt; }
.advertising p {
    font-size: 12pt;
    margin-top: 2pt;
    margin-bottom: 2pt;
}
header {
    text-align: right;
    left: 0;
    top: 0;
    right: 0;
}
footer {
text-align: right;
left: 0pt;
right: 0pt;
bottom: 0pt;
}
.time {
    font-variant-numeric: oldstyle-nums;
    font-size: larger;
}
table.price-list th, table.price-list td:last-child {
    background-color: lightgray;
    border: grey thin solid;
    padding: 2pt;
}
table.catalog td {
border-bottom: black thin dotted;
padding: 3pt;
}
table.catalog img {width: 200px;}
thead { 
    color: white;
    background-color: grey;
}
nav {
background-color: blanchedalmond;
width: 200px;
padding: 20px;
border-radius: 10px;
left: 10pt;
top: 150pt;
bottom: 100pt;
display: table-cell;
}
nav div, nav a {
font-size: 24pt;
margin: 10px 0px;
}
main { 
    display: table-cell;
    padding-left: 20pt;
    left: 240pt;
    top: 150pt;
    right: 0;
    bottom: 100pt;
    overflow-y: auto;
 }
.addenda {
    height: 100px;
    width: 300px;
}
table.catalog h3 + p::first-letter {
font-size: 150%;
background-color: blanchedalmond;
vertical-align: top;
}
ul li::marker {
font-size: 150%;
color: orange;
}
@font-face {
font-family: 'Caviar Dreams';
src: url(../fonts/CaviarDreams.woff);
}
@font-face {
font-family: 'Caviar Dreams';
src: url(../fonts/Caviar_Dreams_Bold.woff);
font-weight: bold;
}
@font-face {
font-family: 'Caviar Dreams';
src: url(../fonts/CaviarDreams_Italic.woff);
font-style: italic;
}
@font-face {
font-family: 'Caviar Dreams';
src: url(../fonts/CaviarDreams_BoldItalic.woff);
font-weight: bold;
font-style: italic;
}
table.catalog h3 {
    font-family: 'Caviar Dreams';
    font-size: 32pt;
    font-variant-caps: all-small-caps;
}
h2 {
    font-size: 28pt;
    text-transform: uppercase;
}
i.icon-drink {
content: url(../images/drink.jpg);
height: 1em;
}
h3 {
    letter-spacing: 10pt;
}
h3::after {
    content: ":";
}
header h1.header1 {
font: bold 48pt 'Caviar Dreams';
text-transform: uppercase;
letter-spacing: 18pt;
background:
    padding-box padding-box url(../images/sushi.jpg)
        left / auto 80% no-repeat,
    padding-box padding-box url(../images/rolls.png)
        160px / auto 80% no-repeat,
    radial-gradient(circle farthest-side at right,
        blanchedalmond, blanchedalmond 67%,
        white 90%);
margin: 0;
padding: 12pt 8pt 0 0;
border-bottom: 12pt solid salmon;
}
header h1.header2 {
font: 36pt Verdana;
letter-spacing: 8pt;
margin: 0;
padding: 0 36pt 0 0;
}
div.container {
min-width: 768px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
background: rgba(255, 255, 255, 0.8);
position: relative;
height: 100%;
}
address.zzz {
font: bold 20pt 'Caviar Dreams';
background-color: blanchedalmond;
border-bottom: 2pt solid salmon;
}
p.zzz2 {
    padding: 0 30pt 0 0;
    font: 13pt Verdana;
}
ol {
list-style-type: upper-roman;
}
ol li::marker {
    color: orange
}
.catalog td::first-child {
    width: 33%;
}
nav a {
color: maroon;
text-decoration: none;
display: block;
transition-property: color, background-color, translate;
transition-duration: 1.5s, 1.5s, 2s;
transition-delay: .5s, .5s, 0;
}
nav a:active, nav a:hover {
color: blanchedalmond;
background-color: maroon;
translate: 10px;
transition-property: color, background-color, translate;
transition-duration: 1s;
}
img {
    object-fit: contain;
}
form {
width: min-content;
padding: 0 10pt;
margin-bottom: 10pt;
border: thin dotted orange;
border-radius: 5pt;
}
input, select, textarea {
font: 12pt monospace;
border: medium solid orange;
border-radius: 5pt;
padding: 5pt;
}
input:required + span::after, select:required + span::after {
font: 24pt monospace;
content: '*';
vertical-align: top;
}
input:user-valid, select:user-valid {
border-color: green;
}
input:user-invalid, select:user-invalid {
border-color: red;
}
.super-checkbox:checked {
background-color: orange;
}
.super-checkbox {
appearance: none;
width: 1em;
height: 1em;
background-color: white;
outline: solid orange;
outline-offset: 2pt;
margin-right: 8pt;
vertical-align: middle;
border-radius: 0;
}
.super-checkbox {
width: min-content;
padding: 0 3pt;
margin-bottom: 5pt;
border: thin dotted orange;
border-radius: 0;
}
.radio {
width: min-content;
padding: 0 3pt;
margin-bottom: 5pt;
border: thin dotted orange;
border-radius: 0;
}
.table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.row { display: table-row; }
header, nav, main, footer { position: absolute; }
.mate {
    width: 170px;
}
@media screen and (max-width: 400px) {
    nav {
        float: none;
        width: initial;
        margin: initial;
        border-radius: initial;
    }
    main {
        margin-left: initial;
        min-height: initial;
    }
    div.container {
        min-width: initial;
        max-width: initial;
        width: 100vw;
        background: rgba(255, 255, 255, 0.8);
    }
     header h1.header1 {
        font: bold 42pt 'Caviar Dreams';
        letter-spacing: initial;
        background:
            radial-gradient(circle farthest-side at right,
                            blanchedalmond, blanchedalmond 67%,
                            white 90%);
    }
    header h1.header2 {
        font: 32pt Verdana;
        letter-spacing: initial;
    }
     table.catalog, table.catalog tr, table.catalog tr td {
        display: block;
    }
    table.catalog tr td:first-of-type {
        width: initial;
    }
    table.catalog {
        img {height: 150px;}
        h3 {font-size: 38pt;}
    }
}
@media print {
    body, header, table, nav, main {
        background: none !important;
        background-image: none !important;
        background-color: none !important;
        border-bottom: white !important;
    }
    nav {
        display: none
    }
    main {
        margin-left: 0;
        padding-left: 0;
    }
    footer {
        break-before: auto;
    }
}