body {
    margin: 0;

    font-family     : sans-serif;
    font-size       : 12px;
    background-color: #f8f8ff;

    header {
        background-image   : url(header_bg.jpg);
        background-repeat  : no-repeat;
        background-size    : cover;
        background-position: 0 calc( ( 100vw * -1/3 ) + 200px );

        @media ( max-width: 640px ) {
            background-position: 0;
        }

        @media ( max-width: 560px ) {
            background-position: calc( -280px + 100vw * 0.5 ) 0;
        }

        width         : 100%;
        height        : 400px;
        border-bottom : 1px solid #000;
        text-align    : center;
        color         : white;
        text-transform: uppercase;

        span {
            font-size  : 100px;
            line-height: 100px;

            &:nth-of-type(1) {
                display       : block;
                font-size     : 41px;
                line-height   : 41px;
                padding-top   : 120px;
                margin-left   : 20px;
                letter-spacing: 21px;
            }

            &:nth-of-type(3) {
                margin-left: 11px;
                font-weight: bold;
            }

            @media ( max-width: 830px ) {
                font-size  : 75px;
                line-height: 75px;

                &:nth-of-type(1) {
                    font-size     : 31px;
                    line-height   : 30px;
                    padding-top   : 140px;
                    margin-left   : 19px;
                    letter-spacing: 16px;
                }
            }

            @media ( max-width: 675px ) {
                display: block;

                &:nth-of-type(1) {
                    padding-top   : 100px;
                }
            }

            @media ( max-width: 430px ) {
                font-size  : 50px;
                line-height: 50px;

                &:nth-of-type(1) {
                    font-size     : 26px;
                    line-height   : 25px;
                    padding-top   : 140px;
                    margin-left   : 10px;
                    letter-spacing: 10px;
                }
            }
        }
    }

    article {
        padding    : 1em 2em;
        font-size  : 16px;
        line-height: 1.5em;

        h1 {
            font-size: 28px;
        }

        h2 {
            font-size: 24px;
        }

        div.buttons {
            text-align: center;

            div {
                margin : 1em;
                display: inline-block;

                a {
                    display         : table-cell;
                    text-align      : center;
                    vertical-align  : middle;
                    width           : 250px;
                    height          : 100px;
                    padding         : 0px 10px;
                    text-decoration : none;
                    font-size       : 20px;
                    color           : white;
                    background-color: #48a0a2;
                    border-radius   : 1em;

                    &:hover {
                        color          : #ff0;
                        filter         : brightness(115%);
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}