body {
	background-color: #000;
	/*background: linear-gradient(90deg, rgba(0, 0, 0, 0.38) 3.07%, rgba(6, 37, 65, 0.3) 88.06%);*/
	background-image: url("./assets/images/list.jpg");
	font-family: Radiance-Bold;
	letter-spacing: -0.5px;
	font-size: 21px;
	margin: 0px;
}

@font-face {
  font-family: 'Radiance';
  src: url(./assets/fonts/radiance.ttf);
}

@font-face {
  font-family: 'Radiance-Bold';
  src: url(./assets/fonts/radiance-bold.ttf);
}

@font-face {
  font-family: 'Radiance-SemiBold';
  src: url(./assets/fonts/radiance-semibold.ttf);
}

.Container {
	width: 100%;
	background-color: #000;
}

#Header {
	margin-left: auto;
    margin-right: auto;
	text-align: center;
	padding: 30px 0;
	color: #ED3B1C;
}

.Inner {
	width: 80%;
	margin: 0 auto;
}

h1 {
	font-size: 72px;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-weight: normal;
	margin: auto;
}

h2 {
	font-family: 'Radiance';
	font-weight: 100;
	margin: 5px auto;
	font-size: 25px;
}

h3 {
	font-size: 30px;
    letter-spacing: 5px;
    font-weight: normal;
	margin: auto;
	font-size: 15px;
	padding-top: 10px;
}

h3 a:link {
  text-decoration: none;
  color: #551a8b;
}

#searchDiv {
	display: flex;
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

#searchglass {
    vertical-align: middle;
    margin-right: 8px;
    height: 33px;
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23faeac9'%3E%3C!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free https://github.com/FortAwesome/Font-Awesome/tree/master/svgs/solid (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
}

#myInput {
  width: 100%;
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 61px; /* Add some padding */
  border: 1px solid #4b5054; /* Add a grey border */
  color: white;
  background: #17181b;
  font-family: Radiance;
  font-size: 25px;
}

#table_container {
	/*background-image: url("https://cdn.cloudflare.steamstatic.com/apps/dota2/images/720/list.jpg");*/
}

.quoteTable {
  border-collapse: collapse; /* Collapse borders */
  width: 80%; /* Full-width */
  font-size: 21px;
  margin: 25px auto;
}

tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #000;
}

th {
  /* Add a grey background color to the table header and on hover */
  background-color: #00000082;
  color: #b7b7b4;
  line-height: 30px;
}

tbody {
	/*background: linear-gradient(90deg, rgba(0, 0, 0, 0.38) 3.07%, rgba(6, 37, 65, 0.3) 88.06%);*/
}

th,td{
  border:1px solid #000; 
  text-align: left; /* Left-align text */
  padding: 3px; /* Add padding */
  word-break: break-word;
}

th {
	padding-left: 5px;
}

td{
	background-color: #00000040;
	background-clip: padding-box;
}

td:first-child{
	width: 30%;
	text-align: right;
}

td:nth-child(2){
	width: 45%;
}

td:nth-child(3){
	width: 25%;
	color: #676767;
}

tr:hover td:nth-child(-n+2){
	background-color: #000000b0;
	/*background: linear-gradient(90deg, rgba(0, 0, 0, 0.38) 3.07%, rgba(6, 37, 65, 0.3) 88.06%);*/
}

.cp_btn {
	float:right;
	box-shadow: inset 0px 1px 0px 0px #636363;
	background: linear-gradient(to bottom, #3e3e3e 5%, #303233 100%);
	background-color: #303233;
	border-radius: 6px;
	border: 1px solid #382a2a;
	display: inline-block;
	cursor: pointer;
	color: #bdbdbd;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	padding: 6px 10px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 1px 0px #696767;
	margin: 0 10px;
	min-width: 80px;
}
.cp_btn:hover {
	background:linear-gradient(to bottom, #303233 5%, #3e3e3e 100%);
	background-color:#303233;
}
.cp_btn:active {
	position:relative;
	top:1px;
}

.copy-field {
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    filter: drop-shadow(0px 1px black) drop-shadow(1px 1px black);
    vertical-align: middle;
	background-image: -webkit-linear-gradient(#faeac9, #faeac9);
	margin-right: 10px;
}

.herolist__hero__link {
	display: inline-flex;
	vertical-align: middle;
	image-rendering: pixelated;
}

.hero__placeholder {
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}

.dotaplus {
	width: 45px;
	display: inline-block;
	text-align: center;
}

.dotaplus img {
	vertical-align: middle;
	height: 36px;
	margin-right: 4px;
}

.speaker img {
	vertical-align: middle;
	margin-right: 5px;
	width: 20px;
}

.message {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    filter: drop-shadow(0px 1px black) drop-shadow(1px 1px black);
    vertical-align: middle;
}

.hidden {
	display: none;
}

.secret {
	background-color: #931ced96;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	height: 0;
	visibility: collapse;
}

.secret.revealed {
	opacity: 1;
	transform: translateX(0);
	height: auto;
	visibility: visible;
}

a:link {
  text-decoration: none;
}

.grandmaster {
	background-image: -webkit-linear-gradient(#f3a8a8, #e01333);
}

.master {
	background-image: -webkit-linear-gradient(#dbc6ff, #8326c5);
}

.platinum {
	background-image: -webkit-linear-gradient(#dae7ff, #5d9eff);
}

.gold {
	background-image: -webkit-linear-gradient(#fdfbd2, #e9e463);
}

.silver {
	background-image: -webkit-linear-gradient(#dff1f4, #add7e0);
}

.bronze {
	background-image: -webkit-linear-gradient(#fadd9a, #e2b276);
}

.bonus {
	background-image: -webkit-linear-gradient(#e3ffde, #0cda1c);
}

.default {
	background-image: -webkit-linear-gradient(#faeac9, #faeac9);
}

@media screen and (max-width : 700px)
{
	h1 {
	  font-size: 30px;
	}
	h2 {
	  font-size: 15px;
	}
	.Inner {
	  width: 90%;
	  margin: 0 auto;
	}
	#searchDiv{
		width: 95%;
	}
	#otherquotes, #heroquotes{
		width: 100%;
	}
	.copy-field, th:nth-child(3), td:nth-child(3){
	display: none;
	}
	
	td:first-child{
	text-align: center;
	}
	
	.herolist__hero__link{
	margin: 5px;
	}
	
	.cp_btn {
	float:none;
	}
}