/* General Characteristics */
:root{
	--white: #FFF;
	--black: #000;
	--darken: rgba(0,0,0,0.5);
	--lightblue: #5D8AA8;
	--darkblue: rgb(70, 130, 180);
	--lightbrown: #c9b490;
	--darkbrown: #674421;
	--darkorange: #644117;
	--gold: rgb(255,215,0);
	--bs-border-color: rgba(151,121,79,1);
	--bs-body-color: #FFF;
	--bs-body-striped-bg: rgba(158,127,86,0.9);
	--bs-body-bg: rgba(156, 108, 52,0.9);
}
*{
	--ideal-viewport-width: 1600;
	--current-viewport-width: 100vw;
	--ideal-font-size: 16;
	font-size: calc(var(--ideal-font-size) * (var(--current-viewport-width) / var(--ideal-viewport-width)));
}

@font-face{
	font-family: "Neuland";
	src: url("includes/Fonts/Junglefever-4ZpD.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: "Biryani-Regular";
    src: url("includes/Fonts/biryani/Biryani-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Biryani-Light";
    src: url("includes/Fonts/biryani/Biryani-Light.otf") format("opentype");
}
@font-face {
    font-family: "Biryani-Bold";
    src: url("includes/Fonts/biryani/Biryani-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Biryani-Heavy";
    src: url("includes/Fonts/biryani/Biryani-Heavy.otf") format("opentype");
}
body{
	background-image: url("includes/images/Clouds.png");
	background-attachment: fixed;
	background-size: 100% 100%;
}
.container-fluid{
	background: var(--darken);
}
/* Header */
.header b{
	font-size: 1.4rem;
	color: var(--black);
}
.header a{
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--gold);
	text-shadow: 0.01rem 0.01rem 0.15rem var(--darken), -0.01rem -0.01rem 0.15rem var(--darken), 0.01rem -0.01rem 0.15rem var(--darken), -0.01rem 0.01rem 0.15rem var(--darken);
}
.header a:hover{
	font-size: 1.25rem;
	color: var(--white);
	text-decoration: underline;
}
/* NAV */
.nav{
	background-image: url("includes/images/Waterfall2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.Nav-Worlds{
	background: var(--lightblue);
	border: 1px solid;
	border-color: var(--bs-table-border-color);
	border-radius: 1rem;
	margin: 1vw 0.5vw 1vw 0.5vw;
	padding: 0;
	height: fit-content;
	width: 100%;
}

.Nav-Worlds h2{
	margin-top: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	color: #f2f3f4;
	font-weight: 1;
	font-family:"Neuland";
	letter-spacing: 0.1rem;
	font-size: 1.1rem;
	text-shadow: 0.1rem 0.1rem 0.15rem var(--darkorange), -0.1rem -0.1rem 0.15rem var(--darkorange), 0.1rem -0.1rem 0.15rem var(--darkorange), -0.1rem 0.1rem 0.15rem var(--darkorange);
	text-align: center;
}
.Nav-Worlds ul{
	text-align: left;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.Nav-Worlds ul>li{
	display: inline-block;
	list-style: none;
	font-weight: 1;
	font-family:"Biryani-Light";
	letter-spacing: 0.1rem;
	font-size: 0.9rem;
	text-indent: -1.5rem;
	padding-left: 1.5rem;
}
.Nav-Worlds a{
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--white);
}
.Nav-Worlds a:hover{
	color: var(--white);
	text-decoration: underline;
	font-family:"Biryani-Regular";
}
#WR_Analytics:hover{
	color: var(--white);
	text-decoration: underline;
	font-family:"Biryani-Regular";
	cursor: pointer;
}
#Player_rankings:hover{
	color: var(--white);
	text-decoration: underline;
	font-family:"Biryani-Regular";
	cursor: pointer;
}
/* FOOTER */
.TreeBackdrop{
	object-fit: contain;
}
.footer-contents{
	margin-top: -4rem;
	padding-bottom: 4rem;
	background-color: #000;
}
.Footer h3{
	color: var(--gold);
	font-size: 3rem;
	font-weight: 1000;
	font-family:"Neuland";
	letter-spacing: 0.1rem;
}
/* MAIN BODY */
/* Title and Decorative Background*/
.background{
	background-image: url("includes/images/Test.webp");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-bottom: 5rem;
	margin-bottom: 2rem;
}
.background-table{
	box-sizing: border-box;
	width: 80%;
	/*border: 1px solid var(--lightbrown);
	background-color: var(--darkbrown);*/
	
}
.background h1{
	padding-top: 2vw;
	color: #674421;
	font-size: 5rem;
	font-weight: 1000;
	font-family:"Neuland";
	letter-spacing: 0.0rem;
	text-shadow: 0.1rem 0.1rem 0.1rem var(--lightbrown), -0.1rem -0.1rem 0.1rem var(--lightbrown), 0.1rem -0.1rem 0.1rem var(--lightbrown), -0.1rem 0.1rem 0.1rem var(--lightbrown);
}
/* Table Settings */
.table{
	background-image: url("includes/images/TableTexture.jpg");
	background-repeat: repeat;
	background-size: cover;
	--bs-table-color: var(--bs-body-color);
	border-color: var(--bs-table-border-color);
	font-weight: 1;
	font-family:"Biryani-Light";
	letter-spacing: 0.1rem;
	box-shadow: 0.2rem 0.2rem 0.25rem var(--darkbrown), -0.2rem -0.2rem 0.25rem var(--darkbrown), 0.2rem -0.2rem 0.25rem var(--darkbrown), -0.2rem 0.2rem 0.25rem var(--darkbrown);
}

.table-striped>thead>tr:nth-child(odd)>th {
	background-color:var(--bs-body-bg);
	color: #f2f3f4;
	font-weight: 1;
	font-family:"Neuland";
	letter-spacing: 0.1rem;
	text-shadow: 0.1rem 0.1rem 0.15rem var(--darkorange), -0.1rem -0.1rem 0.15rem var(--darkorange), 0.1rem -0.1rem 0.15rem var(--darkorange), -0.1rem 0.1rem 0.15rem var(--darkorange);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color:var(--bs-body-striped-bg);
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    background-color:var(--bs-body-bg);
}
/* Table Hover Property */
.table-striped>tbody>tr:hover td:not(:first-child) {
    background-color:var(--lightblue);
}
.table-striped>tbody>tr>td:nth-child(0):hover {
    background-color:var(--lightblue);
}
.table-striped>thead>tr>th:hover {
    background-color:var(--lightblue);
}
/* Table Link Properties */
.table a{
	text-decoration: none;
	color: var(--gold);
	text-shadow: 0.01rem 0.01rem 0.15rem var(--darken), -0.01rem -0.01rem 0.15rem var(--darken), 0.01rem -0.01rem 0.15rem var(--darken), -0.01rem 0.01rem 0.15rem var(--darken);
}
.table a:hover{
	text-decoration: underline;
	font-family:"Biryani-Regular";
}
/* Flag img settings */
.flag {
	width: 2.2em;
}
.kong_barrel {
	width: 1.4em;
}
.wr_medal {
	width: 1.8em;
}
/* Total Time Properties */
.Leaderboard-Time{
	float: right;
	margin-right: 4%;
	margin-top: 0.2rem;
}
.Leaderboard-Time li{
	display: inline-block;
	text-align: right;
	color: var(--black);
	font-weight: 1000;
	font-size: 1.2rem;
	font-family:"Biryani-Heavy";
	letter-spacing: 0.1rem;
}

/* Modal Stat Styles */
.statistics-modal h5{
	font-size: 2rem;
	color: #f2f3f4;
	font-weight: 1;
	font-family:"Neuland";
	letter-spacing: 0.1rem;
	text-shadow: 0.1rem 0.1rem 0.15rem var(--darkorange), -0.1rem -0.1rem 0.15rem var(--darkorange), 0.1rem -0.1rem 0.15rem var(--darkorange), -0.1rem 0.1rem 0.15rem var(--darkorange);
}
.text-modal{
	color: #f2f3f4;
	font-weight: 1;
	font-family:"Biryani-Regular";
	letter-spacing: 0.1rem;
}
.btn-secondary, .btn-secondary:visited {
    background-color: var(--lightblue) !important;
	color: var(--white) !important;
	font-family:"Neuland" !important;
}
.btn-secondary:hover, .btn-secondary:active {
	background-color: var(--darkblue) !important;
	color: var(--gold) !important;
	text-shadow: 0 0 0 0;
}

@media (max-width: 600px) {
	.flag {
		width: 4em;
	}
	.kong_barrel {
		width: 2.8em;
	}
	.wr_medal {
		width: 2.8em;
	}
	.background h1{
		padding-top: 3vw;
	}
}