:root {
	--cover-img: url(img/Black.jpg);

	--part-display: block;
	--quote-display: table-cell;
  
	--content-width: 100vw;
	--background-size: cover;
	--start-fsize: 12vw;
	--sub-fsize: 6.35vw;
  
	--header1-fsize: 2.4rem;
	--header2-fsize: 1.4rem;
	--header3-fsize: 1.2rem;
	--header4-fsize: 1.1rem;

	--header1-margin: 0.5rem;

	--math-fsize: 1rem;
	--math-overflow: none;

	--stats-fsize: 0.7rem;  
	--nametag-fsize: 0.9rem;
	--table-fsize: 0.9rem;
  
	--heading-padding: 0.5rem;
	--text-padding: 15px;
  
	--quote-fsize: 1.1rem;
	--quote-lheight: 1.6rem;
	--quote-vpadding: 15px;
	--quote-hpadding: 20px;

	--nametag-pad: 0.5rem;

	--caption-fsize: 0.8rem;
  
	--part-padding: 2rem;
	--h3-padding: -2rem;
	--part-paddingtop: 2.5vh;
	--part-borderw: 3px;
	--h3margin-bottom: -0.8vh;
	--h4margin-bottom: -1vh;
  
	--image-vpadding: 0px;
	--image-margin: 15px;
	--art-padding: 10vh;
  
	--embed-margin: 2.5vh;
  
	/*Text Widths*/
	--text-mwidth: 650px;
	--text-width: 90vw;
	--quote-mwidth: 600px;
	--quote-width: 80vw;
	--quote-bradius: 8px;
	--nametag-pad: 0.8rem;
	--embed-mwidth: 560px;
	--embed-width: 80vw;
    --image-mwidth: 560px;
	--image-width: 80vw;
	--embed-height: auto;
	
	--embed-shadow: 0px 10px 12px;
  
	--iframe-width: 100%;
	--iframe-height: 100%;
  
	--title-family: 'Met Black', sans-serif;
	--header-family: 'Met SemiBold', sans-serif;
	--body-family: 'Met', sans-serif;
	--quote-family: 'Barlow', sans-serif;
	
	--body-spacing: 0.25px;
	--text-fsize: 1rem;
	--text-lheight: 1.8rem;

	--wealth-pad: 10px;
	--wealth-vpad: 10px;
	--wealth-tpad: 10px;

	/*Results*/
	--swiperarrow-margin: 20px;
	--swiper-width: 90vw;
	/*Desktop Card Size*/
	--card-height: 80vh;
	--card-padding: 10px;
	--card-shadow: 0px 10px 40px;
	--card-shadowc: rgba(0, 0, 0, 0.4);
	/*Desktop Card Layout*/
	--card-column: 500px;
	--card-row: 10% 40% 8% min-content;
	--card-bradius: 8px;
	--target-row: 1;
	--soi-row: 2;
	--theader-row: 3;
	--editor-row: 4;
	/*Desktop Elements*/
	--target-fsize: 2.8vw;
	--soi-fsize: 8.8rem;
	--sois-fsize: 1.2rem;
	--theader-fsize: 1.4rem;
	--editor-fsize: 1.1rem;
	/*Table*/
	--table-padding: 7px;

	/*Chart*/
	--chart-padding: 10px;
}

/*Original Colour Store*/
/*
--color-one: var(--text-color);
--color-intro: #33CC33;
--color-two: #4D33CC;
--color-three: #CC5B0A;
--color-four: #CC3359;
--color-five: #3373CC;
--color-six: #33CCA6;
--color-seven: #CCB129;
*/


@media (prefers-color-scheme: dark) {
	:root {
		/*Dark Colors*/
		--topa-shadow: #39393B;
		--topb-shadow: #48494A;
		--cursor-cover: #F0F0F0;
		--header1-color: #F0F0F0;
		--text-color: #F0F0F0;
		--body-color: #404142;

		--color-one: var(--text-color);
		--color-intro: #33CC33;
		--color-two: #7953ff;
		--color-three: #CC5B0A;
		--color-four: #CC3359;
		--color-five: #4284e0;
		--color-six: #33CCA6;
		--color-seven: #CCB129;
	}

	body {
		background-color: var(--body-color);
		color: var(--text-color);
	}

	.White {
		color: var(--body-color);
		background-color: white;
	}

}

