@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;
}

        header {
            text-align: center;
        }
        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;
        }
        p.greeting {font-size: 18pt;}
        strong {
            font-style: italic;
        }
        footer {
            text-align: right;
        }
        .bar-title {
            font-variant-caps: small-caps;
            font-size: 60pt;
        }
        .time {
            font-variant-numeric: oldstyle-nums;
            font-size: larger;
        }
        table.catalog td {
            border-bottom: black thin dotted;
            padding: 3pt;
        }
        table.catalog img { width: 200px; }
        table.price-list th, table.price-list td {
            border: grey thin solid;
            padding: 2pt;
        }
        table.catalog td {
            border-bottom: black thin dotted;
            padding: 3pt;
        }
        table.catalog img { width: 200px; }
        .chukka {
            background-color: yellow;
        }
        table.price-list thead {
            color: white;
            background-color: grey;
        }
        table.price-list tfoot {
            font-style: italic;
            text-align: right;
        }
        table.price-list td:last-child {
            border: none;
            background-color: lightgrey;
        }
        nav {
            background-color: blanchedalmond;
            float: left;
            width: 200px;
            margin: 10px 0px 10px 10px;
            padding: 20px;
            border-radius: 10px;
        }
        nav div, nav a {
            font-size: 24pt;
            margin: 10px 0px;
        }
        main { margin-left: 300px; }
        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: blanchedalmond;
        }
        ul li::marker {
            font-size: 150%;
            color: orange;
        }
        table.catalog h3 {
            font-family: 'Caviar Dreams';
            font-size: 32pt;
            font-variant-caps: all-small-caps;
        }
        i.icon-drink {
            content: url(../images/drink.jpg);
            font-size: 3px;
            height: 10em;
        }
        h3 {
            letter-spacing: 10pt;
        }

        h3::after {
            content: ":";
        }
        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:
            url("../images/mate.png") no-repeat 20px 650px / 100px auto,
            rgba(255, 255, 255, 0.8);
        }
        footer { text-align: right; }
        footer h2.adress {
            font: italic 18pt 'Caviar Dreams';
            text-transform: uppercase;
            letter-spacing: 2pt;
            background-color: blanchedalmond;
            margin: 0;
            padding: 8pt 4pt 0 0;
            border-bottom: 2pt solid salmon;
        }
        footer h2.book {
            font: 10pt Verdana;
            letter-spacing: 2pt;
            margin: 0;
            padding: 0 36pt 0 0;
        }
        ol.promo {
            list-style-type: upper-roman;
            padding-left: 40px;
        }

        ol.promo li::marker {
            color: orange;
        }
        table.catalog td:first-child {
            width: 33%;
        }
        nav a {
            color: maroon;
            text-decoration: none;
            display: block;
        }
        nav a:active, nav a:hover {
            color: blanchedalmond;
            background-color: maroon;
        }
        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: '*';
            vertical-align: top;
        }
        input:user-valid, select:user-valid {
            border-color: green;
        }
        input:user-invalid, select:user-invalid {
            border-color: red;
        }
        input[type="radio"] {
            accent-color: orange;
            border-radius: 50%;
        }

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