/****************************************/
/** some-styles is for unmutable rules **/
/****************************************/


:root {
    --p-color:		#333333;

    --p-brown:		#D0B8A8;


    --brown-25:		#F9EFE9;
    --brown-50:		#D0B8A8;
    --brown-100:    #C5705D;
    --brown-400:    #C5705D;
    --brown-600:    #BD5D47;
    --brown-800:    #A9513D;

    --white-400:    #FFFFFF;
    --white-600:    #F6F6F6;
    --white-800:    #EBEBEB;

    --red-400:      #FC3B31;
    --red-600:      #FB1F13;
    --red-800:      #EC0F04;

    --bg-grey:      #D9D9D9;

    --custom-radius:		6px;
    --custom-radius-lg:		10px;
	
}



* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*:hover {
	transition-duration: .2s;
}

html{
	margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
	font-family: "Mulish", var(--bs-font-sans-serif), sans-serif;
	line-height: 1.8;
	background: white;
	overflow-x: inherit;
	margin: 0;
    padding: 0;
    min-height: 100vh;
}

main {
	background: #f9f9f9;
}


h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: #000;
	font-weight: 700;
	line-height: 1.4;
}


p {
	margin: 0;
}

p, li, td {
	color: var(--p-color);
}


img {
	max-width: 100%;
	height: auto;
}


a {
	color: var(--brown-600);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: var(--brown-400);
	opacity: .8;
}

a.no-fade:hover {
	opacity: 1;
}



/* Brown texts and backgrounds */

.bg-brown-25  { background-color: var(--brown-25)  }
.bg-brown-50  { background-color: var(--brown-50)  }
.bg-brown-100 { background-color: var(--brown-100) }
.bg-brown-400 { background-color: var(--brown-400) }
.bg-brown-600 { background-color: var(--brown-600) }
.bg-brown-800 { background-color: var(--brown-800) }

.text-brown-25  { color: var(--brown-25)  }
.text-brown-50  { color: var(--brown-50)  }
.text-brown-100 { color: var(--brown-100) }
.text-brown-400 { color: var(--brown-400) }
.text-brown-600 { color: var(--brown-600) }
.text-brown-800 { color: var(--brown-800) }


/* White texts and backgrounds */

.bg-white-400 { background-color: var(--white-400);
	}
.bg-white-600 { background-color: var(--white-600) }
.bg-white-800 { background-color: var(--white-800) }

.text-white-400 { color: var(--white-400) }
.text-white-600 { color: var(--white-600) }
.text-white-800 { color: var(--white-800) }


/* Red texts and backgrounds */

.bg-red-400 { background-color: var(--red-400) }
.bg-red-600 { background-color: var(--red-600) }
.bg-red-800 { background-color: var(--red-800) }

.text-red-400 { color: var(--red-400) }
.text-red-600 { color: var(--red-600) }
.text-red-800 { color: var(--red-800) }



/* Borders */

.border-brown-25 { border-color: var(--brown-25)!important }
.border-brown-50 { border-color: var(--brown-50)!important }
.border-brown-600 { border-color: var(--brown-600)!important }



/* Miscallaneous Classes */

.cursor-pointer {
	cursor: pointer;
}


.p-color {
	color: var(--p-color);
}


.fw-500 {
	font-weight: 500!important;
}

.fw-600 {
	font-weight: 600!important;
}

.fw-800 {
	font-weight: 800!important;
}

.fw-900 {
	font-weight: 900!important;
}


.text-muted {
	opacity: .7;
}


.custom-radius { border-radius: var(--custom-radius); }
.custom-radius-lg { border-radius: var(--custom-radius-lg); }