:before *:after {
    box-sizing : border-box;
    }
    html {
    font-family : sans-serif;
    min-height : 950dvh;
    }
    body {
    margin : 0;
    min-height : 100dvh;
    background : url(images/stars.png) repeat-x fixed, url(images/stars.png) left bottom repeat-x, linear-gradient(to bottom, #30cccf 2%, #0a2629 64%) fixed #000;
    }
    .wrapper {
    display : grid;
    max-width : 800px;
    border : white solid 2px;
    border-radius : 10px;
    background : blue;
    margin-top : 10px;
    margin-bottom : 10px;
    }
    header {
    display : flex;
    border-radius : 10px;
    border : yellow solid 2px;
    margin : 15px;
    background : url(images/book-now.webp) top 0 right 0 /50px 50px no-repeat, url(images/) center center /cover no-repeat, linear-gradient(to bottom, hsl(183 43% 52%), hsl(213 85% 10%)) #000;
    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;
    border: #0000;
    margin : 0 20px 20px;
    }
    footer a {
    color : white;
    text-decoration : none;
    line-height : 2;
    }
    footer :first-child {
    margin-right : auto;
    }
    footer :last-child{
        margin-left: 1rem;
    }
    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;
    }
    }