/* Universal Styles */

html {
    font-size: 16px;
}

body {
    font-family: "Open Sans", sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

strong {
    font-weight: bold;
}

.image-container {
    overflow: hidden;
}

.image-container img {
    display: block;
    max-width: 100%;
}

@media only screen and (max-width: 990px) {
    html {
        font-size: 14px;
    }
}

/* Header */

header {
    display: flex;
    align-items: center;
    padding: .5rem 3.75rem;
    background-color: #ff8000;
}

header .logo-small {
    display: none;
}

header .logo-small,
header .logo-big {
    flex-grow: 1;
}

nav li {
    display: inline;
    padding-right: 2rem;
}

nav li:last-child {
    padding-right: 0;
}

@media only screen and (max-width: 990px) {
    header .logo-big {
        display: none;
    }

    header .logo-small {
        display: block;
    }
}

@media only screen and (max-width: 540px) {
    header {
        flex-direction: column;
        /* Universal Styles */

        html {
            font-size: 16px;
        }

        body {
            font-family: "Open Sans", sans-serif;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        strong {
            font-weight: bold;
        }

        .image-container {
            overflow: hidden;
        }

        .image-container img {
            display: block;
            max-width: 100%;
        }

        @media only screen and (max-width: 990px) {
            html {
                font-size: 14px;
            }
        }

        /* Header */

        header {
            display: flex;
            align-items: center;
            padding: .5rem 3.75rem;
            background-color: #ff8000;
        }

        header .logo-small {
            display: none;
        }

        header .logo-small,
        header .logo-big {
            flex-grow: 1;
        }

        nav li {
            display: inline;
            padding-right: 2rem;
        }

        nav li:last-child {
            padding-right: 0;
        }

        @media only screen and (max-width: 990px) {
            header .logo-big {
                display: none;
            }

            header .logo-small {
                display: block;
            }
        }

        @media only screen and (max-width: 540px) {
            header {
                flex-direction: column;
                padding-left: 0;
                padding-right: 0;
            }

            header .logo-small {
                margin-bottom: 1rem;
            }
        }

        /* Banner */

        #banner {
            position: relative;
            height: 43.75rem;
            padding: 0 25%;
            background: url("	https://content.codecademy.com/courses/freelance-1/unit-6/banner.png") center center no-repeat;
            background-size: cover;
            text-align: center;
        }

        #banner:before {
            /* Orange Overlay */
            background-color: rgba(255, 128, 0, 0.75);
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        #banner * {
            position: relative;
            /* Makes elements display above overlay. */
        }

        h1 {
            padding-top: 10.4375rem;
            padding-bottom: 1.25rem;
            font-family: "Creepster", cursive;
            font-size: 8rem;
            color: rgba(0, 0, 0, 0.7);

        }

        #banner p {
            color: white;
            line-height: 1.5;
            font-size: 1.375rem;
        }

        @media only screen and (max-width: 820px) {
            h1 {
                padding-top: 7rem;
                font-size: 6rem;
            }
        }

        @media only screen and (max-width: 590px) {
            h1 {
                font-size: 4rem;
            }
        }

        /* Color Guide */

        #color-guide {
            padding: 3.875rem 15% 13.5rem 15%;
        }

        #color-guide .introduction {
            padding: 0 10%;
            margin-bottom: .75rem;
            text-align: center;
            font-size: 1.375rem;
            line-height: 1.4;
        }

        #color-guide h2 {
            margin-bottom: 2.4375rem;
            line-height: 1;
            font-size: 2rem;
            color: #ff8000;
        }

        #color-guide .color {
            display: flex;
            justify-content: space-between;
            padding-top: 5.25rem;
        }

        .color .information {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 35%;
        }

        .color .information h3 {
            padding-bottom: .5rem;
            font-size: 1.375rem;
            font-weight: bold;
        }

        .color .information p {
            font-size: .875rem;
            line-height: 1.4;
        }

        .color .swatches {
            width: 60%;
        }

        .color .swatches h4 {
            margin-bottom: 1.25rem;
            font-size: 1.125rem;
            font-weight: bold;
            color: #9b9b9b;

        }

        .color .swatch {
            display: flex;
            height: 6.6875rem;
            border: 10px solid #e6e6e6;
            margin-bottom: 1.25rem;
        }

        .color .swatch:last-child {
            margin-bottom: 0;
        }

        .color .swatch>div {
            flex-grow: 1;
            border-right: 10px solid #e6e6e6;
        }

        .color .swatch>div:last-child {
            border-right: 0;
        }

        @media only screen and (max-width: 820px) {
            #color-guide .color {
                flex-direction: column;
                align-items: center;
            }

            .color .information {
                width: 100%;
                margin-bottom: 3rem;
                align-items: center;
            }

            .color .information h3 {
                padding-bottom: 1.5rem;
            }

            .color .information p {
                margin-bottom: 2rem;
            }

            .color .swatches {
                width: 100%;
            }
        }

        /* Red Swatches */

        .reds .base-color {
            color: hsl(350, 100%, 50%);
        }

        /* Red lightness decreases by 15 */
        .reds .lightness .color-1 {
            background-color: hsl(350, 100%, 80%);
        }

        .reds .lightness .color-2 {
            background-color: hsl(350, 100%, 65%);
        }

        .reds .lightness .color-3 {
            background-color: hsl(350, 100%, 50%);
        }

        .reds .lightness .color-4 {
            background-color: hsl(350, 100%, 35%);
        }

        .reds .lightness .color-5 {
            background-color: hsl(350, 100%, 20%);
        }

        /* Red saturation decreases by 15 */
        .reds .saturation .color-1 {
            background-color: hsl(350, 100%, 50%);
        }

        .reds .saturation .color-2 {
            background-color: hsl(350, 85%, 50%);
        }

        .reds .saturation .color-3 {
            background-color: hsl(350, 70%, 50%);
        }

        .reds .saturation .color-4 {
            background-color: hsl(350, 55%, 50%);
        }

        .reds .saturation .color-5 {
            background-color: hsl(350, 40%, 50%);
        }

        /* Red hue increases by 15 */
        .reds .hue .color-1 {
            background-color: hsl(320, 100%, 50%);
        }

        .reds .hue .color-2 {
            background-color: hsl(335, 100%, 50%);
        }

        .reds .hue .color-3 {
            background-color: hsl(350, 100%, 50%);
        }

        .reds .hue .color-4 {
            background-color: hsl(5, 100%, 50%);
        }

        .reds .hue .color-5 {
            background-color: hsl(20, 100%, 50%);
        }

        /* Green Swatches */

        .greens .base-color {
            color: hsl(130, 100%, 50%);
        }

        /* Green lightness decreases by 20 */
        .greens .lightness .color-1 {
            background-color: hsl(103, 100%, 90%);
        }

        .greens .lightness .color-2 {
            background-color: hsl(103, 100%, 70%);
        }

        .greens .lightness .color-3 {
            background-color: hsl(103, 100%, 50%);
        }

        .greens .lightness .color-4 {
            background-color: hsl(103, 100%, 30%);
        }

        .greens .lightness .color-5 {
            background-color: hsl(104, 100%, 10%);
        }

        /* Green saturation decreases by 20 */
        .greens .saturation .color-1 {
            background-color: hsl(130, 100%, 50%);
        }

        .greens .saturation .color-2 {
            background-color: hsl(130, 80%, 50%);
        }

        .greens .saturation .color-3 {
            background-color: hsl(130, 60%, 50%);
        }

        .greens .saturation .color-4 {
            background-color: hsl(130, 40%, 50%);
        }

        .greens .saturation .color-5 {
            background-color: hsl(131, 20%, 50%);
        }

        /* Green hue increases by 22 */
        .greens .hue .color-1 {
            background-color: hsl(86, 100%, 50%)
        }

        .greens .hue .color-2 {
            background-color: hsl(108, 100%, 50%);
        }

        .greens .hue .color-3 {
            background-color: hsl(130, 100%, 50%);
        }

        .greens .hue .color-4 {
            background-color: hsl(152, 100%, 50%);
        }

        .greens .hue .color-5 {
            background-color: hsl(174, 100%, 50%);
        }

        /* Blue Swatches */

        .blues .base-color {
            color: hsl(220, 100%, 50%);
        }

        /* Blue lightness decreases by 20 */
        .blues .lightness .color-1 {
            background-color: hsl(220, 100%, 90%);
        }

        .blues .lightness .color-2 {
            background-color: hsl(220, 100%, 70%);
        }

        .blues .lightness .color-3 {
            background-color: hsl(220, 100%, 50%);
        }

        .blues .lightness .color-4 {
            background-color: hsl(220, 100%, 30%);
        }

        .blues .lightness .color-5 {
            background-color: hsl(220, 100%, 10%);
        }

        /* Blue saturation decreases by 20 */
        .blues .saturation .color-1 {
            background-color: hsl(220, 100%, 50%);
        }

        .blues .saturation .color-2 {
            background-color: hsl(220, 80%, 50%);
        }

        .blues .saturation .color-3 {
            background-color: hsl(220, 60%, 50%);
        }

        .blues .saturation .color-4 {
            background-color: hsl(220, 40%, 50%);
        }

        .blues .saturation .color-5 {
            background-color: hsl(220, 20%, 50%);
        }

        /* Blue hue decreases by 20 */
        .blues .hue .color-1 {
            background-color: hsl(260, 100%, 50%);
        }

        .blues .hue .color-2 {
            background-color: hsl(240, 100%, 50%);
        }

        .blues .hue .color-3 {
            background-color: hsl(220, 100%, 50%);
        }

        .blues .hue .color-4 {
            background-color: hsl(200, 100%, 50%);
        }

        .blues .hue .color-5 {
            background-color: hsl(180, 100%, 50%);
        }

        /* Footer */

        footer {
            position: relative;
            height: 30rem;
            padding: 7.8125rem 30% 0 30%;
            background: url("https://content.codecademy.com/courses/freelance-1/unit-6/footer.png") center center no-repeat;
            background-size: cover;
            text-align: center;
            font-size: 1.125rem;
            line-height: 1.4;
            color: white;
        }

        footer:before {
            /* Overlay */
            background-color: rgba(0, 0, 0, 0.7);
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        footer * {
            position: relative;
            /* Makes elements display above overlay. */
        }

        footer strong {
            display: block;
            margin-bottom: 1.25rem;
            font-size: 2.25rem;
        }

        footer p {
            margin-bottom: 4.3125rem;
        }

        footer .button {
            padding: 1.25rem 3.75rem;
            border-radius: 4px;
            background-color: #ff8000;
        }

        @media only screen and (max-width: 560px) {
            footer {
                padding: 4.8125rem 15% 0 15%;
            }
        }

        padding-left: 0;
        padding-right: 0;
    }

    header .logo-small {
        margin-bottom: 1rem;
    }
}

