/* Grid */
@num-cols: 12;
@rowWidth: 100%;
@gutter: 20px;
@col-padding-right: @gutter / 2;
@col-padding-left: @gutter /2;
@col-unit: ((@rowWidth) / @num-cols);
@col-identifier: col;
@col-offset-identifier: offset;
					

				
body {
    @media @mobile {
      background: orange;
    }
    @media @tablet {
      background: purple;
    }
    @media @desktop {
      background: green;
    }
    @media @desktop-xl {
      background: blue;
    }
    @media @desktop, @desktop-xl {
      color: black;
    }
}
				

<input type="text" maxlength="6"/>

<input type="text" maxlength="6" disabled="disabled" value="this is a disabled input"/>

<input type="search" list="search-suggestions"/>
	<datalist id="search-suggestions">
	<option label="DM" value="Depeche Mode">
	<option label="Moz" value="Morrissey">
	<option label="NO" value="New Order">
	<option label="TC" value="The Cure">
	</datalist>

<input type="tel" pattern="[0-9]{10}" name="tel" title="Phone Number?!?!"/>

<input type="password" placeholder="Password"/>

<input type="url" id="url" name="earl" required />

<input type="email" placeholder="foo@bar.com" />

<input type="datetime" />

<input type="date" />

<input type="month" />

<input type="week" />

<input type="time" />

<input type="datetime-local" />

<input type="number" min="99" max="101"/>

<input type="range" required name="range" /><output onforminput="value=range.value">0</output>

<input type="color"/>

<input type="checkbox"/>

<input type="radio"/>

<input type="file" multiple />

Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

background-color: lighten(@color, %);

background-color: darken(@color, %);