@mixin header-font($size: null) {
    font-weight: 400;
    font-size: $size;
}

html {
    @media all and (min-height: 720px) {
        font-size: 20px;
    }

    /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
    @media all and (min-height: 1000px) {
        font-size: 27px;
    }
}

h1 {
    @include header-font(1.8em);

    .layout-desktop & {
        font-size: 2em;
    }
}

h2 {
    @include header-font(1.8em);
}

h3 {
    @include header-font(1.17em);
}