//==============================================================================
// BASE
//==============================================================================

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section,
summary {
    display: block;
}



audio,
canvas,
video {
    display: inline-block;
}



@include _selection() {
    background-color: #232731;
    color: gold;
}



@include _img-selection() {
    background: transparent;
}



svg {
    fill: currentColor; // So SVG can inherit it's parent color by default

    &:not(:root) {
        overflow: hidden;
    }
}





[hidden],
template {
    display: none;
}



*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



html,
body {
    height: 100%;
}



html {
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 87.5%;

    @include mq(mq-medium){
        font-size: 100%;
    }

    @include mq(mq-xlarge){
        font-size: 120%;
    }
}



body {
    @include rem(font-size, $basefont);
    margin: 0;
    line-height: $lineheight;
    font-family: $font-stack;
    background: $color-bg;
    color: $color-text;

    @include mq(mq-large){
        text-rendering: optimizeLegibility;
    }

}



@-webkit-viewport {
    width: device-width
}
@-moz-viewport {
    width: device-width
}
@-ms-viewport {
    width: device-width
}
@-o-viewport {
    width: device-width
}
@viewport{
    width: device-width
}