/*Global TailwindCSS color, cloned for custom styles*/
:root {
	--text-transparent: transparent;
	--text-black: #000;
	--text-white: #fff;
	--text-gray-100: #f7fafc;
	--text-gray-200: #edf2f7;
	--text-gray-300: #e2e8f0;
	--text-gray-400: #cbd5e0;
	--text-gray-500: #a0aec0;
	--text-gray-600: #718096;
	--text-gray-700: #4a5568;
	--text-gray-800: #2d3748;
	--text-gray-900: #1a202c;
	--text-red-100: #fff5f5;
	--text-red-200: #fed7d7;
	--text-red-300: #feb2b2;
	--text-red-400: #fc8181;
	--text-red-500: #f56565;
	--text-red-600: #e53e3e;
	--text-red-700: #c53030;
	--text-red-800: #9b2c2c;	
	--text-red-900: #742a2a;	
	--text-orange-100: #fffaf0;	
	--text-orange-200: #feebc8;	
	--text-orange-300: #fbd38d;	
	--text-orange-400: #f6ad55;	
	--text-orange-500: #ed8936;	
	--text-orange-600: #dd6b20;	
	--text-orange-700: #c05621;	
	--text-orange-800: #9c4221;	
	--text-orange-900: #7b341e;	
	--text-yellow-100: #fffff0;	
	--text-yellow-200: #fefcbf;	
	--text-yellow-300: #faf089;	
	--text-yellow-400: #f6e05e;	
	--text-yellow-500: #ecc94b;	
	--text-yellow-600: #d69e2e;	
	--text-yellow-700: #b7791f;	
	--text-yellow-800: #975a16;	
	--text-yellow-900: #744210;	
	--text-green-100: #f0fff4;	
	--text-green-200: #c6f6d5;	
	--text-green-300: #9ae6b4;	
	--text-green-400: #68d391;	
	--text-green-500: #48bb78;	
	--text-green-600: #38a169;	
	--text-green-700: #2f855a;	
	--text-green-800: #276749;	
	--text-green-900: #22543d;	
	--text-teal-100: #e6fffa;	
	--text-teal-200: #b2f5ea;	
	--text-teal-300: #81e6d9;	
	--text-teal-400: #4fd1c5;	
	--text-teal-500: #38b2ac;	
	--text-teal-600: #319795;	
	--text-teal-700: #2c7a7b;	
	--text-teal-800: #285e61;	
	--text-teal-900: #234e52;	
	--text-blue-100: #ebf8ff;	
	--text-blue-200: #bee3f8;	
	--text-blue-300: #90cdf4;	
	--text-blue-400: #63b3ed;	
	--text-blue-500: #4299e1;	
	--text-blue-600: #3182ce;	
	--text-blue-700: #2b6cb0;	
	--text-blue-800: #2c5282;	
	--text-blue-900: #2a4365;
	--text-indigo-100: #ebf4ff;
	--text-indigo-200: #c3dafe;	
	--text-indigo-300: #a3bffa;	
	--text-indigo-400: #7f9cf5;	
	--text-indigo-500: #667eea;	
	--text-indigo-600: #5a67d8;	
	--text-indigo-700: #4c51bf;	
	--text-indigo-800: #434190;	
	--text-indigo-900: #3c366b;	
	--text-purple-100: #faf5ff;	
	--text-purple-200: #e9d8fd;	
	--text-purple-300: #d6bcfa;	
	--text-purple-400: #b794f4;	
	--text-purple-500: #9f7aea;	
	--text-purple-600: #805ad5;	
	--text-purple-700: #6b46c1;	
	--text-purple-800: #553c9a;	
	--text-purple-900: #44337a;	
	--text-pink-100: #fff5f7;	
	--text-pink-200: #fed7e2;	
	--text-pink-300: #fbb6ce;	
	--text-pink-400: #f687b3;	
	--text-pink-500: #ed64a6;	
	--text-pink-600: #d53f8c;	
	--text-pink-700: #b83280;	
	--text-pink-800: #97266d;	
	--text-pink-900: #702459;	

	--text-pink-1: #CD18F1;
	--text-green-1: #4FE8D4;
	--text-green-2: #5FE052;
	--text-blue-1: #001731;
	--text-blue-2: #0096E0;
	--text-red-1: #E72F7D;
}

