:root {

--white: 255, 255, 255;
--black: 0, 0, 0;

--grey-darkest: 60, 60, 60;
--grey-dark: 120, 120, 120;
--grey: 180, 180, 180;
--grey-light: 240, 240, 240;

--red-dark: 153, 0, 0;
--red: 224, 0, 0;
--red-light: 255, 51, 51;

--green-dark: 0, 102, 0;
--green: 0, 153, 0;
--green-light: 0, 204, 0;

--blue-dark: 0, 51, 153;
--blue: 0, 153, 204;
--blue-light: 51, 204, 255;

--yellow-dark: 204, 204, 0;
--yellow: 255, 255, 0;
--yellow-light: 255, 255, 153;

--orange-dark: 204, 102, 0;
--orange: 255, 102, 0;
--orange-light: 255, 153, 0;

--purple-dark: 61, 0, 92;
--purple: 117, 32, 106;
--purple-light: 126, 76, 203;

--fuchsia-dark: 209, 0, 209;
--fuchsia: 255, 0, 255;
--fuchsia-light: 255, 92, 255;

--male: 0, 153, 204;
--female: 241, 95, 137;

}

.bg-transparent {background-color:var(--white), 0;}
.bg-white {background-color:rgba(var(--white), 1);}
.bg-black {background-color:rgba(var(--black), 1);}
.bg-grey-darkest {background-color: rgba(var(--grey-darkest), 1);}
.bg-grey-dark {background-color: rgba(var(--grey-dark), 1);}
.bg-grey {background-color: rgba(var(--grey), 1);}
.bg-grey-light {background-color: rgba(var(--grey-light), 1);}
.bg-red {background-color: rgba(var(--red), 1);}
.bg-red-light {background-color: rgba(var(--red-light), 1);}
.bg-red-dark {background-color: rgba(var(--red-dark), 1);}
.bg-green {background-color: rgba(var(--green), 1);}
.bg-green-light {background-color: rgba(var(--green-light), 1);}
.bg-green-dark {background-color: rgba(var(--green-dark), 1);}
.bg-blue {background-color: rgba(var(--blue), 1);}
.bg-blue-light {background-color: rgba(var(--blue-light), 1);}
.bg-blue-dark {background-color: rgba(var(--blue-dark), 1);}
.bg-yellow {background-color: rgba(var(--yellow), 1);}
.bg-yellow-light {background-color: rgba(var(--yellow-light), 1);}
.bg-yellow-dark {background-color: rgba(var(--yellow-dark), 1);}
.bg-orange {background-color: rgba(var(--orange), 1);}
.bg-orange-light {background-color: rgba(var(--orange-light), 1);}
.bg-orange-dark {background-color: rgba(var(--orange-dark), 1);}
.bg-purple {background-color: rgba(var(--purple), 1);}
.bg-purple-light {background-color: rgba(var(--purple-light), 1);}
.bg-purple-dark {background-color: rgba(var(--purple-dark), 1);}
.bg-fuchsia {background-color: rgba(var(--fuchsia), 1);}
.bg-fuchsia-light {background-color: rgba(var(--fuchsia-light), 1);}
.bg-fuchsia-dark {background-color: rgba(var(--fuchsia-dark), 1);}
.bg-male {background-color: rgba(var(--male), 1);}
.bg-female {background-color: rgba(var(--female), 1);}

