:root {
	--color-primary: #05C778;
	--color-primary-96: #05C778f5;
	--color-primary-88: #05C778e0;
	--color-primary-80: #05C778cc;
	--color-primary-72: #05C778b8;
	--color-primary-64: #05C778a3;
	--color-primary-56: #05C7788f;
	--color-primary-48: #05C7787a;
	--color-primary-32: #05C77852;
	--color-primary-24: #05C7783d;
	--color-primary-16: #05C77829;
	--color-primary-08: #05C77814;
	--color-primary-04: #05C7780a;
	--color-primary-02: #05C77805;

	--color-dark: #27303f;
	--color-dark-96: #27303ff5;
	--color-dark-88: #27303fe0;
	--color-dark-80: #27303fcc;
	--color-dark-72: #27303fb8;
	--color-dark-64: #27303fa3;
	--color-dark-56: #27303f8f;
	--color-dark-48: #27303f7a;
	--color-dark-32: #27303f52;
	--color-dark-24: #27303f3d;
	--color-dark-16: #27303f29;
	--color-dark-08: #27303f14;
	--color-dark-04: #27303f0a;
	--color-dark-02: #27303f05;

	--color-white: #ffffff;
	--color-white-96: #fffffff5;
	--color-white-88: #ffffffe0;
	--color-white-80: #ffffffcc;
	--color-white-72: #ffffffb8;
	--color-white-64: #ffffffa3;
	--color-white-56: #ffffff8f;
	--color-white-48: #ffffff7a;
	--color-white-32: #ffffff52;
	--color-white-24: #ffffff3d;
	--color-white-16: #ffffff29;
	--color-white-08: #ffffff14;
	--color-white-04: #ffffff0a;
	--color-white-02: #ffffff05;

	--color-yellow: #ffa100;
	--color-yellow-96: #ffa100f5;
	--color-yellow-88: #ffa100e0;
	--color-yellow-80: #ffa100cc;
	--color-yellow-72: #ffa100b8;
	--color-yellow-64: #ffa100a3;
	--color-yellow-56: #ffa1008f;
	--color-yellow-48: #ffa1007a;
	--color-yellow-32: #ffa10052;
	--color-yellow-24: #ffa1003d;
	--color-yellow-16: #ffa10029;
	--color-yellow-08: #ffa10014;
	--color-yellow-04: #ffa1000a;
	--color-yellow-02: #ffa10005;

	--color-orange: #ff6300;
	--color-orange-96: #ff6300f5;
	--color-orange-88: #ff6300e0;
	--color-orange-80: #ff6300cc;
	--color-orange-72: #ff6300b8;
	--color-orange-64: #ff6300a3;
	--color-orange-56: #ff63008f;
	--color-orange-48: #ff63007a;
	--color-orange-32: #ff630052;
	--color-orange-24: #ff63003d;
	--color-orange-16: #ff630029;
	--color-orange-08: #ff630014;
	--color-orange-04: #ff63000a;
	--color-orange-02: #ff630005;

	--color-blue: #3838db;
	--color-blue-96: #3838dbf5;
	--color-blue-88: #3838dbe0;
	--color-blue-80: #3838dbcc;
	--color-blue-72: #3838dbb8;
	--color-blue-64: #3838dba3;
	--color-blue-56: #3838db8f;
	--color-blue-48: #3838db7a;
	--color-blue-32: #3838db52;
	--color-blue-24: #3838db3d;
	--color-blue-16: #3838db29;
	--color-blue-08: #3838db14;
	--color-blue-04: #3838db0a;
	--color-blue-02: #3838db05;

	--color-purple: #6e17b0;
	--color-purple-96: #6e17b0f5;
	--color-purple-88: #6e17b0e0;
	--color-purple-80: #6e17b0cc;
	--color-purple-72: #6e17b0b8;
	--color-purple-64: #6e17b0a3;
	--color-purple-56: #6e17b08f;
	--color-purple-48: #6e17b07a;
	--color-purple-32: #6e17b052;
	--color-purple-24: #6e17b03d;
	--color-purple-16: #6e17b029;
	--color-purple-08: #6e17b014;
	--color-purple-04: #6e17b00a;
	--color-purple-02: #6e17b005;

	--color-green: #009668;
	--color-green-96: #009668f5;
	--color-green-88: #009668e0;
	--color-green-80: #009668cc;
	--color-green-72: #009668b8;
	--color-green-64: #009668a3;
	--color-green-56: #0096688f;
	--color-green-48: #0096687a;
	--color-green-32: #00966852;
	--color-green-24: #0096683d;
	--color-green-16: #00966829;
	--color-green-08: #00966814;
	--color-green-04: #0096680a;
	--color-green-02: #00966805;

	--color-red: #f42a2a;
	--color-red-96: #f42a2af5;
	--color-red-88: #f42a2ae0;
	--color-red-80: #f42a2acc;
	--color-red-72: #f42a2ab8;
	--color-red-64: #f42a2aa3;
	--color-red-56: #f42a2a8f;
	--color-red-48: #f42a2a7a;
	--color-red-32: #f42a2a52;
	--color-red-24: #f42a2a3d;
	--color-red-16: #f42a2a29;
	--color-red-08: #f42a2a14;
	--color-red-04: #f42a2a0a;
	--color-red-02: #f42a2a05;
}

* {
	font-family: "Red Hat Display", sans-serif;
}

body,html {
    color: var(--color-dark);

	font-size: 15px;

	overflow-x: clip;
}

@media (min-width: 1500px) {
	body,html {
		font-size: 16px;
	}
}

@media (min-width: 1700px) {
	body,html {
		font-size: 18px;
	}
}

@media (min-width: 1900px) {
	body,html {
		font-size: 20px;
	}
}

.container {
	margin: 0 auto;
}

@media (max-width: 1024px) {
	.container {
		padding: 0 1.75rem;
	}
}

.buttons {
	display: flex;
	gap: .5rem;
}

.btn {
	padding: .65rem 1.75rem;
	
	border-radius: 10rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;

	font-weight: 500;
}

.btn:hover {
	opacity: .75;
}

.btn i {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 1rem;
	height: 1rem;

	padding-bottom: 1px;
}

.btn.primary {
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-white);
}

.btn.primary-outline {
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.btn.white {
	background: var(--color-white);
	border: 1px solid var(--color-white);
	color: var(--color-primary);
}

.btn.grey {
	background: var(--color-dark-04);
	border: 1px solid var(--color-dark-08);
	color: var(--color-dark);
}

.btn.default {
	background: var(--color-white);
	border: 1px solid var(--color-dark-16);
	color: var(--color-dark);
}

/* input */

.input {
	padding: .75rem 1rem;

	border-radius: .5rem;

	border: 1px solid var(--color-dark-16);
	color: var(--color-dark);

	width: 100%;
}