@media (prefers-color-scheme: light) {
	:root {
		/*Light Colors*/
		--topa-shadow: #cbced1;
		--topb-shadow: #ffffff;
		--cursor-cover: #6E6E6E;
		--header1-color: #6E6E6E;
		--text-color: #3E3E40;
		--body-color: #F0F0F0;

		--color-one: var(--text-color);
		--color-intro: #33CC33;
		--color-two: #9c89fc;
		--color-three: #f38739;
		--color-four: #e25579;
		--color-five: #4d89dd;
		--color-six: #33CCA6;
		--color-seven: #d8be3b;
	}

	body {
		background-color: var(--body-color);
		color: var(--text-color);
	}
	
	.White {width: 100%; background-color: var(--topb-shadow);}
}

/*Mobile Adjustmeents*/

@media screen and (orientation:portrait) {
	:root {	
		/*			
		--stats-fsize: 1.8rem; 
		--text-fsize: 2.4rem;
		--quote-fsize: 2.4rem;
		--nametag-fsize: 2rem;

		--text-lheight: 4rem;
		--quote-lheight: 4rem;
		*/
		--cover-img: url(img/Green.jpg);

		--start-fsize: 14vw;
		--sub-fsize: 7.5vw;

		--header1-fsize: 1.8rem;
  		--header2-fsize: 1.2rem;
  		--header3-fsize: 1.1rem;
		--header4-fsize: 1rem;

		--math-fsize: 0.7rem;
		--math-overflow: scroll;

		--text-lheight: 1.8rem;
		--quote-lheight: 1.8rem;

		--part-display: contents;

		--heading-padding: 1vh;

  		--quote-vpadding: 1.5vh;
        --quote-hpadding: 2vh;

		--image-margin: 2vh;
		--embed-margin: 1vh;

  		--table-width: 95vw;
		--table-mwidth: 95vw;
		--table-margin: 1rem;

		--text-width: 95vw;
		--text-mwidth: 95vw;
		--text-padding: 1vh;
		--quote-mwidth: 90vw;
  		--quote-width: 90vw;
  		--embed-mwidth: 98vw;
		--embed-width: 98vw;
		--embed-height: auto;
		--embed-shadow: 0px 0px 0px;

		--iframe-width: 100%;
		--iframe-height: 100%;

		--image-mwidth: 100%;
		--image-width: auto;

		--swiperarrow-margin: 1px;
		--swiper-width: 100vw;

		/*Result Tables Mobile*/
		--card-column: 95vw;
		--target-fsize: 7vw;
	}


	/*Image Scaling*/
	.image img {
		display: grid;
		max-width: 100%;
		width: 95vw;
		height: auto;
	}
}

.one {--section-color: var(--color-one);}
.two {--section-color: var(--color-two);}
.three {--section-color: var(--color-three);}
.four {--section-color: var(--color-four);}
.five {--section-color: var(--color-five);}
.six {--section-color: var(--color-six);}
.seven {--section-color: var(--color-seven);}


body {
	box-sizing: border-box;
	overflow-x: hidden;
}

.cover {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto auto;
	justify-content: center;
	align-content: center;
	height: 100vh;
	width: 100vw;
	margin: auto;
	color: whitesmoke;
	text-align: center;
	background-image: var(--cover-img);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	font-family: var(--title-family);
	text-shadow: 0px 10px 20px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0px -30px 40px rgba(0,0,0,0.3);
	box-shadow: inset 0px -30px 40px rgba(0,0,0,0.3);
}

.start {
	display: inline-block;
	grid-row: 2;
	margin: auto;
	position: relative;
	font-family: var(--title-family);
	font-size: var(--start-fsize);
}

.subtitle {
	display: inline-block;
	grid-row: 3;
	margin: auto;
	position: relative;
	font-family: var(--header-family);
	font-size: var(--sub-fsize);
}

h1 {
	color: var(--section-color);
	font-family: var(--header-family);
	font-size: var(--header1-fsize);	
	font-weight: 400;
	text-transform: uppercase;
	margin: auto;
	margin-bottom: var(--header1-margin);
	text-shadow:
	1px 1px 2px var(--topa-shadow),
	-1px -1px 2px var(--topb-shadow)
	;
}

h2 {
	padding: var(--heading-padding);
	border-radius: 8px;
  	box-shadow: 0px 4px 8px var(--topa-shadow);
  	background-color: var(--section-color);
  	font-family: var(--header-family);
  	font-weight: 400;
  	font-size: var(--header2-fsize);
}