/* Banner */

#banner {
    position: relative;
    height: 43.75rem;
    padding: 0 25%;
    background: url("	https://content.codecademy.com/courses/freelance-1/unit-6/banner.png") center center no-repeat;
    background-size: cover;
    text-align: center;
}

#banner:before {
    /* Orange Overlay */
    background-color: rgba(255, 128, 0, 0.75);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

#banner * {
    position: relative;
    /* Makes elements display above overlay. */
}

h1 {
    padding-top: 10.4375rem;
    padding-bottom: 1.25rem;
    font-family: "Creepster", cursive;
    font-size: 8rem;
    color: rgba(0, 0, 0, 0.7);

}

#banner p {
    color: white;
    line-height: 1.5;
    font-size: 1.375rem;
}

@media only screen and (max-width: 820px) {
    h1 {
        padding-top: 7rem;
        font-size: 6rem;
    }
}

@media only screen and (max-width: 590px) {
    h1 {
        font-size: 4rem;
    }
}

/* Color Guide */

#color-guide {
    padding: 3.875rem 15% 13.5rem 15%;
}

#color-guide .introduction {
    padding: 0 10%;
    margin-bottom: .75rem;
    text-align: center;
    font-size: 1.375rem;
    line-height: 1.4;
}

#color-guide h2 {
    margin-bottom: 2.4375rem;
    line-height: 1;
    font-size: 2rem;
    color: #ff8000;
}

