@charset "utf-8";


/******Styles that apply to everything in the body tab******/
body
{
	/*text for the site content may be overriden*/
	font-size: 16px;
    font-weight: 400;
	/*changes the baground color of the entire site*/
	background: #FEFBED;
}

/******Styles that apply to the sites footer specificaly******/
.footer 
{	
	/*dictates the hight of the footer*/
	height: 70px;
	/*Dictates the background of the footer*/
	/*navagation background colour that will be used if the user cant see the gradeints*/
  	background-color: rgba(250, 233, 154, 1);
	
	/*Sets the two color gradient the left being the top color the right being the bottom precentiges dictating the leanth of each side*/
    background: -webkit-linear-gradient(rgba(254, 251, 237, 1) 0%, rgba(250, 233, 154, 1) 100%);
	background: -o-linear-gradient(rgba(254, 251, 237, 1) 0%, rgba(250, 233, 154, 1) 100%);
	background: linear-gradient(rgba(254, 251, 237, 1) 0%, rgba(250, 233, 154, 1) 100%);
}
/*dictates the styles for text inside the footer*/
.footer-text
{
	padding-top: 25px;
	color: rgba(186, 155, 10, 1);
}

/******Styles that apply the the content text of the document such as headings and general body text******/
.content-text
{
	color: var(--text-color); 
}
#btn, #btn:hover
{
	color: white;
	background-color: var(--button-color);
	border: 1px solid var(--bg-color);
	height:50px;
	width: auto;
	border-right: 1px solid #343438;
	border-radius: 25px 0 0 25px; /* Round only left corners */
	outline: none;
	margin-right: -1px; /* Pull button slightly left to overlap borders if needed */
	z-index: auto !important;
}
 #btn:hover
{
	background-color: #44444f !important;
	color:white;
	border: 1px solid var(--bg-color)!important;
}

#myDropdown, #myDropdown:hover
{
	background-color: var(--button-color)!important;
	border: 1px solid var(--bg-color)!important;
	height:50px;
	border-left: 1px solid #343438;
	border-right: none;
	border-radius: 0 0 0 0; /* Round only left corners */
	outline: none;
	 /* Pull button slightly left to overlap borders if needed */
	width:auto;
	color:white;
}
 #myDropdown:hover
{
	background-color: #44444f !important;
	color:white;
	border: 1px solid var(--bg-color)!important;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#search
{
	color: white;
	background-color: var(--text-box-color);
	border: 1px solid var(--bg-color);
	border-left: none;
	border-radius: 0 25px 25px 0; /* Round only right corners */
    /* Ensure margins are 0 to prevent gaps */
	width: fit-content();
}


body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1C1C1D;
    --text-color: #ffffff;
	--text-box-color: #343438;
	--button-color: #78787C;
  }
}