@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

* {
	box-sizing: border-box;
	font-family: 'Source Sans 3', sans-serif;
	/* ***************************************************
	 * Define the colors from the Sagikos design system. *
	 *****************************************************
	*/
	
	/* Cyan */
	--cyan-5: #dffff2;
	--cyan-4: #bce6d4;
	--cyan-3: #9cd1bb;
	--cyan-2: #69af92;
	--cyan-1: #2f6750;
	--cyan-0: #1a2822;

	/* Blue */
	--blue-5: #e5e7ff;
	--blue-4: #cbcff9;
	--blue-3: #7582f4;
	--blue-2: #5660bc;
	--blue-1: #2f3678;
	--blue-0: #0f1233;

	/* Purple */
	--purple-5: #fcebfe;
	--purple-4: #edcff2;
	--purple-3: #c39ac9;
	--purple-2: #9c6ea3;
	--purple-1: #5b3e5f;
	--purple-0: #2a1b2c;

	/* Red */
	--red-5: #ffd4da;
	--red-4: #feb1bc;
	--red-3: #ff657a;
	--red-2: #c74c5d;
	--red-1: #852f3b;
	--red-0: #3f171c;

	/* Orange */
	--orange-5: #ffddc8;
	--orange-4: #fcb88e;
	--orange-3: #ff9b5e;
	--orange-2: #c16c38;
	--orange-1: #7b401d;
	--orange-0: #371f10;

	/* Yellow */
	--yellow-5: #faf1d8;
	--yellow-4: #fce199;
	--yellow-3: #ffd76d;
	--yellow-2: #b08923;
	--yellow-1: #624a0c;
	--yellow-0: #2c2616;

	/* Green */
	--green-5: #f2fed1;
	--green-4: #e2fe92;
	--green-3: #b1cf5d;
	--green-2: #718635;
	--green-1: #414a29;
	--green-0: #25281e;

	/* Gray */
	--gray-6: #f0f3f5;
	--gray-5: #e1e6e9;
	--gray-4: #CDD4D8;
	--gray-3: #b2b9bd;
	--gray-2: #696d77;
	--gray-1: #363d4c;
	--gray-0: #282a3a;

	/* White */
	--white: #ffffff;

	/* Black */
	--black: #000000;
}

/* Background colors */
.bg-cyan { background: var(--cyan-3); }
.bg-cyan-5 { background: var(--cyan-5); }
.bg-cyan-4 { background: var(--cyan-4); }
.bg-cyan-3 { background: var(--cyan-3); }
.bg-cyan-2 { background: var(--cyan-2); }
.bg-cyan-1 { background: var(--cyan-1); }
.bg-cyan-0 { background: var(--cyan-0); }

.bg-blue { background: var(--blue-3); }
.bg-blue-5 { background: var(--blue-5); }
.bg-blue-4 { background: var(--blue-4); }
.bg-blue-3 { background: var(--blue-3); }
.bg-blue-2 { background: var(--blue-2); }
.bg-blue-1 { background: var(--blue-1); }
.bg-blue-0 { background: var(--blue-0); }

.bg-purple { background: var(--purple-3); }
.bg-purple-5 { background: var(--purple-5); }
.bg-purple-4 { background: var(--purple-4); }
.bg-purple-3 { background: var(--purple-3); }
.bg-purple-2 { background: var(--purple-2); }
.bg-purple-1 { background: var(--purple-1); }
.bg-purple-0 { background: var(--purple-0); }

.bg-red { background: var(--red-3) !important; }
.bg-red-5 { background: var(--red-5) !important; }
.bg-red-4 { background: var(--red-4) !important; }
.bg-red-3 { background: var(--red-3) !important; }
.bg-red-2 { background: var(--red-2) !important; }
.bg-red-1 { background: var(--red-1) !important; }
.bg-red-0 { background: var(--red-0) !important; }