h3 {
	padding: var(--heading-padding);
	margin-bottom: var(--h4margin-bottom);
  	font-family: var(--header-family);
  	opacity: 80%;
  	font-weight: 400;
	font-size: var(--header3-fsize);
	text-decoration: underline var(--section-color) double;
}

h4 {
	padding: var(--heading-padding);
	margin-bottom: var(--h4margin-bottom);
  	font-family: var(--header-family);
  	opacity: 70%;
  	font-weight: 400;
	font-size: var(--header4-fsize);
	text-decoration: underline var(--section-color) solid;

}

.container {
  position: relative;
  padding: 0;
  margin: auto;
  text-align: center;
  width: var(--content-width);
  max-width: 100vw;
  overflow-x: hidden;
  display: grid;
  grid-template-rows: auto;
  justify-content: center;
  background-size: var(--background-size);
  font-family: var(--body-family);
  letter-spacing: var(--body-spacing);
}

.opener {
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	align-content: space-around;
	justify-content: center;
	height: auto;
	padding: var(--part-padding);
}

.stats {
	position: relative;
	display: grid;
	justify-content: space-around;
	text-align: center;
	font-family: 'Met SemiBold', sans-serif;
	font-size: var(--stats-fsize);
	opacity: 40%;
}

.pre-part {
	position: relative;
	padding: var(--part-padding);
	padding-top: var(--part-paddingtop);
	text-align: center;
	margin: auto;
	max-width: var(--text-mwidth);
	width: var(--text-width);
	display: var(--part-display);
	grid-template-rows: auto;
  }

.part {
  position: relative;
  padding: var(--part-padding);
  padding-top: var(--part-paddingtop);
  text-align: center;
  margin: auto;
  max-width: var(--text-mwidth);
  width: var(--text-width);
  display: var(--part-display);
  grid-template-rows: auto;
  border-radius: 20px;
  border-left: var(--part-borderw) solid var(--section-color);
  -webkit-box-shadow: 13px 13px 20px var(--topa-shadow),
  				-13px -13px 20px var(--topb-shadow);
  box-shadow: 13px 13px 20px var(--topa-shadow),
  				-13px -13px 20px var(--topb-shadow);
}

.open {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	-webkit-box-shadow: 13px 0px 20px var(--topa-shadow),
  				-13px -13px 20px var(--topb-shadow);
	box-shadow: 13px 0px 20px var(--topa-shadow),
  				-13px -13px 20px var(--topb-shadow);
}

.close {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	-webkit-box-shadow: 13px 13px 20px var(--topa-shadow),
  				-13px -0px 20px var(--topb-shadow);
	box-shadow: 13px 13px 20px var(--topa-shadow),
  				-13px -0px 20px var(--topb-shadow);
}

.spacer {
  position: relative;
  padding-top: var(--part-padding);
  padding-bottom: var(--part-padding);
  text-align: center;
  margin: auto;
  display: grid;
  grid-template-rows: auto;
}

p {
  position: relative;
  padding: var(--text-padding);
  margin: auto;
  text-align: left;
  line-height: var(--text-lheight);
  font-size: var(--text-fsize);
  font-weight: 400;
}

blockquote {
  position: relative;
  display: var(--quote-display);
  padding-top: var(--quote-vpadding);
  padding-bottom: var(--quote-vpadding);
  padding-left: var(--quote-hpadding);
  padding-right: var(--quote-hpadding);
  margin: auto;
  text-align: left;
  max-width: var(--quote-mwidth);
  width: var(--quote-width);
  line-height: var(--quote-lheight);
  font-family: var(--quote-family);
  font-size: var(--quote-fsize);
  font-weight: 300;
  font-style: italic;
  background-color: rgba(0,0,0,0.03);
  border-radius: 10px;
  -webkit-box-shadow: inset 8px 8px 8px var(--topa-shadow),
  				inset -8px -8px 8px var(--topb-shadow);
  box-shadow: inset 8px 8px 8px var(--topa-shadow),
  				inset -8px -8px 8px var(--topb-shadow);
}

blockquote span::before {
	content: "– ";
}

