*,
 *:before,
 *:after {
     box-sizing: border-box;
}
 
html {
     font-family: sans-serif;
     min-height: 100dvh;
}
 
body {
     margin: 0;
     min-height: 100dvh;
     background: 
         url(images/leaf.webp) repeat-x fixed, 
         url(images/leaf.webp) repeat-x left bottom, 
         fixed
         linear-gradient(
             to bottom, 
             hsla(104, 56%, 65%, 1) 2%, 
             hsla(104, 100%, 15%, 1) 64%
             )
        #144d00;
}
 
.wrapper {
     display: grid;
     max-width: 825px;
     border: 2px solid hsl(40 100% 15%);
     border-radius: 10px;
     box-shadow: 4px 4px 5px black;
     background: #382500;
     margin-top: 8px;
     margin-bottom: 8px;
}

header {
     display: flex;
     border-radius: 10px;
     border: 2px solid hsl(40 100% 15%);
     margin: 20px;
     background: 
         url(images/stamp.webp) no-repeat bottom 15px left 20px / 40px 40px, 
         url(images/header-main.webp) no-repeat center center / cover,  
         linear-gradient(
             to bottom, 
             hsl(104 56% 65%), 
             hsl(104 100% 15%)
         )
         #144d00;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}
 
header h1 {
     flex: 1 1 auto;
     margin: 0;
     color: #fff;
     line-height: 2;
     text-align: center;
     letter-spacing: 4px;
     text-shadow: 0 -2px 2px rgba(0, 0, 0, 0.6);
     background: 
         transparent 
         linear-gradient(
             to bottom, 
             hsla(104, 56%, 65%, 0.7) 1px, 
             hsla(104, 100%, 27%, 0.7) 2px, 
             hsla(104, 100%, 15%, 1)
         );
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
}

section {
     margin: 20px;
     border: 2px solid hsl(40 100% 15%);
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.8);
     background:  
          linear-gradient(
          350deg,
          hsl(104deg 56% 65%) 0%,
          hsl(104deg 56% 72%) 20%,
          hsl(105deg 57% 79%) 40%,
          hsl(104deg 56% 86%) 60%,
          hsl(105deg 56% 93%) 80%,
          hsl(0deg 0% 100%) 100%
         )
         whitesmoke;
}

section img {
    box-shadow: 2px 2px 5px black;
}
 
h2 {
     margin: 24px 0 20px;
}

p {
     margin: 0 0 16px;
     line-height: 1.6;
     font-size: 18px;
     max-width: 60ch;
}

img {
     width: 100%;
}
 
footer {
     display: flex;
     gap: 20px;
     margin: 0 20px 20px;
}
 
footer a {
    color: white;
    background-color: #4d3300;
    text-decoration: none;
    line-height: 2;
    border-radius: 3px;
    padding: 0 10px;
    box-shadow: 2px 2px 2px #8ed874;
}

footer a:hover {
    background-color: #7a5200;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 2;
    box-shadow: none;
}
 
footer a:first-child {
     margin-right: auto;
}
 
footer a[href^="javascript"] {
     position: relative;
     color: white;
     background-color: #4d3300;
     border-radius: 3px;
     padding: 0 10px;
     box-shadow: 2px 2px 2px #8ed874;
}
 
footer a[href^="javascript"]:active {
     top: 2px;
     box-shadow: none;
}

footer a[href^="javascript"]:hover {
    top: 2px;
    color: white;
    font-weight: bold;
    background-color: #7a5200;
    box-shadow: none;
}
 
@media (min-width: 48rem) {
     
     .wrapper {
         margin: 8px auto;
     }
    
     header {
         height: 300px;
         background: 
             url(images/stamp.webp) no-repeat 30px 210px / 80px 80px, 
             url(images/facebook-x.webp) no-repeat top 60px right 30px / 220px 100px, 
             url(images/header-main.webp) no-repeat center center / cover, 
             linear-gradient(
                 to bottom, 
                 hsl(104 56% 65%), 
                 hsl(104 100% 15%))
            #382500;
     }
 
     header h1 {
         font-size: 2.00em;
         line-height: 1.5;
         align-self: flex-start;
         border-bottom-left-radius: 0px;
         border-bottom-right-radius: 0px;
     }
 
     img {
         width: auto;
         float: right;
         margin: 0 0 2px 4px;
     }
}