@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;
}
* { box-sizing: border-box; }

body { font-family: Arial; 
     background-image: repeating-linear-gradient(45deg, white, blanchedalmond 1mm);
}
p { font-size: 14pt; }
ul, ol { font-size: 14pt; }
ul { list-style-type: square; }

.picture { text-align: center; }
.picture img { width: 67%; }

.time { font-variant-numeric: oldstyle-nums; font-size: larger; }

header { text-align: center; }
footer { text-align: right; }
footer address {
    font-family:'Caviar Dreams';
    font-size: 20pt;
    font-weight: bold;
    font-style: italic;
    background-color: blanchedalmond;
    border-bottom: 3pt solid salmon;
    margin: 0;
    padding: 12pt 8pt 12pt 0;
}
.advertising { margin-left: 30pt; }
.advertising p { font-size: 12pt; margin-top: 2pt; margin-bottom: 2pt; }

p.greeting { font-size: 24pt; }
address { text-align: right; }
ul li strong { font-style: italic; }

nav {
    background-color:blanchedalmond;
    padding: 15px;
    width: 201px;
    line-height: 1.2;
    display: table-cell;
}
main {
    min-height: 800px;
    display: table-cell;
    padding-left: 20px;
}
.current {
    color: black;
    text-decoration: none;
}

table.price-list { border-collapse: collapse; }
table.price-list th, table.price-list td { border: grey thin solid; padding: 2pt; }
table.price-list thead th { color: white; background-color: grey; }
table.price-list tfoot td { font-style: italic; text-align: right; }
table.price-list td:last-child:not(td:only-child) {
    border: hidden;
    background-color: lightgrey;
}
table.price-list td[rowspan] {
    font-size: larger;
}

table.catalog img { width: 200px; }
table.catalog td {
    border-bottom: grey thin solid;
    padding: 10px;
}
table.catalog tr:last-child td {
    border-bottom: none;
}
ul li::marker {
    font-size: 150%;
    color: orange;
}
table.catalog h3 + p::first-letter {
    font-size: 150%;
    background-color: blanchedalmond;
}
table.catalog h3 {
    font-family: 'Caviar Dreams';
    font-size: 32pt;
    font-variant-caps: all-small-caps;
}
i.icon-drink {
    content: url(../images/drink.jpg);
    height: 1em;
}
h2 {
     font-size: 28pt;
    text-transform: uppercase;
}

table.catalog h3 {
    letter-spacing: 10pt;
}

table.catalog h3::after {
    content: ":";
}

table.catalog h3 + p::first-letter {
    vertical-align: top;
}
header { text-align: right; }
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: 
        content-box content-box url(../images/mate.png) left bottom 66px / 140px no-repeat, 
        rgba(255, 255, 255, 0.8);
}
ol {
    list-style-type: upper-roman;
}
ol li::marker {
    color: orange;
}
table.catalog td:first-child {
    width: 33%;
}
nav a {
    color: maroon;
    text-decoration: none;
}
nav a:active, nav a:hover {
    color: blanchedalmond;
    background-color: maroon;
}
table.catalog img {
    width: 100%;
    height: 100%;
    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: '*';
}
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 {
    appearance: none;
    width: 1ex;
    height: 1ex;
    background-color: white;
    border: none;
    padding: 0;
    outline: solid black;
    outline-offset: 2pt;
    margin-right: 8pt;
    vertical-align: middle;
    border-radius: 0;
}
.super-checkbox:checked {
    background-color: orange;
}

input[type="radio"] {
    appearance: none;
    width: 1ex;
    height: 1ex;
    background-color: white;
    border: none;
    padding: 0;
    outline: solid black;
    outline-offset: 2pt;
    margin-right: 8pt;
    vertical-align: middle;
    border-radius: 50%;
}
input[type="radio"]:checked {
    background-color: orange;
}
nav div, nav a {
    font-size: 24pt;
    margin: 0;
}
nav a {
    color: maroon;
    text-decoration: none;
    display: block;
}
.table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.row { 
    display: table-row; 
}