/*  SCSS Document  */

@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Oswald');

$color_1: #793ca0;
$color_2: adjust-hue($color_1, 10deg);
$color_3: adjust-hue($color_1, 180deg);

body {
    
    font-family: 'Droid Sans', sans-serif;
    font-size: 16px;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    background: $color_2 url(images/pattern.png) repeat 0 0;
    background-size: 20px auto;
    color: $color_1;
}

h1 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 25px 100px 25px 55px;
    background-color: scale-color($color_1, $lightness: -10%);
}

h2 { font-family: 'Oswald', sans-serif; font-size: 1.5em; margin: 0 0 12px 0; }

h3 { font-family: 'Oswald', sans-serif; font-size: 1.2em; }

main { margin: 0 auto; padding: 20px 45px; font-size: 16px; background-color: #fff; }

main::after { content:''; display: block; clear: both; }

header {
    height: 150px;
    background: $color_1 url(images/banner.png) no-repeat center top;
    position: relative;
}

article { width: 65%; float: left; }

article > div { padding: 15px; }

aside {
    width: 30%;
    float: left;
    margin: 50px 0px 0px 3%;
    font-size: .9em;
    line-height: 1.2em;
}

aside > div {
    padding: 10px 15px;
    border: 1px solid $color_1;
    color: $color_1;
    background-color: rgba($color_3, $alpha: 0.1);
}

aside > div h3 {
    background-color: $color_3;
    color: #fff;
    margin: -10px -15px 15px -15px;
    padding: 8px 5px 12px 15px;
}

.bar {
    width: 100%;
    height: 15px;
    background-color: scale-color($color_2, $lightness: -5%);
}

.bar div {
    width: 50%;
    height: inherit;
    background-color: scale-color($color_2, $lightness: 10%);
}