body
{
    margin: 0;
    padding: 0;

    padding-bottom: 2em;
}

.hidden { display: none; }

.debug_hidden { display: none; }

:root
{
    --side-padding: 18vw;
    --largescreen-side-padding: 22vw;

    cursor: default;
    user-select: none;

    font-family: var(--font-primary);
    font-size: var(--font-label);

    /* Color Variables */
    --color-text: #000000;
    --color-text-light: #3a3a3a;
    --color-text-light-gray: #5B5B5B;
    --color-text-gray: #4E4E4E;
    --color-text-secondary: #EFEFEF;

    --color-purple: #8F00FF;
    --color-green: #00A307;
    --color-blue: #0F54DC;
    --color-orange: #FF7B00;
    --color-red: #CA1515;

    --color-cyan: #0c7179;
    --color-cyan-dark: #0c4c4b;
    --color-brown: #693505;
    --color-yellow: #e47208;
    --color-green-light: #00e20b;
    --color-green-dark: #006605;
    --color-blue-light: #3a7bff;
    --color-purple-dark: #6e0075;
    --color-red-dark: #941700;

    --color-background-white: #FFFFFF;
    --color-background-light-white: #EFEFEF;
    --color-background-preview: #E2E2E2;
    --color-background-preview-transparent: #e2e2e2e5;
    --color-background-black: #141414;
    --color-background-gray: #202020;

    --gradient-menu: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, #AD45FF 0%, #8F00FF 10%, #FF993A 90%, #FF7B00 100%);    
    --gradient-menu-panel: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(96deg, #AD45FF 0%, #8F00FF 10%, #FF7B00 90%, #FF7B00 100%);

    --gradient-purple: linear-gradient(90deg, #AD45FF, #8F00FF);
    --gradient-orange: linear-gradient(90deg, #FF993A, #FF7B00);
    --gradient-cyan: linear-gradient(90deg, #0c4c4b, #0c7179);

    --filter-black: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(210deg) brightness(97%) contrast(100%);
    --filter-purple: brightness(0) saturate(100%) invert(9%) sepia(100%) saturate(6767%) hue-rotate(275deg) brightness(108%) contrast(118%);
    --filter-orange: brightness(0) saturate(100%) invert(52%) sepia(95%) saturate(2850%) hue-rotate(2deg) brightness(105%) contrast(104%);
    --filter-cyan: brightness(0) saturate(100%) invert(20%) sepia(73%) saturate(3363%) hue-rotate(170deg) brightness(93%) contrast(91%);

    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'post_no_bills_colomboXBd', sans-serif;

    /* Responsive Font Sizes */
    --font-hero: clamp(28px, 4vw, 48px);
    --font-h1: clamp(24px, 3vw, 32px);
    --font-h2: clamp(20px, 2.5vw, 28px);
    --font-h3: clamp(18px, 2vw, 24px);
    --font-body: clamp(16px, 1.8vw, 18px);
    --font-small: clamp(14px, 1.6vw, 16px);
    --font-label: clamp(12px, 1.4vw, 14px);
    --font-small-label: clamp(10px, 1.2vw, 12px);

    /* variables */
    --padding: 0.5em;
    --gap: 1em;
    --border-radius: 0.5em;

    /* menu */
    --menu-height: 3em;

    /* product grid modifier */
    --productLinkTreeGridModifier: 1;
    --deluxeEditionGridModfier: 1;
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

p
{
    font-size: var(--font-body);
    white-space: pre-wrap;
}

.loadingPreview
{
    cursor: not-allowed;
    background-color: var(--color-background-preview);
    animation: loadingPreview_anim 1.2s infinite;
}
@keyframes loadingPreview_anim
{
    0% { background-color: var(--color-background-preview); }
    100% { background-color: var(--color-background-preview-transparent); }
}


/* large Mobile (>= 480px) */
@media (min-width: 480px)
{
}


/* Tablet (>= 768px) */
@media (min-width: 768px)
{
}


/* Laptop (>= 1024px) */
@media (min-width: 1024px)
{
    :root
    {
        --side-padding: 12vw;
        --largescreen-side-padding: 16vw;
    }
}


/* Desktop (>= 1440px) */
@media (min-width: 1440px)
{
    :root
    {
        --side-padding: var(--largescreen-side-padding);
    }
}

/* Desktop (>= 2560px) */
@media (min-width: 2560)
{
    :root
    {
        --side-padding: calc((100vw - 1920px) / 2);
    }
}