hypothetical/resources/assets/less/app.less

// Core
@import "bootstrap/less/bootstrap";
@import "var";
@import "fonts";

// Supplementary
@import "elements/**";
@import "pages/**";

/*
 |
 |  Main Styles
 |
 */

html, body {
    width: 100%;
    height: 100%;
}

html.no-scroll { overflow-y: hidden; }

body {
    min-width: 300px;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-weight: 100;
    color: @c_text;
}

* {
    outline: none !important;
    .font_sans;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.index {
    .container {
        .content {
            text-align: center;

            .title {
                position: relative;
                top: ~"calc(50vh - 131px)";
                font-size: 96px;

                @media (max-width: 1225px) {
                    top: ~"calc(50vh - 119px)";
                    font-size: 82px;
                }

                @media (max-width: 1025px) {
                    top: ~"calc(50vh - 97px)";
                    font-size: 58px;
                }

                @media (max-width: (@screen-sm - 1)) {
                    top: ~"calc(50vh - 83px)";
                    font-size: 42px;
                }
            }
        }
    }
}