body {
     font-family: Arial;
    margin: 0;
    background-image:
    repeating-linear-gradient(45deg, white, blanchedalmond 1mm);
    width: 100vw;
    height: 100vh;
}
header {
   text-align: right;
   left: 0;
   top: 0;
   right: 0 
}
.table {
 display: table;
 border-collapse: collapse;
 width: 100%;
}
.row { display: table-row; }

table.catalog td:first-child {
    border-bottom: black thin dotted;
    padding: 3pt;
    width: 33%;
}
header { text-align: right; }
table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
}

th {
    color: white;
    background-color: gray;
}
table.catalog h3 + p::first-letter {
 font-size: 150%;
 background-color: blanchedalmond;
}
ul li::marker {
 font-size: 150%;
 color: orange;
}
.price-list td:last-child:not(:only-child) {
    border: none;
    background-color: lightgrey;
}

.price-list td[colspan] {
    font-size: larger;
}
table.catalog tr:last-child td {
 border-bottom: none;
}
@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;
}
header h1.header1 {
 font: bold 48pt 'Caviar Dreams';
 text-transform: uppercase;
 letter-spacing: 18pt;
 background:
        padding-box padding-box url(../images/sushi.dpg.jpg)
                               left / 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;
}
nav {
 background-color: blanchedalmond;
 width: 200px;
 padding: 20px;
 display: table-cell;
 left: 10pt;
 top: 150pt;
 bottom: 100pt;
 border-radius:16px;
}
nav div {
 font-size: 15pt;
 margin: 10px 0px;
}
main {
  display: table-cell;
  padding-left: 20pt;
  left: 240pt;
  top: 150pt;
  right: 0;
  bottom: 100pt;
  overflow-y: auto;
 
}
div.container {
 min-width: 768px;
 max-width: 1024px;
 margin-left: auto;
 margin-right: auto;
 background-color: rgba(255, 255, 255, 0.8);
 display: table-cell;
 position: relative;
 height: 100%;
}
footer {

    background-color: blanchedalmond;
    padding: 20px 15px;
    border-bottom: 12pt solid salmon;
    margin-top: 30px; 
    text-align: right;
    left: 0pt;
    right: 0pt;
    bottom: 0pt; 
}
footer address {
    font-family: "cursive";
    font-style: italic;
    font-size: 16px;
}
nav a {
 color: maroon;
 text-decoration: none;
}
nav a:active, nav a:hover {
 color: blanchedalmond;
 background-color: maroon;
 translate: 10px;
 
}
table.catalog img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    object-position:center ;
}
select {
 font-weight: bold;
 font-style: italic;
 font-variant: small-caps;
}
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;
}
@media screen and (max-width: 400px) {
    nav {
       float: none;
       width: initial;
       margin: initial;
       border-radius: initial;
   }
   main {
        margin-left: initial;
        min-height: initial;
    }
}