.text-pink-1 {
	color: #CD18F1;
}
.text-green-1 {
	color: #4FE8D4;
}
.text-green-2 {
	color: #5FE052;
}
.text-blue-1 {
	color: #001731;
}
.text-blue-2 {
	color: #0096E0;
}
.text-red-1 {
	color: #E72F7D;
}

.bg-pink-1 {
	background-color: #CD18F1;
}
.bg-green-1 {
	background-color: #4FE8D4;
}
.bg-blue-1 {
	background-color: #001731;
}
.bg-blue-2 {
	background-color: #0096E0;
}

.border-pink-1 {
	border-color: #CD18F1;
}
.border-green-1 {
	border-color: #4FE8D4;
}
.border-blue-1 {
	border-color: #001731;
}
.border-blue-2 {
	border-color: #0096E0;
}

@font-face {
    font-family: slackey;
    src: url(/static/fonts/Slackey/Slackey-Regular.ttf)
}

@font-face {
    font-family: barrio;
    src: url(/static/fonts/Barrio/Barrio-Regular.ttf)
}

@font-face {
    font-family: supermercado;
    src: url(/static/fonts/Supermercado/SupermercadoOne-Regular.ttf)
}

.cairo-regular {
	font-family: cairo, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.cairo-bold {
	font-family: cairo, sans-serif;
	font-weight: 700;
	font-style: normal;
}

h1, h2, h3 {
	font-family: slackey;
    font-weight: 400;
    font-style: normal;
}

p, a, span, div, section, ol, ul, li {
	font-family: cairo, sans-serif;
    font-weight: 400;
    font-style: normal;
	/*line-height: 2.5rem;*/
}

.font-slackey {
	font-family: slackey;
	font-weight: 400;
	font-style: normal;
}
.font-barrio {
	font-family: barrio;
    font-weight: 400;
    font-style: normal;
	line-height: 1em;
}

.font-supermercado {
	font-family: supermercado;
    font-weight: 400;
    font-style: normal;
}

/*Background Image*/
#mainBody {
    background: white;
}

#footer {
	background-image: url("../../images/footer-bg1.png");
	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: contain;

  	/*
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	*/
	
	
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
}

.rainbow-text-1 {
	background-image: linear-gradient(45deg, #F36708, #F36708 15%, #05C300 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow-text-2 {
	background-image: linear-gradient(45deg, #FF4576, #FF4576 15%, #E38C08 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow-text-3 {
	background-image: linear-gradient(45deg, #4DE9B6, #4DE9B6 15%, #B63FFA 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow-text-4 {
	background-image: linear-gradient(45deg, #CD18F1, #1AA5E0 40%, #01EA7F);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow-text-5 {
	background-image: linear-gradient(45deg, #0096E0, #0096E0 15%, #FF00FF 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow-text-6 {
	background-image: linear-gradient(60deg, #EF3383, #EF3383 15%, #F5D11C 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

}
.rainbow-text-7 {
	background-image: linear-gradient(60deg, #B43FFA, #B43FFA 15%, #FF0000 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow-bg {
	background-image: linear-gradient(60deg, #a736ff, #8953ff 22%, #ff48cc 78%, #daff45);
	color: #fff;
}
.rainbow-bg:hover{
	background-image: linear-gradient(45deg, #8953ff, #ff48cc 20%, #8cf1c4 30%, #a736ff);
	color: #fff;
}

.rainbow-bg-1 {
	background-image: linear-gradient(45deg, rgb(249, 14, 12, 0.1), rgb(162, 114, 136, 0.1) 50%, rgb(79, 209, 254, 0.1));
}

.rainbow-bg-2 {
	background-image: linear-gradient(45deg, #CD18F1, #1AA5E0 40%, #01EA7F);
}

.roadmap {
    background-image: url("/static/images/roadmap.png");
	background-size: cover;
	width: 709px;
	height: 608px;
}

@media (max-width: 639px) {
	.roadmap {
		width: 350px;
		height: 300px;
	}
}

@media (min-width: 639px) {
	.roadmap {
		width: 500px;
		height: 429px;
	}
}

@media (min-width: 1024px) {
	.roadmap {
		width: 709px;
		height: 608px;
	}
}