/* Custom styles for the header */

body {
    font-family: 'Roboto', sans-serif;
	color:#50190c;
	
	--mycolor1: #331C0E;
    --mycolor2: #67331E;
    --mycolor3: #B9540C;
    --mycolor4: #FFF190;
    --mycolor5: #FCFEF0;
    --mycolor6: #C38D5F;	  
    --myexdark: #261E1D;		  
    }
	
/* General Color Scheme:             */
/* mycolor1  Dark : 	331C0E - Inside Sidebar       */
/* mycolor2  Brown:	67331E -	 */
/* mycolor3  Orange: 	B9540C - Buttons / Highlights */
/* mycolor4  Yellow: 	FFF190 -     */
/* mycolor5  Ivory:	FCFEF0 -     */
/* mycolor6  Deer:	C38D5F - Swap out for a royal / dark blue   */	
/* myexdark  Alt Dark: 261E1D	 - really dark    */			


	
}

h1, h2, h3 {
    font-family: "Skranji", system-ui;
	color:#67270b;
}

/* Header */	

.header {
    background-color: #222;
    background-image: url('https://traffic-quest.com/images/header3.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid #444; /* Strong bottom border */
    min-height: 200px; /* Ensure the header has a visible height */
    position: relative; /* Required for z-index */
    z-index: 1; /* Ensure the header is above other elements */
}


/* Custom styles for the body */

.body {
	background-color: #f8f4e7;
    }

.body iframe {
    width: 100%;
    height: 100%;
    border: none; /* Remove iframe border */
    }

/* Custom styles for the ad bar */
    .ad-bar {
    background-color: #f8f9fa; /* Light background */
    padding: 20px 0;
	margin-top:20px;
    }


/* Custom styles for the footer */

    .footer {
    background-color: #343a40; /* Bootstrap's dark color */
    color: white;
    font-size: 0.875rem; /* Small font size */
    padding: 20px 0;
    }

    .footer a {
    color: #f8f9fa; /* Off-white links */
    text-decoration: none;
    }

    .footer a:hover {
    color: #ffd700; /* Yellow on hover */
    }
	
	
.boxes {
	font-size:1.5em;
	color:#f5f5f5;
	background-color: rgba(0, 0, 0, 0.6);
	border:solid 6px rgba(141, 104, 8, 0.2);
	border-radius: 15px;
	min-height:175px;
	}
	
	
.has-dropcap:first-letter {
  font-family: "Skranji", system-ui;
  float: left;
  font-size: 4rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
}

.dropcap {
  font-family: "Skranji", system-ui;
  background: #303030;
  color: #FDF9F2;
  float: left;
  font-size: 4rem;
  line-height: 1;
  margin: 0.1em 0.1em 0.2em 0;
  padding: 0.1em;
}
.dropcap:before,
.dropcap:after {
  content: "";
  display: block;
}
.dropcap:before {
  margin-top: -0.2em;
}
.dropcap:after {
  margin-bottom: -0.15em;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}


#leaderboard {
  background: url('/images/lbdbg-50.png');
  background-size: contain;  
  background-position: center;  
  background-repeat: no-repeat;   
  width: 100%;
  height: 100%;
  padding:40px; 
  opacity: 0.8;
}

/* Override Bootstrap's table styles */
.transparent-table {
  background-color: transparent !important; /* Makes table background transparent */
}

.transparent-table th,
.transparent-table td {
  background-color: transparent !important; /* Makes cell backgrounds transparent */
  border-color: rgba(255, 255, 255, 0.4) !important; /* Optional: light border */
}

.tqbutton {
	box-shadow:inset 0px 1px 3px 0px #f5978e;
	background:linear-gradient(to bottom, #331c0e 5%, #261e1d 100%);
	background-color:#331c0e;
	border-radius:10px;
	border:6px solid #8b7b5b;
	display:inline-block;
	cursor:pointer;
	color:#fcfef0;
	font-family: "Cinzel", serif;
	font-size:28px;
	font-weight:500;
	padding:16px 50px;
	text-decoration:none;
	text-shadow:2px 2px 4px #810e05;
	}

.tqbutton:hover {
	background:linear-gradient(to bottom, #261e1d 5%, #331c0e 100%);
	background-color:#261e1d;
	color:#fcffff;
	}
.tqbutton:active {
	position:relative;
	top:1px;
	}