.bg-orange { background: var(--orange-3); }
.bg-orange-5 { background: var(--orange-5); }
.bg-orange-4 { background: var(--orange-4); }
.bg-orange-3 { background: var(--orange-3); }
.bg-orange-2 { background: var(--orange-2); }
.bg-orange-1 { background: var(--orange-1); }
.bg-orange-0 { background: var(--orange-0); }

.bg-yellow { background: var(--yellow-3); }
.bg-yellow-5 { background: var(--yellow-5); }
.bg-yellow-4 { background: var(--yellow-4); }
.bg-yellow-3 { background: var(--yellow-3); }
.bg-yellow-2 { background: var(--yellow-2); }
.bg-yellow-1 { background: var(--yellow-1); }
.bg-yellow-0 { background: var(--yellow-0); }

.bg-green { background: var(--green-3); }
.bg-green-5 { background: var(--green-5); }
.bg-green-4 { background: var(--green-4); }
.bg-green-3 { background: var(--green-3); }
.bg-green-2 { background: var(--green-2); }
.bg-green-1 { background: var(--green-1); }
.bg-green-0 { background: var(--green-0); }

.bg-gray { background: var(--gray-3); }
.bg-gray-5 { background: var(--gray-5); }
.bg-gray-4 { background: var(--gray-4); }
.bg-gray-3 { background: var(--gray-3); }
.bg-gray-2 { background: var(--gray-2); }
.bg-gray-1 { background: var(--gray-1); }
.bg-gray-0 { background: var(--gray-0); }

.bg-white { background: var(--white); }
.bg-black { background: var(--black); }


/* Text colors */
.text-cyan { color: var(--cyan-3); }
.text-cyan-5 { color: var(--cyan-5); }
.text-cyan-4 { color: var(--cyan-4); }
.text-cyan-3 { color: var(--cyan-3); }
.text-cyan-2 { color: var(--cyan-2); }
.text-cyan-1 { color: var(--cyan-1); }
.text-cyan-0 { color: var(--cyan-0); }

.text-blue { color: var(--blue-3); }
.text-blue-5 { color: var(--blue-5); }
.text-blue-4 { color: var(--blue-4); }
.text-blue-3 { color: var(--blue-3); }
.text-blue-2 { color: var(--blue-2); }
.text-blue-1 { color: var(--blue-1); }
.text-blue-0 { color: var(--blue-0); }

.text-purple { color: var(--purple-3); }
.text-purple-5 { color: var(--purple-5); }
.text-purple-4 { color: var(--purple-4); }
.text-purple-3 { color: var(--purple-3); }
.text-purple-2 { color: var(--purple-2); }
.text-purple-1 { color: var(--purple-1); }
.text-purple-0 { color: var(--purple-0); }

.text-red { color: var(--red-3); }
.text-red-5 { color: var(--red-5); }
.text-red-4 { color: var(--red-4); }
.text-red-3 { color: var(--red-3); }
.text-red-2 { color: var(--red-2); }
.text-red-1 { color: var(--red-1); }
.text-red-0 { color: var(--red-0); }

.text-orange { color: var(--orange-3); }
.text-orange-5 { color: var(--orange-5); }
.text-orange-4 { color: var(--orange-4); }
.text-orange-3 { color: var(--orange-3); }
.text-orange-2 { color: var(--orange-2); }
.text-orange-1 { color: var(--orange-1); }
.text-orange-0 { color: var(--orange-0); }

.text-yellow { color: var(--yellow-3); }
.text-yellow-5 { color: var(--yellow-5); }
.text-yellow-4 { color: var(--yellow-4); }
.text-yellow-3 { color: var(--yellow-3); }
.text-yellow-2 { color: var(--yellow-2); }
.text-yellow-1 { color: var(--yellow-1); }
.text-yellow-0 { color: var(--yellow-0); }