blockquote span {
	display: block;
	position: relative;
	float: right;
	opacity: 35%;
	padding-left: var(--nametag-pad);
	font-size: var(--nametag-fsize);
	font-weight: bold;
	text-shadow: 0 0.5px 0px var(--top-shadow); 
}

.MathJax {
	font-size: var(--math-fsize) !important;
	padding: 5px;
	overflow-x: var(--math-overflow);
}

.caption {
	font-size: var(--caption-fsize);
	font-style: italic;
}

.embed {
	position: relative;
	display: grid;
	margin: auto;
	margin-top: var(--embed-margin);
	margin-bottom: var(--embed-margin);
	max-width: var(--embed-mwidth);
	width: var(--embed-width);
	height: var(--embed-height);
	border-radius: 10px;
	overflow: hidden;
	-webkit-box-shadow: var(--embed-shadow) var(--topa-shadow);
    box-shadow: var(--embed-shadow) var(--topa-shadow);
}

.sc {
	position: relative;
    overflow: hidden;
    padding-top: 30.25%;
}

.yt {
	position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.vm {
	position: relative;
    overflow: hidden;
    padding-top: 54%;
}

.youframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*Chart*/
.scatter {
	position: relative;
	display: grid;
	width: 100%;
	padding-top: var(--chart-padding);
	padding-bottom: var(--chart-padding);
}

.art{
  position: relative;
  height: 100vh;
  width: 100vw; 
  display: grid;
  margin: auto;
  overflow: hidden;
  -webkit-box-shadow: inset 0px -40px 40px rgba(0,0,0,0.5),
  			  inset 0px 40px 40px rgba(0,0,0,0.5);
  box-shadow: inset 0px -40px 40px rgba(0,0,0,0.5),
  			  inset 0px 40px 40px rgba(0,0,0,0.5);
}

video {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.image, img {
	position: relative;
	display: grid;
	justify-content: center;
	margin: auto;
	margin-top: var(--image-margin);
	margin-bottom: var(--image-margin);
	padding-top: var(--image-vpadding);
	padding-bottom: var(--image-vpadding);
	max-width: var(--image-mwidth);
	width: var(--image-width);
	height: auto;
	border-radius: 10px;
	overflow: hidden;
}

a:-webkit-any-link {
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none;
}

.citeStyle {
	
  font-size: smaller;
  opacity: 60%;
}

.citeStyle:hover {
	opacity: 100%;
	cursor: pointer;
}

/*Wealth Chart*/
.wealth {
	position: relative;
	display: grid;
	width: 100%;
	padding: var(--wealth-pad);
	margin-bottom: var(--wealth-pad);
	height: min-content;
}

.wealth p {
	padding: 0;
	padding-top: var(--wealth-tpad);
	margin: 0;
	text-align: left;
}

.bar {
	width: 100%;
	background-color: var(--topb-shadow);
  }

.value {
	text-align: right;
	padding-top: var(--wealth-vpad);
	padding-bottom: var(--wealth-vpad);
	padding-right: var(--wealth-vpad);
	font-family: var(--header-family);
}

.Indian {width: 92.4%; background-color: var(--color-four);}
.Pakistani {width: 50%; background-color: var(--color-four);}
.BlackCar {width: 20%; background-color: var(--color-four);}
.BlackAfr {width: 10%; background-color: var(--color-four);}
.Bangla {width: 10%; background-color: var(--color-four);}



.result-backdrop {
	position: relative;
	height: 100vh;
	width: 100vw; 
	display: grid;
	margin: auto;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(img/Black.png);
	overflow: hidden;
	-webkit-box-shadow: inset 0px -40px 40px rgba(0,0,0,0.5),
				  inset 0px 40px 40px rgba(0,0,0,0.5);
	box-shadow: inset 0px -40px 40px rgba(0,0,0,0.5),
				  inset 0px 40px 40px rgba(0,0,0,0.5);
}

/*Swiper Theme*/
.swiper-container {
	position: relative;
	margin: 0;
	height: 100vh;
	width: var(--swiper-width); 
	justify-content: center;
}

.swiper-slide {
	background: none;
	display: grid;
	justify-content: center;
	align-items: center;
	font-size: var(--header2-fsize);
}

.swiper-button-prev, .swiper-button-next {
	margin-left: var(--swiperarrow-margin);
	margin-right: var(--swiperarrow-margin);
	opacity: 40%;
	color: whitesmoke;
}

.swiper-pagination {
	opacity: 100%;
}


/*Result-Card*/
/*Layout*/
.card {
	display: grid;
	grid-template-columns: var(--card-column);
	grid-template-rows: var(--card-row);
	justify-content: center;
	align-content: center;
	color: whitesmoke;
	height: var(--card-height);
	border-radius: var(--card-bradius);
	-webkit-box-shadow: var(--card-shadow) var(--card-shadowc);
    box-shadow: var(--card-shadow) var(--card-shadowc);
}

/*Colors*/
.cAll {
	--target-color: rgba(0, 107, 84, 0.7);
	--sample-color: rgba(0, 107, 84, 0.4);
	--soi-color: rgba(0, 107, 84, 0.1);
	--theader-color: rgba(0, 107, 84, 0.3);
	--editor-color: rgba(0, 107, 84, 0.2);
}

.cDJmag {
	--target-color: rgba(228, 27, 19, 0.7);
	--sample-color: rgba(228, 27, 19, 0.4);
	--soi-color: rgba(228, 27, 19, 0.1);
	--theader-color: rgba(228, 27, 19, 0.3);
	--editor-color: rgba(228, 27, 19, 0.2);
}

.cMixmag {
	--target-color: rgba(231, 129, 53, 0.7);
	--sample-color: rgba(231, 129, 53, 0.4);
	--soi-color: rgba(231, 129, 53, 0.1);
	--theader-color: rgba(231, 129, 53, 0.3);
	--editor-color: rgba(231, 129, 53, 0.2);
}

.cFact {
	--target-color: rgba(231, 212, 53, 0.7);
	--sample-color: rgba(231, 212, 53, 0.4);
	--soi-color: rgba(231, 212, 53, 0.1);
	--theader-color: rgba(231, 212, 53, 0.3);
	--editor-color: rgba(231, 212, 53, 0.2);
}

.cRA {
	--target-color: rgba(136, 53, 231, 0.7);
	--sample-color: rgba(136, 53, 231, 0.4);
	--soi-color: rgba(136, 53, 231, 0.1);
	--theader-color: rgba(136, 53, 231, 0.3);
	--editor-color: rgba(136, 53, 231, 0.2);
}

/*Elements*/
.cTarget {
	display: grid;
	width: 100%;
	height: 100%;
	grid-row: var(--target-row);
	align-content: center;
	padding: var(--card-padding);
	background-color: var(--target-color);
	border-top-left-radius: var(--card-bradius);
	border-top-right-radius: var(--card-bradius);
	font-size: var(--target-fsize);
	font-weight: 800;
	font-family: var(--header-family);
}

.cSample {
	display: grid;
	width: 100%;
	height: 100%;
	grid-row: var(--sample-row);
	align-content: center;
	background-color: var(--sample-color);
	font-family: var(--header-family);
}

.cSOI {
	display: grid;
	width: 100%;
	height: 100%;
	grid-row: var(--soi-row);
	align-content: center;
	font-size: var(--soi-fsize);
	line-height: 1;
	background-color: var(--soi-color);
}

.cSOI > span {
	font-size: var(--sois-fsize);
}

.cHeader {
	display: grid;
	width: 100%;
	height: 100%;
	grid-row: var(--theader-row);
	align-content: center;
	background-color: var(--theader-color);
	font-size: var(--theader-fsize);
	font-family: var(--header-family);
}

.cEditor {
	display: grid;
	width: 100%;
	height: 100%;
	grid-row: var(--editor-row);
	align-content: center;
	background-color: var(--editor-color);
	border-bottom-left-radius: var(--card-bradius);
	border-bottom-right-radius: var(--card-bradius);
	font-size: var(--editor-fsize);
	font-family: var(--body-family);
}


/*Tables*/
table {
	display: grid;
}

tbody {
	margin: auto;
}

th, td { 
	padding: var(--table-padding);
}


tr > td:first-child {
	text-align: right;
	font-weight: bold;
}

tr > td:last-child{
	text-align: left;
}


/*Current Editors Table*/
.cCurrent > table {
	font-size: var(--editor-fsize);
}


/*Historical Editors Table*/
.cHist > table {}


/*Footer*/
footer {
	padding: 15px
}

footer, footer a:link{
	opacity: 80%;
	font-size: var(--nametag-fsize);
	font-family: var(--quote-family);;
	text-align: center;
	color: var(--body-color);
	background-color: var(--text-color);
}