*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    min-height: 100dvh;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100dvh;
    background:  
        linear-gradient(
    180deg,
    hsla(152, 80%, 16%, 0.233) 0%,
    hsla(110, 23%, 31%, 0.575) 18%,
    hsla(93, 22%, 38%, 0.804) 31%,
    hsl(83deg 21% 43%) 41%,
    hsl(77deg 20% 48%) 52%,
    hsl(77, 22%, 53%) 63%,
    hsl(73, 26%, 57%) 77%,
    hsla(68, 30%, 61%, 0) 100%
  ), 
    url(images/coffee-cups2.webp) repeat-x scroll, 
    url(images/coffee-beans-short.webp) repeat-x left bottom,
        fixed 
    url(images/textured-paper.webp) repeat-x,
        fixed 
          linear-gradient(
            to bottom, 
            rgba(60, 164, 86, 0.436) 2%, 
            rgba(131, 161, 123, 0) 64%
            )
        #062212;
}

.wrapper {
    display: grid;
    max-width: 800px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 2px #000;
    background: #ede0d4;
    border-left: 8px solid #6f4e37;
    border-right: 8px solid #6f4e37;
}

header {
    display: flex;
    border-radius: 10px;
    border: 2px solid #d4a373;
    margin: 20px;
    background: 
        url(images/yeah-coffee-green.webp) no-repeat top 0px right 0px / cover, 
        url(images/latte-beans.webp) no-repeat center center / cover,  
        #000;
    box-shadow: inset 0 2px 4px #3b2f2f;
    padding: 20px;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    background:
        linear-gradient(rgba(20, 50, 30, 0.35), rgba(20, 50, 30, 0.65)),
        url("images/latte-beans.webp") center/cover no-repeat,
        #000;;
    border-radius: 20px;
}

header h1 {
    flex: 1 1 auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    color: #f5ebe0;
    line-height: 4;
    text-align: center;
    letter-spacing: 4px;
    text-shadow: 0 -2px 2px #6f4e37;
    box-shadow: rgb(212, 163, 115) -2px 4px 14px inset;
    background: 
        transparent 
        linear-gradient(
            to bottom, 
            hsla(106, 28%, 62%, 0.7) 1px, 
            hsla(110, 19%, 52%, 0.7) 2px, 
            rgb(8, 33, 24)
        );
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

section {
    position: relative;
    border-radius: 10px;
    background: #f7f1e8;
    border: 2px solid #d8c3a5;
    border-radius: 18px;
    padding: 24px;
    margin: 30px 20px;
    box-shadow: inset 0 2px 4px #3b2f2f, 0 6px 14px rgba(100, 80, 24, 0.18);
    background: 
        transparent 
        linear-gradient(
            to bottom, 
            hsla(107, 28%, 62%, 0.195) 1px, 
            hsla(110, 19%, 52%, 0.326) 2px, 
            rgba(8, 33, 24, 0.092)
        );
}

section img {
    float: right;
    margin: 0 0 15px 20px;
    border-radius: 50%;
    border: 4px solid #d4a373;
    box-shadow: 0 4px 10px rgba(77, 60, 16, 0.62);
}

section h2 {
    display: inline-block;
    background: #6b8f71;
    color: #fdf6ec;
    padding: 10px 18px;
    border-left: 8px solid #d4a373;
    border-radius: 6px;
    margin: 5px 0 18px 0;
    border-bottom: 2px solid #062212;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

p {
    margin: 5px 0 10px;
    line-height: 1.7;
    max-width: 60ch;
}

img {
    width: 100%;
}

footer {
    display: flex;
    gap: 20px;
    margin: 0 20px 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

footer a {
    color: #6b8f71;
    text-decoration: none;
    line-height: 2;
}

footer a:first-child {
    margin-right: auto;
}

footer a,
footer a[href^="javascript"] {
    position: relative;
    color: #f5ebe0;
    background-color: #6b8f71;
    border-radius: 3px;
    padding: 0 10px;
    box-shadow: 0 2px 2px #000;
}

footer a,
footer a[href^="javascript"]:active {
    top: 2px;
}

footer a:hover {
    color: #f5ebe0;
    background-color: #6f4e37;
}

footer a:visited {
    background-color: #445d49;
}

footer a:focus {
    color: #f5ebe0;
    outline: 2px solid #3b2f2f;
}

footer a:active {
    color: #f5ebe0;
}

@media (min-width: 48rem) {
    .wrapper {
        margin: 10px auto;
    }
    
    header {
        height: 300px;
        padding: 40px;
        background: 
            url(images/coffee-pot2.webp) no-repeat top -36px right 9px / 300px 300px, 
            url(images/yeah-coffee-green.webp) no-repeat center center / cover, 
            linear-gradient(
                to bottom, 
                hsl(130, 14%, 49%), 
                hsl(130, 15%, 39%))
            #3b2f2f;
    }

    header h1 {
        padding: 8px 10px;
        font-size: 2.50em;
        line-height: 2;
        align-self: flex-end;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    img {
        width: 250px;
        float: right;
        margin: 10px 5px 10px 8px;
    }
}