// USER VARIABLES SECTION

@accent: orange; // Accent Color
@fontsize: 16px; // Body Font Size
@textcolor: #333; // Text Color
@lineheight: 1.65; // Document Line Height
@userfont: roboto-oh5, sans-serif; // User Font Family
@systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif; // System Font Family

// IMPORT SECTION

@import (less) 'node_modules/bootstrap/dist/css/bootstrap-reboot.css'; // Bootstrap Reboot collection
// @import (less) 'node_modules/bootstrap/dist/css/bootstrap-grid.css'; // Optional Bootstrap Grid

// FONTS LOAD SECTION

.font(@fname, @fstyle, @fweight, @furl) {
	@font-face {
		font-family: @fname;
		font-style: @fstyle;
		font-weight: @fweight;
		src: url(@furl) format('woff2');
	}
}

.font('roboto-oh5', normal, 400, '../fonts/roboto-regular-webfont.woff2');
.font('roboto-oh5', italic, 400, '../fonts/roboto-italic-webfont.woff2');
.font('roboto-oh5', normal, 700, '../fonts/roboto-bold-webfont.woff2');
.font('roboto-oh5', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2');

// GENERAL CSS SETTINGS

::placeholder {
	color: #666;
}

::selection {
	background-color: @accent;
	color: #fff;
}

input, textarea {
	outline: none;
	&:focus:required:invalid { border-color: red }
	&:required:valid { border-color: green }
}

body {
	font-family: @userfont;
	font-size: @fontsize;
	line-height: @lineheight;
	color: @textcolor;
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}
