body {
    font-family: Arial;
    margin: 0;
    background-image:
        repeating-linear-gradient(45deg, white, blanchedalmond 1mm);
}
p { font-size: 14pt; }
ul {
 font-size: 14pt;
 list-style-type: square;
}
header { text-align: right; }
ol {
    list-style-type: upper-roman;
}
ol li::marker{
    color: orange;
}

header h1.header1 {
    font: bold 48pt 'Caviar Dreams';
    text-transform: uppercase;
    letter-spacing: 18pt;
    background:
    padding-box padding-box url(../images/logo.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: 16pt solid rgb(253, 166, 156);
}
div.footer{
    text-align: right;
}
.address{
    background-color: blanchedalmond;
    margin: 0;
    padding: 12pt 12pt 0 0;
    border-bottom: 2pt solid rgb(247, 162, 152);
}
div.container {
    min-width: 768px;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
}

header h1.header2 {
    font: 36pt Verdana;
    letter-spacing: 8pt;
    margin: 0;
    padding: 0 36pt 0 0;
}

p.greeting{font-size: 30pt;}
address{
    text-align: right;
}
li strong{
    font-style: italic;
}
.advertising { margin-left :30pt; }

span {
    font-variant-numeric: oldstyle-nums;
    font-size:large;
}

table.price-list th, table.price-list td {
 border: rgb(14, 11, 13) thin solid;
 padding: 2pt;
}
table.catalog td {
 border-bottom: black thin dotted;
 padding: 3pt;
}
table.catalog img { width: 200px; }

nav {
    background-color: blanchedalmond;
    width: 200px;
    padding: 20px;
    display: table-cell;
}

nav div, nav a {
    font-size: 24pt;
    margin: 10px 0px;
}

nav a {
    color: maroon;
    text-decoration: none;
    display: block;
}

main {
    display: table-cell;
    padding-left: 10px;
    background-color: white;
    
}

table.catalog tr:last-child td {
 border-bottom: none;
}

table.price-list th[colspan=2] {
 text-align: center;
}

table.catalog h3 + p::first-letter {
 font-size: 150%;
 background-color: rgb(243, 213, 189);
}

ul li::marker {
 font-size: 150%;
 color: rgb(242, 199, 158);
}

td:last-child:not(td:only-child) {
 background-color: lightgrey;
}

td[rowspan] {
    font-size: larger;
}

i.icon-drink {
 content: url(../images/drink.jpg);
 height: 1em;
}

.page-title{
    font-size: 28pt;
    text-transform: uppercase;
}

.dish-name{
    letter-spacing: 10pt;
}

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 rgb(230, 210, 174);
    border-radius: 5pt;
    padding: 5pt;
}

input:required + span::after, select:required + span::after {
    font: 24pt monospace;
    content: '*';
    color: red;
    vertical-align: top;
}

input:user-valid, select:user-valid {
    border-color: green;
}
input:user-invalid, select:user-invalid {
    border-color: red;
}

input[type="radio"] {
    width: 2ex;
    height: 2ex;
    accent-color: orange;
    border-radius: 50%;
}

input[type="checkbox"] {
    width: 2ex;
    height: 2ex;
    accent-color: orange;
    border-radius: 0;
}

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

.left-column {
    background-color: blanchedalmond;
}

footer {
    background-color: blanchedalmond;
}

div.footer {
    background-color: rgb(253, 253, 253);
    text-align: right;
}

.container {
    min-width: 768px;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: linear-gradient(
        to right,
        blanchedalmond 0,
        blanchedalmond 240px,
        transparent 240px
    );
}

.container > p,
.container > ul,
.container > hr,
.container > ol,
.container > .advertising,
.container > footer {
    margin-left: 240px;
}