$colors: (
    primary: #005DFF,
    primary-light: lighten(#005DFF, 40%),
    primary-dark: darken(#005DFF, 40%),
    accent: #FFF6BB,
    accent-dark: darken(#FFF6BB, 20%)
);

$padding: 15px; 
$borders: 15px;

@function color($color-name) {
    @return map-get($colors, $color-name)
}

$desktop: 840px;

@mixin desktop {
    @media (min-width: #{$desktop}) {
        @content;
    }
}

body, html {
    height: 100%;
}

body {
    font-family: 'Arial';
    margin: 0;
    
    #bg {
        clip-path: polygon(100% 0, 100% 82%, 45% 100%, 0 100%, 0 0);
        background-color: color(primary);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;

        @include desktop {
            clip-path: polygon(0 0, 75% 0, 55% 100%, 0% 100%);
        }
    }

    header a {
        color: #fff;
        text-decoration: none;
        padding: $padding;
        display: block;
        text-transform: uppercase;
        &:active {
            background-color: color(primary);
        }
        background-color: color(primary-dark);
    }
}

main {

    @include desktop {
        display: grid;
        grid-template-columns: 50% auto;
        grid-template-areas: "primary card";
    }

    section#card {
        background: #fff;
        padding: 20px;
        margin: 1em auto;
        border-radius: $borders;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);
        width: 80%;

        @include desktop {
            grid-area: card;
            height: fit-content;
            align-self: center;
            margin: 1em;
        }

        ul {
            list-style-type: none;
            margin: 0; padding: 0;

            li {
                margin-bottom: 10px;

                span {
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    background-color: color(primary-light);
                    border-radius: 50%;
                    margin-right: 10px;
                }

                strong {
                    display: inline-block;
                    margin-left: max(40px);
                    margin-top: 10px;
                }
            }
        }
    }

    section#primary {
        color: #fff;
        padding: $padding;
        text-align: center;

        @include desktop {
            grid-area: primary;
            text-align: left;
            margin: 4em 0 0 4em;
        }

        h1 {
            font-size: 3em;
            margin-top: 10px;
            text-transform: uppercase;

            @include desktop {
                width: 30%;
                font-size: 4em;
                line-height: .9em;
            }
        }

        p {
            font-size: 1.4em;
            color: #000;
            background-color: #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,.2);
            border-radius: $borders;
            padding: 10px;
        }

        a {
            color: color(primary-dark);
            border-radius: $borders;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: bold;
            background-color: color(accent);
            display: block;
            text-align: center;
            margin: 50px auto 0 auto;
            padding: $padding;
            &:hover {   
                background-color: color(accent-dark);

            }

            @include desktop {
                display: inline-block;
                padding: $padding $padding * 4;
            }
        }
    }
}