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

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

body {
                        margin: auto;
                        min-height: 100dvh;
}

.wrapper {
                        display: grid;
                        max-width: 800px;
                        border: white solid 5px;
                        border-radius: 10px;
                        background: rgb(246, 255, 0);
                        margin-top: 10px;
                        margin-bottom: 10px;
}

header {
                        display: flex;
                        border-radius: 10px;
                        border: yellow solid 2px;
                        margin: 15px;
                        box-shadow: 0 2px 4px rgb(0, 0, 0, 0.8) inset;
}

header h1 {
                        flex: 1 1 auto;
                        margin: 0;
                        color: #fff;
                        line-height: 4;
                        text-align: center;
                        letter-spacing: 4px;
                        text-shadow: 0 -2px 2px rgb(0, 0, 0, 0.6);
                        background: linear-gradient(to bottom, hsl(54 34% 25% / 0.822) 1px, hsl(259 39% 89% / 0.7) 2px, rgb(8, 32, 33, 0.504)) transparent;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
}

header h1 sup {
                        font-size: 0.6em;
}

p {
                        margin: 0 0 16px;
                        line-height: 1.6;
                        max-width: 60ch;
                        text-align: center;
}

section {
                        margin: 20px;
                        border: white solid 2px;
                        border-radius: 10px;
                        padding: 10px;
                        box-shadow: 0 4px 4px rgb(0, 0, 0, 0.8);
                        background: linear-gradient(to bottom, hsl(0 0% 0% / 0.8) 0%, hsl(0 0% 100% / 0.6) 5%, hsl(0 0% 100%) 20%) #fff;
}

h2 {
                        margin: 24px 0 6px;
}

img {
                        width: 100%;
}

footer {
                        display: flex;
                        gap: 20px;
                        margin: 0 20px 20px;
}

footer a {
                        color: white;
                        text-decoration: none;
                        line-height: 2;
}

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

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

footer a[href^="javascript"]:active {
                        top: 2px;
                        box-shadow: none;
}
}

@media (min-width: 48rem) {
                        .wrapper {
                                                margin: 20px auto;
                        }

                        header h1 {
                                                font-size: 2.75em;
                                                line-height: 2;
                                                align-self: flex-end;
                                                border-top-left-radius: 0;
                                                border-top-right-radius: 0;
                        }

                        img {
                                                width: auto;
                                                float: right;
                                                margin: 0 0 2px 4px;
                        }

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

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

                        body {
                                                margin: 0;
                                                min-height: 100dvh;
                        }

                        .wrapper {
                                                display: grid;
                                                max-width: 800px;
                                                border: white solid 2px;
                                                border-radius: 10px;
                                                background: rgb(246, 255, 0);
                                                margin-top: 10px;
                                                margin-bottom: 10px;
                        }

                        header {
                                                display: flex;
                                                border-radius: 10px;
                                                border: yellow solid 2px;
                                                margin: 15px;
                                                box-shadow: 0 2px 4px rgb(0, 0, 0, 0.8) inset;
                        }

                        header h1 {
                                                flex: 1 1 auto;
                                                margin: 0;
                                                color: #fff;
                                                line-height: 4;
                                                text-align: center;
                                                letter-spacing: 4px;
                                                text-shadow: 0 -2px 2px rgb(0, 0, 0, 0.6);
                                                background: linear-gradient(to bottom, hsl(54 34% 25% / 0.822) 1px, hsl(259 39% 89% / 0.7) 2px, rgb(8, 32, 33, 0.504)) transparent;
                                                border-top-left-radius: 10px;
                                                border-top-right-radius: 10px;
                                                border-bottom-left-radius: 10px;
                                                border-bottom-right-radius: 10px;
                        }

                        header h1 sup {
                                                font-size: 0.6em;
                        }

                        section {
                                                margin: 20px;
                                                border: white solid 2px;
                                                border-radius: 10px;
                                                padding: 10px;
                                                box-shadow: 0 4px 4px rgb(0, 0, 0, 0.8);
                                                background: linear-gradient(to bottom, hsl(0 0% 0% / 0.8) 0%, hsl(0 0% 100% / 0.6) 5%, hsl(0 0% 100%) 20%) #fff;
                        }

                        h2 {
                                                margin: 24px 0 6px;
                        }

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

                        img {
                                                width: 100%;
                        }

                        footer {
                                                display: flex;
                                                gap: 20px;
                                                margin: 0 20px 20px;
                        }

                        footer a {
                                                color: white;
                                                text-decoration: none;
                                                line-height: 2;
                        }

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

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

                        footer a[href^="javascript"]:active {
                                                top: 2px;
                                                box-shadow: none;
                        }
}

/*@media (min-width: 48rem) {
                        .wrapper {
                                                margin: 20px auto;
                        }

                        header h1 {
                                                font-size: 2.75em;
                                                line-height: 2;
                                                align-self: flex-end;
                                                border-top-left-radius: 0;
                                                border-top-right-radius: 0;
                        }

                        img {
                                                width: auto;
                                                float: right;
                                                margin: 0 0 2px 4px;
                        }
}*/