@font-face {
    font-family: 'Caviar Dreams';
    src: url(../fonts/CaviarDreams.ttf);
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url(../fonts/Caviar_Dreams_Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url(../fonts/CaviarDreams_Italic.ttf);
    font-style: italic;
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url(../fonts/CaviarDreams_BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

body {
    font-family: Arial;
    margin: 0;
    background-image: repeating-linear-gradient(45deg, white, blanchedalmond 1mm);
}

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.jpg) 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.jpg) 20px 540px / 200px auto no-repeat,
        rgba(255, 255, 255, 0.8);
}

h2 {
    color: gray;
    font-size: 28pt;
    text-transform: uppercase;
}

table.price-list th,
table.price-list td {
    border: grey thin solid;
    padding: 5px;
}

table.price-list {
    border-collapse: collapse;
}

table.price-list thead th {
    color: white;
    background-color: grey;
}

table.price-list tfoot td {
    font-style: italic;
    text-align: right;
}

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

table.price-list td:last-child:not(td:only-child) {
    border: none;
    background-color: lightgrey;
}

table.price-list td[rowspan] {
    font-size: larger;
}

table.catalog td {
    border-bottom: black thin dotted;
    padding: 5px;
}

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

table.catalog tr td:first-of-type {
    width: 33%;
}

table.catalog h3 {
    font-family: 'Caviar Dreams';
    font-size: 32pt;
    font-variant-caps: all-small-caps;
    letter-spacing: 10pt;
}

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

table.catalog h3 + p::first-letter {
    font-size: 150%;
    background-color: blanchedalmond;
    vertical-align: text-top;
}

table.catalog img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

nav a {
    color: maroon;
    text-decoration: none;
    display: block;
    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;
    translate: 10px;
    transition-property: color, background-color, translate;
    transition-duration: 1s;
}

main {
    margin-left: 300px;
    min-height: 700px;
}

footer {
    text-align: right;
    clear: left;
}

footer address {
    font: bold italic 20pt 'Caviar Dreams';
    background-color: blanchedalmond;
    border-bottom: 6pt solid salmon;
}

footer p {
    padding-bottom: 24pt;
}

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[type="checkbox"], input[type="radio"] {
    appearance: none;
    width: 1ex;
    height: 1ex;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: white;
    outline: solid orange;
    outline-offset: 2pt;
    margin-right: 8pt;
    vertical-align: middle;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: orange;
}

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

ul, p {
    font-size: 14pt;
}

ul {
    list-style-type: square;
}

ul li::marker {
    font-size: 150%;
    color: orange;
}

ol {
    list-style-type: upper-roman;
}

ol li::marker {
    color: orange;
}

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

p.greeting {
    font-size: 24pt;
}

strong {
    font-style: italic;
}

.advertising {
    margin-left: 30pt;
}

.advertising p {
    font-size: 12pt;
    margin-top: 2pt;
    margin-bottom: 2pt;
}

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

@media screen and (max-width: 400px) {
    nav {
        float: none;
        width: initial;
        margin: initial;
        border-radius: initial;
    }

    main {
        margin-left: initial;
        min-height: initial;
    }

    div.container {
        min-width: initial;
        max-width: initial;
        width: 100vw;
        background: rgba(255, 255, 255, 0.8);
    }

    header h1.header1 {
        font: bold 42pt 'Caviar Dreams';
        letter-spacing: initial;
        background:
            radial-gradient(circle farthest-side at right,
                blanchedalmond, blanchedalmond 67%,
                white 90%);
    }

    header h1.header2 {
        font: 32pt Verdana;
        letter-spacing: initial;
    }

    table.catalog, table.catalog tr, table.catalog tr td {
        display: block;
    }

    table.catalog tr td:first-of-type {
        width: initial;
    }

    table.catalog img {
        height: 150px;
    }

    table.catalog h3 {
        font-size: 38pt;
    }
}

@media print {
    body {
        background: none;
    }

    div.container {
        background: none;
    }

    header h1.header1 {
        background: none;
    }

    nav {
        display: none;
    }

    main {
        margin-left: initial;
    }

    footer {
        break-before: auto;
    }
}