.bg-white-hover:hover {background-color:rgba(var(--white), 1);}
.bg-black-hover:hover {background-color:rgba(var(--black), 1);}
.bg-grey-darkest-hover:hover {background-color: rgba(var(--grey-darkest), 1);}
.bg-grey-dark-hover:hover {background-color: rgba(var(--grey-dark), 1);}
.bg-grey-hover:hover {background-color: rgba(var(--grey), 1);}
.bg-grey-light-hover:hover {background-color: rgba(var(--grey-light), 1);}
.bg-red-hover:hover {background-color: rgba(var(--red), 1);}
.bg-red-light-hover:hover {background-color: rgba(var(--red-light), 1);}
.bg-red-dark-hover:hover {background-color: rgba(var(--red-dark), 1);}
.bg-green-hover:hover {background-color: rgba(var(--green), 1);}
.bg-green-light-hover:hover {background-color: rgba(var(--green-light), 1);}
.bg-green-dark-hover:hover {background-color: rgba(var(--green-dark), 1);}
.bg-blue-hover:hover {background-color: rgba(var(--blue), 1);}
.bg-blue-light-hover:hover {background-color: rgba(var(--blue-light), 1);}
.bg-blue-dark-hover:hover {background-color: rgba(var(--blue-dark), 1);}
.bg-yellow-hover:hover {background-color: rgba(var(--yellow), 1);}
.bg-yellow-light-hover:hover {background-color: rgba(var(--yellow-light), 1);}
.bg-yellow-dark-hover:hover {background-color: rgba(var(--yellow-dark), 1);}
.bg-orange-hover:hover {background-color: rgba(var(--orange), 1);}
.bg-orange-light-hover:hover {background-color: rgba(var(--orange-light), 1);}
.bg-orange-dark-hover:hover {background-color: rgba(var(--orange-dark), 1);}
.bg-purple-hover:hover {background-color: rgba(var(--purple), 1);}
.bg-purple-light-hover:hover {background-color: rgba(var(--purple-light), 1);}
.bg-purple-dark-hover:hover {background-color: rgba(var(--purple-dark), 1);}
.bg-fuchsia-hover:hover {background-color: rgba(var(--fuchsia), 1);}
.bg-fuchsia-light-hover:hover {background-color: rgba(var(--fuchsia-light), 1);}
.bg-fuchsia-dark-hover:hover {background-color: rgba(var(--fuchsia-dark), 1);}
.bg-male-hover:hover {background-color: rgba(var(--male), 1);}
.bg-female-hover:hover {background-color: rgba(var(--female), 1);}

.text-white {color:rgba(var(--white), 1);}
.text-black {color:rgba(var(--black), 1);}
.text-grey-darkest {color: rgba(var(--grey-darkest), 1);}
.text-grey-dark {color: rgba(var(--grey-dark), 1);}
.text-grey {color: rgba(var(--grey), 1);}
.text-grey-light {color: rgba(var(--grey-light), 1);}
.text-red {color: rgba(var(--red), 1);}
.text-red-light {color: rgba(var(--red-light), 1);}
.text-red-dark {color: rgba(var(--red-dark), 1);}
.text-green {color: rgba(var(--green), 1);}
.text-green-light {color: rgba(var(--green-light), 1);}
.text-green-dark {color: rgba(var(--green-dark), 1);}
.text-blue {color: rgba(var(--blue), 1);}
.text-blue-light {color: rgba(var(--blue-light), 1);}
.text-blue-dark {color: rgba(var(--blue-dark), 1);}
.text-yellow {color: rgba(var(--yellow), 1);}
.text-yellow-light {color: rgba(var(--yellow-light), 1);}
.text-yellow-dark {color: rgba(var(--yellow-dark), 1);}
.text-orange {color: rgba(var(--orange), 1);}
.text-orange-light {color: rgba(var(--orange-light), 1);}
.text-orange-dark {color: rgba(var(--orange-dark), 1);}
.text-purple {color: rgba(var(--purple), 1);}
.text-purple-light {color: rgba(var(--purple-light), 1);}
.text-purple-dark {color: rgba(var(--purple-dark), 1);}
.text-fuchsia {color: rgba(var(--fuchsia), 1);}
.text-fuchsia-light {color: rgba(var(--fuchsia-light), 1);}
.text-fuchsia-dark {color: rgba(var(--fuchsia-dark), 1);}
.text-male {color: rgba(var(--male), 1);}
.text-female {color: rgba(var(--female), 1);}

