:root {
    --color-white: #FFF;
    --color-black: #000;
    --color-orange: #FB8C00;
    --color-blue: #0071FB;
    --color-graphite: #424242;
}

html {
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
}

body {
    margin: 0;
}

*{
    box-sizing: border-box;
}

.visuallyHidden{
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

div.page-wrapper {
    max-width: 600px;
    margin: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header{
    h1{
        margin: 1em 0 0 0;
        text-align: center;
        & > img {
            width: 100%;
            max-width: 320px;
        }
    }
}

main {
    h2 {
        text-align: center;
    }

    ul.offer {
        list-style-type: none;
        margin: 1em;
        padding: 0 1.5em;
        & > li{
            line-height: 1.5em;
            margin-bottom: 1em;
            &:before {
                content: "⬢";
                margin-right: 0.5em;
                color: var(--color-orange);
            }

            a {
                color: var(--color-orange);
                &:hover{
                    color: var(--color-blue);
                }
            }
        }
    }

    img.d9 {
        display: block;
        margin: 2em auto;
        max-width: 100px;
    }
}


footer {
    background: var(--color-graphite);
    color: var(--color-white);
    padding: 1em;

    ul{
        & > li{
            line-height: 1.5em;
        }
    }

    & a{
        color: var(--color-white);
    }
}