$baseFont: "source-sans-pro", Arial, sans-serif;
$baseFontSize: 20px;
$baseLineHeight: 1.5;
$baseFontWeight: 300;

$baseFontColor: #000;
$headingColor: #000;

$white: #ffffff;
$black: #1d1d1b;
$gray: #aaaaaa;
$lightGray: #cccccc;
$yellow: #fbc43a;
$darkYellow: #977114;

$outline: #0909ff;
$outlineOffset: 0.3rem;

$xxs: 420px;
$xs: 576px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1370px;
$xxl: 1570px;

$mobileMenu: $md;

$transitionSpeedTiming: 0.2s ease-out;

$itemGap: 1.5rem;

:root {
    --block-padding: 4.5rem;
    --block-padding-narrow: 2rem;

    --container-padding: 1rem;

    --white: #{$white};
    --black: #{$black};
    --gray: #{$gray};
    --lightGray: #{$lightGray};
    --yellow: #{$yellow};
    --darkYellow: #{$darkYellow};
    --outline: #{$outline};
}

/* laptop < 1370 */
@media screen and (max-width: $xl) {
    :root {
        --block-padding: 3.5rem;
    }
}

@media screen and (max-width: $lg) {
}

@media screen and (max-width: $md) {
    :root {
        --block-padding: 3rem;
    }
}

/* mobile < 768 */
@media screen and (max-width: $sm) {
    :root {
        --block-padding: 2.5rem;
    }
}

@media screen and (max-width: $xs) {
}

@media screen and (max-width: $xxs) {
}
