/* Figma Styles of your File */
:root {
    /* Colors */
    --wire:
        linear-gradient(-77.29deg, rgba(0, 0, 0, 0) 0%, rgba(13, 12, 12, 1) 44.86416280269623%),
        linear-gradient(98.68deg, rgba(0, 0, 0, 0) 0%, rgba(13, 12, 12, 1) 44.86416280269623%),
        linear-gradient(180deg, rgba(51, 45, 44, 1) 0%, rgba(51, 45, 44, 0) 100%);
    --bg-grey-cultured: linear-gradient(to left, #0d0c0c, #0d0c0c);

    /* Fonts */
    --quote-font-family: Poly-Italic, sans-serif;
    --quote-font-size: 20px;
    --quote-line-height: normal;
    --quote-font-weight: 400;
    --quote-font-style: italic;

    /* Effects */
    --glow-box-shadow: 0px 0px 20px 0px rgba(209, 231, 224, 1);
    --redglow-box-shadow: 0px 0px 24px 0px rgba(116, 30, 32, 1), 0px 0px 20px 0px rgba(116, 30, 32, 1);
    --blackglow-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 1);
    --buttunshadow-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.25);
    --redneonglow-box-shadow: 0px 0px 20px 0px rgba(255, 13, 0, 1);
    --blueneonglow-box-shadow: 0px 0px 20px 0px rgba(0, 255, 240, 1);
    --innershadow-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    --redneonglow2-box-shadow: 0px 0px 20px 0px rgba(116, 30, 32, 1), inset 0px 0px 1px 0px rgba(0, 0, 0, 1);
    --dropshadow-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);

    /* COLOR NEUTRAL */
    --text-100: #f3eed9;
    --text-200: #d1e7e0;
    --text-invers-100: #2f4858;
    --text-invers-200: #741e20;
    --primary-100: #741e20;
    --primary-200: #ad514c;
    --bg-100: #0d0c0c;
    --bg-200: #332d2c;
    --neutral-white: #ffffff;
    --text-300: #625755;
    --bg-300: #eceaea;
    --text-invers-150: #6d97b0;

    --vertical-default-margin: 3rem;
    --small-max-width: 1392px;
    --normal-max-width: 1776px;
    --horizontal-default-margin: 1.2rem;
}

@space-xs: 0.25rem;
@space-sm: 0.5rem;
@space-md: 1rem;
@space-lg: 2rem;
@space-xl: 3rem;

@font-family: "Open Sans", sans-serif;

@large_desktop: ~"only screen and (min-width: 1440px) ";
@desktop: ~"only screen and (min-width: 1224px)";

@tablet: ~"only screen and (min-width: 968px) and (max-width: 1223px)";
@mobile: ~"only screen and (min-width: 100px) and (max-width: 967px)";
@min-tablet: ~"only screen and (min-width: 968px)";
@max-tablet: ~"only screen and (max-width: 1223px)";
@body-maxwidth: 1300px;

@media @tablet {
    :root {
        --horizontal-default-margin: 2.4rem;
    }
}
@media @large_desktop {
    :root {
        --horizontal-default-margin: 3.6rem;
    }
}

@media (min-width: 2200px) {
}