#color-guide .color {
    display: flex;
    justify-content: space-between;
    padding-top: 5.25rem;
}

.color .information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35%;
}

.color .information h3 {
    padding-bottom: .5rem;
    font-size: 1.375rem;
    font-weight: bold;
}

.color .information p {
    font-size: .875rem;
    line-height: 1.4;
}

.color .swatches {
    width: 60%;
}

.color .swatches h4 {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    font-weight: bold;
    color: #9b9b9b;

}

.color .swatch {
    display: flex;
    height: 6.6875rem;
    border: 10px solid #e6e6e6;
    margin-bottom: 1.25rem;
}

.color .swatch:last-child {
    margin-bottom: 0;
}

.color .swatch>div {
    flex-grow: 1;
    border-right: 10px solid #e6e6e6;
}

.color .swatch>div:last-child {
    border-right: 0;
}

@media only screen and (max-width: 820px) {
    #color-guide .color {
        flex-direction: column;
        align-items: center;
    }

    .color .information {
        width: 100%;
        margin-bottom: 3rem;
        align-items: center;
    }

    .color .information h3 {
        padding-bottom: 1.5rem;
    }

    .color .information p {
        margin-bottom: 2rem;
    }

    .color .swatches {
        width: 100%;
    }
}

/* Red Swatches */

.reds .base-color {
    color: hsl(350, 100%, 50%);
}

/* Red lightness decreases by 15 */
.reds .lightness .color-1 {
    background-color: hsl(350, 100%, 80%);
}

.reds .lightness .color-2 {
    background-color: hsl(350, 100%, 65%);
}

.reds .lightness .color-3 {
    background-color: hsl(350, 100%, 50%);
}

.reds .lightness .color-4 {
    background-color: hsl(350, 100%, 35%);
}

.reds .lightness .color-5 {
    background-color: hsl(350, 100%, 20%);
}

