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

	--header1-margin: 0.5rem;

	--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;
  
	--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-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;
  
	--table-width: 95vw;
	--table-mwidth: 750px;
	--table-pad: 7px;
	--table-border: 1px;
	--table-margin: 2rem;
  
	--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;

	--compare-height: auto;
	--compare-fsize: 3rem;
	--compare-pad: 10px;
	--compare-tpad: 5px;
  
}


@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-two: #326796;
		--color-three: #9A38A1;
		--color-four: #B9AD06;
		--color-five: #18C4AA;
		--color-six: #11A660;
	}

	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-two: #70B1EA;
		--color-three: #D595DA;
		--color-four: #FAF061;
		--color-five: #80EFDF;
		--color-six: #5AEDA8;
	}

	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 {	
		/*
		--start-fsize: 9.4vw;
		--sub-fsize: 5vw;
			
		--stats-fsize: 1.8rem; 
		--text-fsize: 2.4rem;
		--quote-fsize: 2.4rem;
		--nametag-fsize: 2rem;

		--text-lheight: 4rem;
		--quote-lheight: 4rem;

		*/

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

		--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;
	}


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

	/*Responsive Table*/
	table thead {
		display: none;
	}

	table, table tbody, table tr, table td {
		display: block;
		width: 95vw;
	}

	table tr {
		margin-top: var(--table-margin);
		border-radius: 8px;
		border-color: var(--section-color);
		border-width: 1px;
		border-style: solid;
	}

	table td {
		position: relative;
		text-align: right;
		padding-left: 50%;
		padding-right: 10px;
		text-align: right;
	}

	table td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: 50%;
		font-weight: bold;
		text-align: left;
		padding-left: 10px;
	}
}

.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);}


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;
	margin: auto;
	color: whitesmoke;
	text-align: center;
	background-image: url(img/Cover.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	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: 60%;
  	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); 
}

.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;
}

.art {
  position: relative;
  height: 100vh;
  width: 100vw; 
  display: grid;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -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);
}

.a01 {background-image: url(img/01-History.jpg);}
.a02 {background-image: url(img/02-Tone.jpg);}
.a03 {background-image: url(img/03-Coverage.jpg);}
.a04 {background-image: url(img/04-Proposal.jpg);}
.a05 {background-image: url(img/05-Editorial.jpg);}
.a06 {background-image: url(img/06-Conclusion.jpg);}


.image {
	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;
}

a:-webkit-any-link > .gothru {
    color: var(--color-four);
}

.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);}

/*Comparison Table*/
.compare {
	position: relative;
	display: inline-grid;
	justify-content: center;
	align-content: center;
	padding: var(--compare-pad);
	grid-template-columns: 50% 50%;
	grid-template-rows: 30% 15% 10% 10% min-content;
	height: var(--compare-height);
	width: 100%;
	margin: auto;
	margin-bottom: 1vh;
	border-bottom: 1px double var(--section-color);
}

.skew {
	grid-column: 1/3;
	grid-row: 1;
	font-family: var(--header-family);
	font-size: var(--compare-fsize);
}

.scale {
	grid-column: 1/3;
	grid-row: 2;
	font-family: var(--header-family);
	font-size: var(--body-fsize);
	text-decoration: underline;
}

.numHess {
	grid-column: 1;
	grid-row: 3;
	padding: var(--compare-tpad);
}

.numBlack {
	grid-column: 2;
	grid-row: 3;
	padding: var(--compare-tpad);
}

.numHess, .numBlack {
	font-family: var(--header-family);
	font-size: var(--body-fsize);
	padding: var(--compare-tpad);
}

.peepHess {
	grid-column: 1;
	grid-row: 4;
	padding: var(--compare-tpad);
}

.peepBlack {
	grid-column: 2;
	grid-row: 4;
	padding: var(--compare-tpad);
}

.method {
	grid-column: 1 / 3;
	grid-row: 5;
	font-size: var(--nametag-fsize);
	padding: var(--compare-tpad);
	margin-top: 10px;
}

.method span {
	opacity: 70%;
	padding: var(--compare-tpad);
}



/*Venue Closure Table*/
table {
	position: relative;
	display: table;
	border-spacing: 0px;
	margin: auto;
	margin-top: var(--table-margin);
	margin-bottom: var(--table-margin);
	text-align: center;
	width: var(--table-width);
	max-width: var(--table-mwidth);
	font-size: var(--table-fsize);
	padding-top: var(--part-padding);
	padding-bottom: var(--part-padding);
	word-break: keep-all;
}

th {
	background-color: var(--section-color);
}

th, td {
	padding: var(--table-pad);
	border-bottom: var(--table-border) solid var(--topa-shadow);
}

table tbody tr:nth-child(even) {
	background-color: var(--topb-shadow);
}

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);
}