:root {
	--color-primary: #d62127;
	--color-primary-96: #d62127f5;
	--color-primary-88: #d62127e0;
	--color-primary-80: #d62127cc;
	--color-primary-72: #d62127b8;
	--color-primary-64: #d62127a3;
	--color-primary-56: #d621278f;
	--color-primary-48: #d621277a;
	--color-primary-32: #d6212752;
	--color-primary-24: #d621273d;
	--color-primary-16: #d6212729;
	--color-primary-08: #d6212714;
	--color-primary-04: #d621270a;
	--color-primary-02: #d6212705;

	--color-dark: #00121e;
	--color-dark-96: #00121ef5;
	--color-dark-88: #00121ee0;
	--color-dark-80: #00121ecc;
	--color-dark-72: #00121eb8;
	--color-dark-64: #00121ea3;
	--color-dark-56: #00121e8f;
	--color-dark-48: #00121e7a;
	--color-dark-32: #00121e52;
	--color-dark-24: #00121e3d;
	--color-dark-16: #00121e29;
	--color-dark-08: #00121e14;
	--color-dark-04: #00121e0a;
	--color-dark-02: #00121e05;

	--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;
}

body {
    color: var(--color-dark);
}

.container {
	margin: 0 auto;
}

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

.btn {
	padding: .75rem 1.5rem;
	
	border-radius: .5rem;

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

.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);
}

/* input */

.input {
	padding: .75rem 1rem;

	border-radius: .5rem;

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

	width: 100%;
}

/* ===== RESPONSIVE BASE ===== */

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0 1rem;
    }
}

@media (max-width: 991px) {
    .container {
        max-width: 720px;
        padding: 0 1.25rem;
    }
    
    .buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}