// ==========================================================================
// Base layout
// ==========================================================================

// BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*,
*::after,
*::before {
    box-sizing: border-box;
}

// Hidden
[hidden] {
    display: none;
}

// Base
html {
    font-size: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

body {
    width: 100%;
    padding: @padding-base;
    background: @body-background;
    font-family: @font-family;
    .font-size();
    .font-smoothing(on);
    line-height: @line-height;
    text-align: center;
    color: @body-text-color;
}

// Header
header {
    padding-bottom: @padding-base;

    p {
        .font-size(18);

        &:last-child {
            margin: 0;
        }
    }

    @media (min-width: @screen-sm) {
        padding-bottom: (@padding-base * 3);
    }
}

// Sections
section {
    padding-bottom: @padding-base;

    @media (min-width: @screen-sm) {
        padding-bottom: (@padding-base * 2);
    }
}