/* Variables ________________________________________________________________________________________*/
:root 		{
			--brick  :#c73f00;		/*brick*/
			--cadmium:#f0b400;		/*cadmium*/
			--salmon :#e18951;		/*salmon*/
			--naple  :#ffde53;		/*naple*/
			--darky  :#555555;		/*dark grey*/
			--lighty: #cccccc;		/*light grey*/
			--transp: #0009;
}

/* General _________________________________________________________________________________________ */
body						{
			font-family: ubuntu;
			background-color: white; 
			color: var(--darky);
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			font-size: 1em;
			text-align: center;
			font-weight: 400;
			background-size:100%;
			background-repeat:no-repeat ;
			background-position: left 50%  top 0;
			}

a 							{color:var(--brick);font-weight: bold;text-decoration:none}
a:hover 					{color:var(--salmon);text-decoration: none;}

p 							{
			margin-top: 0; 
			margin-bottom: 0.5rem; 
			}

h1, h2, h3, h4, h5, h6		{margin-top:10px;margin-bottom:10px}

h1							{color:var(--brick)  ;font-size: 3em}
h2							{color:var(--cadmium);font-size: 2.5em}
h3							{color:var(--salmon) ;font-size: 2em}
h4							{color:var(--naple)  ;font-size: 1.5em}
h5							{color:var(--darky)  ;font-size: 1.2em}
h6							{color:var(--lighty) ;font-size: 1em}
hr							{background-color:#eee;}	
br 							{margin-bottom: 0.5rem;}

/* custom tags ______________________________________________________________________________________*/
tiny 						{font-size: 0.3em}
big 						{font-size: 1.5em}
lead						{font-size: 1.5em; font-weight: 100;}
b1, b2, b3, b4, b5, b6		{font-size: 1.2em; font-weight: 1000;}
b1							{color: var(--brick); }
b2							{color: var(--cadmium); }
b3							{color: var(--salmon); }
b4							{color: var(--naple); }
b5							{color: var(--darky); }
b6 							{color: var(--lighty); }

/* bootstrap adaptation _____________________________________________________________________________*/

/* card-deck _______________________________________________________________*/
.card-deck					{
			margin-right: -0.3vw;
			margin-left: -0.3vw;
			display:flex;
			
			}

.card-deck .card 			{
			background-color: white;
			border-radius: 1vw;
			padding: 0;
			margin: 0.3vw 0.3vw 1vw 0.3vw ;
			}

.card-deck .card:hover 		{box-shadow: 0 0 1vw #0007;}

.card-deck .card .card-title{
			margin-bottom: 0;
			padding: 0; 
			border-radius: 1vw 1vw 0 0 ;
			}

.card-deck .card .card-body {
			padding: 1vw 1vw 1vw 1vw
			}

.card-deck .card .card-footer {
			margin-bottom: 0; 
			padding: 0.5vw; 
			border-radius: 0 0 1vw 1vw;
			}

/* card-group ______________________________________________________________*/
.card-group					{margin-right: -0.3vw;margin-left: -0.3vw;background-color: '#eee'}

.card-group .card 			{
			border-radius: 1vw;
			}

.card-group .card:hover 	{box-shadow: 0 0 1vw #0005;}

.card-group .card .card-title{
			padding: 1vw 1vw 0 1vw; 
			}

.card-group .card .card-body {
			padding: 0 1vw 1vw 1vw;
			}

.card-group .card .card-footer{
			border-radius: 0 0 1vw 1vw;
			}


/* other ___________________________________________________________________*/
.dropdown-item				{
	font-size: 1.5em;
}

.dropdown-menu-right 		{
			right: 0;
			left: auto;
}

.dropdown-menu[data-bs-popper] {
			left: auto;
}
			 
/* custom class ____________________________________________________________________________________*/

/* layout __________________________________________________________________*/
.main 						{
			flex: 1 0 auto;
			background-color: #fff0;
			padding: 1vw;
			margin: 0 auto 0 auto;
			}

.module 						{
			background-color: white;
			box-shadow: 0 0 1vw var(--transp);
			padding: 1vw;
			margin: 0 2vh 4vh 2vh;
			}

.footer 					{
			box-shadow: 0 0 1vw var(--transp);
			background-color: var(--darky);
			color: white;
			text-align: center;
			padding: 0.5vw 1vw 0.5vw 1vw;
			font-weight: bold;
			flex-shrink: 0;
			}

/* navbar __________________________________________________________________*/
.navbar 					{
			box-shadow: 0 0 1vw var(--transp);
			background-color: transparent;
			padding: 0.5vw 1vw 0.5vw 1vw;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 1000;
			}

.navlinks					{
			display: flex;
			flex-direction: row;
			position: absolute;
			right: 5vw;
			}

.navitem 					{
			padding:0 0 0 25px;
			}


/* tabs ____________________________________________________________________*/

.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 1s;
}

.tab button:hover {
	background-color: #ddd;
}

.tab button.active {
	background-color: #ccc;
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	text-align: left;
}


/*typography_________________________________________________________________*/
.c-lead						{
			font-weight: 100;
			}

/*colors ____________________________________________________________________*/
.brick						{color:var(--brick)}
.cadmium					{color:var(--cadmium)}
.salmon						{color:var(--salmon)}
.naple						{color:var(--naple)}
.darky						{color:var(--darky)}
.lighty						{color:var(--lighty)}
.white						{color:white}

.bg-brick					{background-color:var(--brick)}
.bg-cadmium					{background-color:var(--cadmium)}
.bg-salmon					{background-color:var(--salmon)}
.bg-naple					{background-color:var(--naple)}
.bg-darky					{background-color:var(--darky)}
.bg-lighty					{background-color:var(--lighty)}

.bc-brick					{border-color:var(--brick)}
.bc-cadmium					{border-color:var(--cadmium)}
.bc-salmon					{border-color:var(--salmon)}
.bc-naple					{border-color:var(--naple)}
.bc-darky					{border-color:var(--darky)}
.bc-lighty					{border-color:var(--lighty)}

/*buttons ___________________________________________________________________*/

[class*="btn-"]				{
	color:white;
	border-radius:0.3vw;
	border-style:none;
	font-weight:bold;
	padding:0.75vw;
}

[class*="btn-"]:visited		{color:white;}

.btn-brick 					{background-color:var(--brick)  }
.btn-cadmium 				{background-color:var(--cadmium)}
.btn-salmon 				{background-color:var(--salmon) }
.btn-naple 					{background-color:var(--naple)  }
.btn-darky 					{background-color:var(--darky)  }
.btn-lighty					{background-color:var(--lighty) }

.btnoutline-brick			{color:var(--brick)  ;border-color:var(--brick)  }
.btnoutline-cadmium			{color:var(--cadmium);border-color:var(--cadmium)}
.btnoutline-salmon			{color:var(--salmon) ;border-color:var(--salmon) }
.btnoutline-naple			{color:var(--naple)  ;border-color:var(--naple)  }
.btnoutline-darky			{color:var(--darky)  ;border-color:var(--darky)  }
.btnoutline-lighty			{color:var(--lighty) ;border-color:var(--lighty) }



.highlight:hover			{box-shadow: 0 0 1vw #0007;}

/* mobile device ____________________________________________________________*/
@media screen and (max-aspect-ratio: 1/1){
	body, a, b 				{font-size: 1.5em}
	.main 					{width: 95%}
	.card-deck 				{flex-wrap:wrap}
	.card-deck .card		{flex: 1 0 98%; max-width: 100%;border-radius: 2vw}
	.card-group .card		{flex: 1 0 98%; max-width: 100%;margin-bottom: 5vw;border-radius: 2vw}
	.navlinks				{display: none}
	.navbtn					{display: block}

}

/* landscape devices larger than 1080 _______________________________________*/
@media print, screen and (min-width: 1080px) and (min-aspect-ratio: 1/1) {
	.main					{width: 1024px;}
	.navlinks				{display: flex;}
	.navbtn					{display: none}
	.card-deck 				{flex-wrap:no-wrap}
}

/* landscape devices smaller than 1080 ______________________________________*/
@media screen and (max-width: 1080px) and (min-aspect-ratio: 1/1) {
	.main 				{width: 95%;}
	.navlinks				{display: flex;}
	.navbtn					{display: none}
	.card-deck 				{flex-wrap:no-wrap}
}