/* Red saturation decreases by 15 */
.reds .saturation .color-1 {
    background-color: hsl(350, 100%, 50%);
}

.reds .saturation .color-2 {
    background-color: hsl(350, 85%, 50%);
}

.reds .saturation .color-3 {
    background-color: hsl(350, 70%, 50%);
}

.reds .saturation .color-4 {
    background-color: hsl(350, 55%, 50%);
}

.reds .saturation .color-5 {
    background-color: hsl(350, 40%, 50%);
}

/* Red hue increases by 15 */
.reds .hue .color-1 {
    background-color: hsl(320, 100%, 50%);
}

.reds .hue .color-2 {
    background-color: hsl(335, 100%, 50%);
}

.reds .hue .color-3 {
    background-color: hsl(350, 100%, 50%);
}

.reds .hue .color-4 {
    background-color: hsl(5, 100%, 50%);
}

.reds .hue .color-5 {
    background-color: hsl(20, 100%, 50%);
}

/* Green Swatches */

.greens .base-color {
    color: hsl(130, 100%, 50%);
}

/* Green lightness decreases by 20 */
.greens .lightness .color-1 {
    background-color: hsl(103, 100%, 90%);
}

.greens .lightness .color-2 {
    background-color: hsl(103, 100%, 70%);
}

.greens .lightness .color-3 {
    background-color: hsl(103, 100%, 50%);
}

.greens .lightness .color-4 {
    background-color: hsl(103, 100%, 30%);
}

.greens .lightness .color-5 {
    background-color: hsl(104, 100%, 10%);
}

/* Green saturation decreases by 20 */
.greens .saturation .color-1 {
    background-color: hsl(130, 100%, 50%);
}

.greens .saturation .color-2 {
    background-color: hsl(130, 80%, 50%);
}

.greens .saturation .color-3 {
    background-color: hsl(130, 60%, 50%);
}

.greens .saturation .color-4 {
    background-color: hsl(130, 40%, 50%);
}

.greens .saturation .color-5 {
    background-color: hsl(131, 20%, 50%);
}

/* Green hue increases by 22 */
.greens .hue .color-1 {
    background-color: hsl(86, 100%, 50%)
}

.greens .hue .color-2 {
    background-color: hsl(108, 100%, 50%);
}

.greens .hue .color-3 {
    background-color: hsl(130, 100%, 50%);
}

.greens .hue .color-4 {
    background-color: hsl(152, 100%, 50%);
}

.greens .hue .color-5 {
    background-color: hsl(174, 100%, 50%);
}

/* Blue Swatches */

.blues .base-color {
    color: hsl(220, 100%, 50%);
}

/* Blue lightness decreases by 20 */
.blues .lightness .color-1 {
    background-color: hsl(220, 100%, 90%);
}

.blues .lightness .color-2 {
    background-color: hsl(220, 100%, 70%);
}

.blues .lightness .color-3 {
    background-color: hsl(220, 100%, 50%);
}

.blues .lightness .color-4 {
    background-color: hsl(220, 100%, 30%);
}

.blues .lightness .color-5 {
    background-color: hsl(220, 100%, 10%);
}

/* Blue saturation decreases by 20 */
.blues .saturation .color-1 {
    background-color: hsl(220, 100%, 50%);
}

.blues .saturation .color-2 {
    background-color: hsl(220, 80%, 50%);
}

.blues .saturation .color-3 {
    background-color: hsl(220, 60%, 50%);
}

.blues .saturation .color-4 {
    background-color: hsl(220, 40%, 50%);
}

.blues .saturation .color-5 {
    background-color: hsl(220, 20%, 50%);
}

/* Blue hue decreases by 20 */
.blues .hue .color-1 {
    background-color: hsl(260, 100%, 50%);
}

.blues .hue .color-2 {
    background-color: hsl(240, 100%, 50%);
}

.blues .hue .color-3 {
    background-color: hsl(220, 100%, 50%);
}

.blues .hue .color-4 {
    background-color: hsl(200, 100%, 50%);
}

.blues .hue .color-5 {
    background-color: hsl(180, 100%, 50%);
}

/* Footer */

footer {
    position: relative;
    height: 30rem;
    padding: 7.8125rem 30% 0 30%;
    background: url("https://content.codecademy.com/courses/freelance-1/unit-6/footer.png") center center no-repeat;
    background-size: cover;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.4;
    color: white;
}

footer:before {
    /* Overlay */
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

footer * {
    position: relative;
    /* Makes elements display above overlay. */
}

footer strong {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 2.25rem;
}

footer p {
    margin-bottom: 4.3125rem;
}

footer .button {
    padding: 1.25rem 3.75rem;
    border-radius: 4px;
    background-color: #ff8000;
}

@media only screen and (max-width: 560px) {
    footer {
        padding: 4.8125rem 15% 0 15%;
    }
}