.text-green { color: var(--green-3); }
.text-green-5 { color: var(--green-5); }
.text-green-4 { color: var(--green-4); }
.text-green-3 { color: var(--green-3); }
.text-green-2 { color: var(--green-2); }
.text-green-1 { color: var(--green-1); }
.text-green-0 { color: var(--green-0); }

.text-gray { color: var(--gray-3); }
.text-gray-5 { color: var(--gray-5); }
.text-gray-4 { color: var(--gray-4); }
.text-gray-3 { color: var(--gray-3); }
.text-gray-2 { color: var(--gray-2); }
.text-gray-1 { color: var(--gray-1); }
.text-gray-0 { color: var(--gray-0); }

.text-white { color: var(--white) !important; }
.text-black { color: var(--black) !important; }

.bg-main { background: var(--main-color) !important }
.fg-main { color: var(--main-color) !important }
.bg-alt { background: var(--alt-color) !important }
.fg-alt { color: var(--alt-color) !important }
.bg-slightly-off { background: var(--slightly-off) !important }
.fg-slightly-off { color: var(--slightly-off) !important }
.bg-alt-off { background: var(--alt-off) !important }
.fg-alt-off { color: var(--alt-off) !important }
.fg-strong { color: var(--strong) !important; }
.bg-middle-off { background: var(--middle-off) !important; }
.fg-middle-off { color: var(--middle-off) !important; }

/* Utility classes */

/* Text alignment */
.left { text-align: left; }
.center { text-align: center; }

/* Heights */
.h-100 { height: 100px; }
.h-200 { height: 200px; }
.h-400 { height: 400px; }

/* Widths */
.w-100 { width: 100px; }
.w-200 { width: 200px; }
.w-300 { width: 300px; }
.w-400 { width: 400px; }
.w-500 { width: 500px; overflow:hidden; }
.w-600 { width: 600px; overflow:hidden; }
.w-700 { width: 700px; overflow:hidden; }
.w-full { width: 100%; }

.w-33 { width: 33%; }
.w-66 { width: 66%; }

.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }

/* Borders */
.border { border: 1px solid grey; }
.no-border { border: none !important; }
.border-focus { 
	border: 2px solid #00ffffc0;
}

/* Outlines */
.outline { outline: 1px solid red; }

/* Display styles */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }



.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }

.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }

