// ---------------------------------
// GLOBAL VARIABLES
@spacing: 10px;
@spacing-small: 6px;
@accent-color: #ffe600;
@hovered-color: rgba(0, 0, 0, 0.6);
@light-gray-bg: rgb(244, 243, 244);
@modal-left-spacing: 100px;
@menu-size: 290px;

@content-margin-min: 200px;
@content-margin: 15vw;
@content-margin-max: 360px;

@small-font-size: 13px;
@medium-font-size: 26px;
@big-font-size: 73px;
@big-font-size-tablet: 52px;
@big-font-size-phone: 36px;

// ---------------------------------
// BREAKPOINTS

@screen-phone-max: (@screen-tablet - 1);

@screen-tablet: 768px;
@screen-tablet-max: (@screen-desktop - 1);

@screen-desktop: 992px;
@screen-desktop-max: (@screen-desktop-hd - 1);

@screen-desktop-hd: 1100px;

@phone: ~'(max-width: @{screen-phone-max})';
@tablet: ~'(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})';
@desktop: ~'(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})';
@desktop-hd: ~'(min-width: @{screen-desktop-hd})';

@tablet-up: ~'(min-width: @{screen-tablet})';
@desktop-up: ~'(min-width: @{screen-desktop})';