/**

* Basic styling
*/
body {
 font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
 color: $text-color;
 background-color: $background-color;
 -webkit-text-size-adjust: 100%;
 -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern" 1;
      -o-font-feature-settings: "kern" 1;
         font-feature-settings: "kern" 1;
 font-kerning: normal;
 display: flex;
 min-height: 100vh;
 flex-direction: column;
 overflow-wrap: break-word;

}

/**

* Wrapper
*/

.wrapper {

max-width: calc(#{$content-width} - (#{$spacing-unit}));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
@extend %clearfix;

@media screen and (min-width: $on-large) {
    max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
    padding-right: $spacing-unit;
    padding-left: $spacing-unit;
}

}

/**

* Wrapper for about page
*/
.wrapper-about {
 max-width: calc(#{$about-width} - (#{$spacing-unit}));
 margin-right: auto;
 margin-left: auto;
 padding-right: $spacing-unit / 2;
 padding-left: $spacing-unit / 2;
 @extend %clearfix;

 @media screen and (min-width: $on-large) {
     max-width: calc(#{$about-width} - (#{$spacing-unit} * 2));
     padding-right: $spacing-unit;
     padding-left: $spacing-unit;
 }

}

/**
 * Clearfix
 */
 %clearfix:after {
   content: "";
   display: table;
   clear: both;

}