@font-face {
 font-family: 'Caviar Dreams';
 src: url(../fonts/CaviarDreams.woff);
}
@font-face {
 font-family: 'Caviar Dreams';
 src: url(../fonts/CaviarDreams_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;
 letter-spacing: 10pt;
}
div.container {
 min-width: 768px;
 max-width: 1024px;
 margin-left: auto;
 margin-right: auto;
background-color: rgba(255, 255, 255, 0.8);
position: relative;
height: 100%;
}
body { 
  font-family: Arial;
  margin: 0;
  background-image:
 repeating-linear-gradient(45deg, white, blanchedalmond 1mm);
 width: 100vw;
 height: 100vh;
}
fieldset { width: 200px; }
header {
 text-align: right;
 left: 0;
 top: 0;
 right: 0;
}

header h1.header1 {
 font: bold 48pt 'Caviar Dreams';
 text-transform: uppercase;
 letter-spacing: 18pt;
 margin: 0;
 padding: 12pt 8pt 0 0;
 border-bottom: 12pt solid salmon;
 background:
  padding-box padding-box url(../images/sushi.jpg)
                          0px / auto 80% no-repeat,
  padding-box padding-box url(../images/rolls.jpg)
                          160px / auto 80% no-repeat,
  radial-gradient(circle farthest-side at right,
 blanchedalmond, blanchedalmond 67%,white 90%);
}
header h1.header2 {
 font: 36pt Verdana;
 letter-spacing: 8pt;
 margin: 0;
 padding: 0 36pt 0 0;
}
footer address.address1 {
  font: bold 20pt 'Caviar Dreams';
 background-color: blanchedalmond;
 margin: 0;
 padding: 12pt 8pt 0 0;
 border-bottom: 5pt solid salmon;
}
p { font-size: 14pt; }
ul {
 font-size: 14pt;
 list-style-type: square;
}

li img {width:64px;}
.advertising { margin-left :30pt; }
footer { font-size: 12pt; margin-top: 2pt; margin-bottom: 2pt;
 text-align: right;
 left: 0pt;
 right: 0pt;
 bottom: 0pt;
}

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

table.price-list th, table.price-list td {
    border: grey thin solid;
 padding: 2pt;
}
table.price-list th[colspan=2] {
 text-align: center;
}
table.price-list tr:first-child th {
  color: white;
  background-color: gray;
} 
table.price-list td:last-child:not(:only-child) { 
  border: none;
  background-color: lightgray;
}
  table.catalog td {
 border-bottom: black thin dotted;
 padding: 3pt;
}
table.catalog tr:last-child td {
 border-bottom: none;
width: 33%;
max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}
table.catalog img { width: 200px; }

nav {
 background-color: blanchedalmond;
 width: 240px;
 padding: 20px;
 display: table-cell;
 left: 10pt;
 top: 150pt;
 bottom: 100pt
}
nav div, nav a {
 font-size: 24pt;
 margin: 10px 0px;
 display: block;
 translate: 10px;
}
nav img {margin:24px 0 24px 0;}
main { 
display: table-cell; 
padding-left:  20pt;
min-height: 600px;
left: 240pt;
 top: 150pt;
 right: 0;
 bottom: 100pt;
 overflow-y: auto;
}
table.catalog h3 + p::first-letter {
 font-size: 150%;
 background-color: blanchedalmond;}
 p::first-letter {
 vertical-align: top;
}
ul li::marker {
 font-size: 150%;
 color: orange;
}
i.icon-drink {
 content: url(../images/drink.jpg);
 height: 1em;
}
ol {
 list-style-type: upper-roman;
}
ol li::marker{
color: orange;
}
nav a {
 color: maroon;
 text-decoration: none;
 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;
 transition-property: color, background-color, translate;
 transition-duration: 1s;
}
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 {
 appearance: none;
 width: 1em;
 height: 1em;
 background-color: white;
 margin-right: 8pt;
 vertical-align: middle;
border-radius: 0%;
}
.super-checkbox:checked {
 background-color: orange;}

.super-checkbox1 {
 appearance: none;
 width: 1em;
 height: 1em;
 background-color: white;
 margin-right: 8pt;
 vertical-align: middle;
border-radius: 50%;
}
.super-checkbox1:checked {
 background-color: orange;}

 img {
left: auto;}

.table {
 display: table;
 border-collapse: collapse;
 width: 100%;
}
.row { display: table-row; }