.text-white-important {color:rgba(var(--white), 1)!important;}
.text-black-important {color:rgba(var(--black), 1)!important;}
.text-grey-darkest-important {color: rgba(var(--grey-darkest), 1)!important;}
.text-grey-dark-important {color: rgba(var(--grey-dark), 1)!important;}
.text-grey-important {color: rgba(var(--grey), 1)!important;}
.text-grey-light-important {color: rgba(var(--grey-light), 1)!important;}
.text-red-important {color: rgba(var(--red), 1)!important;}
.text-red-light-important {color: rgba(var(--red-light), 1)!important;}
.text-red-dark-important {color: rgba(var(--red-dark), 1)!important;}
.text-green-important {color: rgba(var(--green), 1)!important;}
.text-green-light-important {color: rgba(var(--green-light), 1)!important;}
.text-green-dark-important {color: rgba(var(--green-dark), 1)!important;}
.text-blue-important {color: rgba(var(--blue), 1)!important;}
.text-blue-light-important {color: rgba(var(--blue-light), 1)!important;}
.text-blue-dark-important {color: rgba(var(--blue-dark), 1)!important;}
.text-yellow-important {color: rgba(var(--yellow), 1)!important;}
.text-yellow-light-important {color: rgba(var(--yellow-light), 1)!important;}
.text-yellow-dark-important {color: rgba(var(--yellow-dark), 1)!important;}
.text-orange-important {color: rgba(var(--orange), 1)!important;}
.text-orange-light-important {color: rgba(var(--orange-light), 1)!important;}
.text-orange-dark-important {color: rgba(var(--orange-dark), 1)!important;}
.text-purple-important {color: rgba(var(--purple), 1)!important;}
.text-purple-light-important {color: rgba(var(--purple-light), 1)!important;}
.text-purple-dark-important {color: rgba(var(--purple-dark), 1)!important;}
.text-fuchsia-important {color: rgba(var(--fuchsia), 1)!important;}
.text-fuchsia-light-important {color: rgba(var(--fuchsia-light), 1)!important;}
.text-fuchsia-dark-important {color: rgba(var(--fuchsia-dark), 1)!important;}
.text-male-important {color: rgba(var(--male), 1)!important;}
.text-female-important {color: rgba(var(--female), 1)!important;}

.text-white-hover:hover {color:rgba(var(--white), 1);}
.text-black-hover:hover {color:rgba(var(--black), 1);}
.text-grey-darkest-hover:hover {color: rgba(var(--grey-darkest), 1);}
.text-grey-dark-hover:hover {color: rgba(var(--grey-dark), 1);}
.text-grey-hover:hover {color: rgba(var(--grey), 1);}
.text-grey-light-hover:hover {color: rgba(var(--grey-light), 1);}
.text-red-hover:hover {color: rgba(var(--red), 1);}
.text-red-light-hover:hover {color: rgba(var(--red-light), 1);}
.text-red-dark-hover:hover {color: rgba(var(--red-dark), 1);}
.text-green-hover:hover {color: rgba(var(--green), 1);}
.text-green-light-hover:hover {color: rgba(var(--green-light), 1);}
.text-green-dark-hover:hover {color: rgba(var(--green-dark), 1);}
.text-blue-hover:hover {color: rgba(var(--blue), 1);}
.text-blue-light-hover:hover {color: rgba(var(--blue-light), 1);}
.text-blue-dark-hover:hover {color: rgba(var(--blue-dark), 1);}
.text-yellow-hover:hover {color: rgba(var(--yellow), 1);}
.text-yellow-light-hover:hover {color: rgba(var(--yellow-light), 1);}
.text-yellow-dark-hover:hover {color: rgba(var(--yellow-dark), 1);}
.text-orange-hover:hover {color: rgba(var(--orange), 1);}
.text-orange-light-hover:hover {color: rgba(var(--orange-light), 1);}
.text-orange-dark-hover:hover {color: rgba(var(--orange-dark), 1);}
.text-purple-hover:hover {color: rgba(var(--purple), 1);}
.text-purple-light-hover:hover {color: rgba(var(--purple-light), 1);}
.text-purple-dark-hover:hover {color: rgba(var(--purple-dark), 1);}
.text-fuchsia-hover:hover {color: rgba(var(--fuchsia), 1);}
.text-fuchsia-light-hover:hover {color: rgba(var(--fuchsia-light), 1);}
.text-fuchsia-dark-hover:hover {color: rgba(var(--fuchsia-dark), 1);}
.text-male-hover:hover {color: rgba(var(--male), 1);}
.text-female-hover:hover {color: rgba(var(--female), 1);}