@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--green-1: #10724f;
	--green-2: #48996D;
	--green-3: #87C7B3;
	--green-4: #EFF9F5;
	--green-5: #F7FCFA;
	--grey-1: #222222;
	--grey-2: #797B7B;
	--grey-3: #A4ACA8;
	--grey-4: #DEE4E1;
	--grey-5: #F8F9F8;
}

#header {
	background-color: var(--green-5);
    border-bottom: 1px solid var(--grey-4);
}

#logo-WeAudit {
    color: var(--green-1);
    font: Karla;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.6px;
    text-transform: capitalize;
    user-select: none;
    cursor: pointer;
    margin-right: 15px; /* Add space between WeAudit and Mirage */
}

#logo-Mirage {
    color: var(--grey-3);
    font: Karla;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    /* letter-spacing: -0.6px; */
    text-transform: capitalize;
    user-select: none;
    cursor: pointer;
    padding-left: 0; /* Remove padding on the left */
    margin-left: 0; /* Adjust margin to move it more to the left */
}

.bi-question-circle {
    margin-left: 20px; /* Adjust space around the SVG logo */
    cursor: pointer;
}


#title {
	font: Karla;
	font-size: 36px;
	font-style: normal;
	font-weight: 600;
	line-height: 46px; 
	letter-spacing: 1px;
	color: var(--green-1);
}

#subTitle {
	font: Karla;
	color: var(--grey-2);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}
#subTitle span { display: inline-block; }
#subTitle::first-letter, #subTitle span::first-letter {
	color: var(--green-1);
	color: var(--green-1, #10724F);
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
}

.how-default-mirage-works-column {
	border: #0C826A 1px solid;
	border-radius: 5px;
}

.how-default-mirage-works-column-item {
	margin-top: 3%;
	margin-bottom: 3%;
	padding: 3%;
}

.suggestion-button {
	margin: 5px; 
	border-radius: 10px;
	padding: 10px;
}