html, body {
    height: auto;
}
html {
    @include flex(flex, column);
    min-height: 100%;
}
body {
    @include flex(flex, column, null, null, 1);
    margin: 0;
    font-family: $base-fontFamily;
    font-size: px($base-fontSize);
    line-height: $base-lineHeight;
    font-weight: $base-fontWeight;
    color: color($base-color-clr, $base-color-wgh);

    @each $mediaClass, $mediaSize, $mediaBase in $mediaQs {
        @if($mediaClass != $mediaQ-base){
            @media ($mediaSize) {
                font-size: $mediaBase +px;
            }
        }
    }
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    flex-shrink: 0;
}
svg {
    display: block;
    @include widthHeight(inherit);
    fill: currentColor;

    path {
        fill: currentColor;
    }
}
canvas {
    display: block;
    max-width: 100%;
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
p {
    margin: 0 0 0.75em;

    &:last-child {
        margin-bottom: 0;
    }
}
a {
    color: color(prm);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
    &:focus {
        outline: none;
    }
}
strong {
    font-weight: $fontWeight-sb;
}
fieldset {
    margin: 0;
    border: 0;
    padding: 0;
}
input {
    display: block;
    background-color: transparent;
    border: 0;
    font: unset;
    color: inherit;
}
button {
    border: 0;
    padding: $integer-8 $integer-15;
    font: unset;

    &:focus {
        outline: none;
    }
    &[disabled] {
        cursor: default;
    }
}
label {
    display: block;
}