@font-face {
  font-family: PT Serif Caption;
  font-style: normal;
  src: local(PT Serif Caption), local(PTSerif-Caption),
       url(style/pt-serif-caption-v9-latin_cyrillic-regular.woff2) format('woff2')
}

@font-face {
  font-family: PT Serif Caption;
  font-style: italic;
  src: local(PT Serif Caption Italic), local(PTSerif-CaptionItalic),
       url(style/pt-serif-caption-v9-latin_cyrillic-italic.woff2) format('woff2')
}

@font-face {
  font-family: PT Sans Caption;
  src: local(PT Sans Caption Bold), local(PTSans-CaptionBold),
       url(style/pt-sans-caption-v10-latin_cyrillic-700.woff2) format('woff2')
}

.grocer {
    font: 24px PT Sans Caption, sans-serif;
    text-align: center;
    input, button, select { font: inherit; color: inherit; }

    position: relative;
    margin: 0 auto;
    width: fit-content;

    background: url(grocer-bg.png) 25% top / 1930px auto no-repeat lightsteelblue;
    color: #585858;

    @media (min-width: 1300px) {
        background-position: 50% -200px;
    }

    button {
        padding: 0 1em;
    }

    --avatar-width: 620px;
    --form-width: 580px;
    --form-top: 500px;

    --product-color: darkgreen;
    --kind-color: darkred;

    #greeting {
        position: absolute;
        top: 60px;
        width: var(--avatar-width);
        margin: 0; padding: 40px;
        box-sizing: border-box;
        border-image: url(grocer-greeting-bubble.png) 22 36 153 160 fill / 22px 36px 153px 160px / 0 0 131px;

        /* border-image is broken in Chrome on Android: you can see background between image
        components. To work around that we apply a white background and a border-radius big enough
        to hide it behind the curved corners of the border-image. We're lucky we have white fill and
        simple rounded corners. */
        background: white;
        border-radius: 45px;

        @media (min-width: 1300px) {
            left: calc(var(--avatar-width) - 80px);
            border-image-source: url(grocer-greeting-bubble-wide.png);
        }
    }

    #avatar {
        display: block;
        padding-top: 330px;
        width: var(--avatar-width);
        margin-bottom: 50px;

        @media (min-width: 1300px) {
            padding-top: 150px;
            margin-right: var(--form-width);
        }
    }

    .form {
        width: var(--form-width);
        margin: 0 auto;
        padding: 55px 0;
        border-image: url(grocer-form-bubble.png) 32 40 fill / 32px 40px;

        /* border-image is broken in Chrome on Android: you can see background between image
        components. To work around that we apply a white background and a border-radius big enough
        to hide it behind the curved corners of the border-image. We're lucky we have white fill and
        simple rounded corners. */
        background: white;
        border-radius: 45px;

        p {
            margin-top: 0;
        }

        @media (min-width: 1300px) {
            position: absolute;
            right: 0; top: var(--form-top);
        }
    }

    .bubble {
        filter: drop-shadow(0px 0px 20px #5a687d);
    }

    footer {
        margin-top: 50px;
        font: 16px PT Serif Caption, serif;

        a {
            background: white;
            padding: 0.5em 1em;
            border-radius: 1.5em;
            color: inherit;
        }
    }

    &#index {

        form {

            input {
                width: 340px;
                border: solid #6E6E6E;
                border-width: 0 0 1px 0;
                &:focus { outline: none; }
            }

        }

    }

    &#guess {

        --confirm-width: 192px;
        --confirm-height: 122px;

        #product {
            color: var(--product-color);
            white-space: nowrap;
        }

        #kind {
            color: var(--kind-color);
            white-space: nowrap;
        }

        #confirm {
            position: absolute;
            left: 427px; top: 250px;

            button {
                width: var(--confirm-width); height: var(--confirm-height);
                border: none;
                background: url(grocer-yes.png) center/contain;
                font-size: 0;
                &:hover {filter: brightness(1.25);}
                &:active {filter: brightness(0.8) saturate(1.5);}
            }

            @media (min-width: 1300px) {
                left: auto; right: 0;
                top: calc(var(--form-top) - var(--confirm-height) - 50px);
                width: var(--form-width);
            }

        }

        #teach {

            select {
                color: var(--kind-color);
            }

        }

    }

    &#feedback {

        #link a {
            color: steelblue;
        }

    }

    &#about {
        padding: 50px 1.5em;
        font: normal 20px PT Serif Caption, serif;
        text-align: left;
        max-width: 40em;
        background: lightsteelblue;

        @media (orientation: portrait) and (max-width: 1000px) {
            font-size: 36px;
            max-width: auto;
        }

        a {
            color: #155883;

            &:visited {
                color: #425968;
            }
        }

        strong {
            font-weight: bold;
            color: #222;
        }

        address {
            margin-top: 4em;
            font-size: smaller;
        }
    }
}