.py-2 { padding-top: 2px; padding-bottom: 2px; }
.py-3 { padding-top: 3px; padding-bottom: 3px; }
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-7 { padding-top: 7px; padding-bottom: 7px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-20 { padding-top: 20px; padding-bottom: 20px;}
.py-25 { padding-top: 25px; padding-bottom: 25px; }

.px-2 { padding-left: 2px; padding-right: 2px; }
.px-3 { padding-left: 3px; padding-right: 3px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-7 { padding-left: 7px; padding-right: 7px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.px-20 { padding-left: 20px; padding-right: 20px;}
.px-25 { padding-left: 25px; padding-right: 25px; }


/* Margins */
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }
.m-25 { margin: 25px; }

.mt-2 { margin-top: 2px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }

.my-5 { margin-top: 5px; margin-bottom: 5px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.my-20 { margin-top: 20px; margin-bottom: 20px;}
.my-25 { margin-top: 25px; margin-bottom: 25px; }

.mx-5 { margin-left: 5px; margin-right: 5px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-15 { margin-left: 15px; margin-right: 15px; }
.mx-20 { margin-left: 20px; margin-right: 20px;}
.mx-25 { margin-left: 25px; margin-right: 25px; }

/* Rounding */
.rounded { border-radius: 3px; }
.rounded-5 { border-radius: 5px; }
.rounded-10 { border-radius: 10px; }
.rounded-full { border-radius: 100%; }

.border-box { box-sizing: border-box; }

/* Text sizes */
.text-small,.text-sm { font-size: 0.8rem; }
.text-xs { font-size: 0.7rem; }
.text-xl { font-size: 1.2rem; }

/* Shadows */
.shadow, .shadow-1 { box-shadow: 1px 1px 5px #0001; }

.fixed { position: fixed; }
.sticky { position: sticky; }
.absolute { position: absolute; }
.relative { position: relative; }

.screencenter {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.table {
	width: 100%;
	background: var(--main-color-light);
	border-spacing: 1px;
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--alt-color);
	padding: 1x;
	box-shadow: 0 2px 7px -2px #0004;
	overflow: hidden;
}

.table th {
	border-bottom: 2px solid var(--slightly-off);
	padding: 5px;
	font-size: 0.8rem;
	text-transform: uppercase;
	color: var(--alt-color);
	background: var(--main-color);
}

.table td {
	padding: 5px;
	background: var(--alt-off);
	box-sizing: border-box;
}

.highlight-row td:hover {
	background: var(--main-color-light);
}

table.counter {
}
table.counter tbody { 
	counter-reset: tablecounter; 
	background: var(--main-color);

}
table.counter tfoot tr::before { 
	content: ""; 
	display: table-cell; 
	background: var(--main-color);
}
table.counter thead tr:before {
	content: "";
	text-align: center;
	display: table-cell;
	background: var(--main-color);
}

table.counter tbody tr::before {
	padding: 0 3px 0 3px;
	font-size: 0.7rem;
	text-align: right;
	display: table-cell;
	font-weight: normal;
	color: var(--gray-2);
	vertical-align: middle;
	content: counter(tablecounter);
	counter-increment: tablecounter;
}


.right { text-align: right; }
.right-0 { right: 0; }
.right-5 { right: 5px; }
.right-10 { right: 10px; }
.middle-50 {
	top: 50%;
	transform: translateY(-50%);
}

.extralight { font-weight: 200; }
.light      { font-weight: 300; }
.regular    { font-weight: 400; }
.medium     { font-weight: 500; }
.semibold   { font-weight: 600; }
.bold       { font-weight: 700; }
.extrabold  { font-weight: 800; }
.black      { font-weight: 900; }


.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

.hover-brighten:hover { filter: brightness(1.1) ; }
.hover-shadow:hover { box-shadow: 2px 2px 3px #0004; }

/* Opacities */
.opacity-75 { opacity: 0.75; }
.opacity-50 { opacity: 0.50; }

/* Vertical aligns */
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }

/* Letterspacing */
.loose { letter-spacing: 0.05rem; }
.looser { letter-spacing: 0.1rem; }
.tight { letter-spacing: -0.05rem; }
.tighter { letter-spacing: -0.1rem; }

/* Z-index */
.z-100 {
	z-index: 100 !important;
}

button, .button {
	font-size: 1rem;
	padding: 1vw 2vw 1vw 2vw;
	border-radius: 20px;
	border: none;
	background: linear-gradient(var(--red-2), var(--red-1));
	color: var(--red-5);
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	text-decoration: none;
	display: inline-block;
}

button:hover, .button:hover {
	background: linear-gradient(var(--red-3), var(--red-2));
	color: var(--white);
}

.button-alt {
	font-size: 0.8rem;
	padding: 0.5vw 1vw 0.5vw 1vw;
	border-radius: 20px;
	border: none;
	background: linear-gradient(var(--cyan-2), var(--cyan-1));
	color: var(--cyan-4);
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	font-style: normal;
	font-weight: 500;
	text-decoration: none;;
}
.button-alt:hover {
	background: linear-gradient(var(--cyan-3), var(--cyan-1));
	color: var(--cyan-5);
	text-decoration: none;
}

.hidden {
	visibility: hidden;
}

.none {
	display: none;
}

.nobr { white-space: nowrap }
.grayscale { filter: grayscale(1); }
.grayscale-50 { filter: grayscale(0.5); }
.invert { filter: invert() }
.dim { 
	border: none;
	outline: none;
}