:root {
/* ------------ COLORS PALETTE ------------ */
--white: #ffffff;
--icy-blue: #afddff;
--cool-sky: #67b7f2;
--honeyberry: #6184d6;
--shiny-navy: #11128a;
--deep-navy: #080839;

/* ------------ GRADIENT ------------ */
/* Abyssal Glow */
--abyssal-glow: radial-gradient(var(--shiny-navy), var(--shiny-navy), var(--deep-navy));
/* Cosmic Berry */
--cosmic-berry: radial-gradient(var(--honeyberry), var(--shiny-navy), var(--deep-navy));
/* Berry Nightfall */
--berry-nightfall: radial-gradient(var(--honeyberry), var(--shiny-navy));
/* Frostbloom */
--frostbloom: radial-gradient(var(--icy-blue), var(--cool-sky), var(--honeyberry));
/* Permafrost */
--permafrost: radial-gradient(var(--icy-blue), var(--cool-sky));

/* ------------ CUSTOM GRADIENT ------------ */
--ag-custom: radial-gradient(circle 30vmax, var(--shiny-navy), var(--shiny-navy), var(--deep-navy));
--bn-custom: radial-gradient(circle 30vmax, var(--honeyberry), var(--shiny-navy));
--pf-custom: radial-gradient(circle 30vmax, var(--icy-blue), var(--cool-sky));
}

/* ------------ Colors class ------------ */
/* Background */
.bg-white{
    background: var(--white);
}
.bg-icy-blue{
    background: var(--icy-blue);
}
.bg-cool-sky{
    background: var(--cool-sky);
}
.bg-honeyberry{
    background: var(--honeyberry);
}
.bg-shiny-navy{
    background: var(--shiny-navy);
}
.bg-deep-navy{
    background: var(--deep-navy);
}
.bg-abyssal-glow{
    background: var(--abyssal-glow);
}
.bg-cosmic-berry{
    background: var(--cosmic-berry);
}
.bg-berry-nightfall{
    background: var(--berry-nightfall);
}
.bg-frostbloom{
    background: var(--frostbloom);
}
.bg-permafrost{
    background: var(--permafrost);
}

/* Color */
.white{
    color: var(--white);
}
.icy-blue{
    color: var(--icy-blue);
}
.cool-sky{
    color: var(--cool-sky);
}
.honeyberry{
    color: var(--honeyberry);
}
.shiny-navy{
    color: var(--shiny-navy);
}
.deep-navy{
    color: var(--deep-navy);
}
.abyssal-glow{
    color: var(--abyssal-glow);
}