@sm: ~"(min-width: 599px)";
@md: ~"(min-width: 768px)";
@lg: ~"(min-width: 1024px)";
@xl: ~"(min-width: 1200px)";

@max-sm: ~"(max-width: 599px)";
@max-md: ~"(max-width: 768px)";
@max-lg: ~"(max-width: 1024px)";
@max-xl: ~"(max-width: 1200px)";

:root {
    /* Colors */
    --color-darkest: rgb(0,0,0);
    --color-dark: rgb(34, 34, 34);
    --color-neutral: rgb(235, 235, 235);
    --color-accent: rgb(255, 221, 0);
    --color-light-accent: rgb(250, 240, 178);
    --color-light: rgb(255,255,255);

    --select-border: #777;
    --select-arrow: #777;

    /* Fonts */
    --font-title: 'VIBC';
    --font-body: 'RealTextPro-Regular';

    /* Layout */
    --main-horizontal-margin: max(2px, 10vw);
    --main-horizontal-padding: var(--main-horizontal-margin);
    --main-vertical-margin: max(2px, 5vh);
    --main-vertical-padding: var(--main-vertical-margin);

    --small-horizontal-margin: max(2px, 2.5vw);
    --small-horizontal-margin: var(--small-vertical-margin);
    --small-vertical-margin: max(2px, 2.5vh);
    --small-horizontal-padding: var(--small-horizontal-margin);
    --small-vertical-padding: var(--small-vertical-margin);

    --gap-smallest: 6px;
    --gap-small: 15px;
    --gap-medium: 35px;
    --gap-big: 50px;
    --gap-horizontal: clamp(20px, 2vw, 40px);
    --gap-vertical: clamp(20px, 2vw, 40px);

    /* DON'T MODIFY */
    --fix-wp-gap: 0px;
}