body {
    background-color: rgb(61, 58, 58);
}



.Topic {
    padding-top: 8%;
    text-align: center;
	background: linear-gradient(-45deg, #988ccf, #6355a4, #9be9ba, #a9e08e);
	background-size: 300%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 900;
	font-size: 5vw;
	letter-spacing: -5px;
	text-transform: uppercase;
    background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: animated_text 10s ease-in-out infinite, moving 3s forwards, mar 3s forwards;
	-moz-animation: animated_text 10s ease-in-out infinite, moving 3s forwards, mar 3s forwards;
	-webkit-animation: animated_text 10s ease-in-out infinite, moving 3s forwards, mar 3s forwards;
}

@keyframes animated_text {
	0% { background-position: 0px 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0px 50%; }
}

@keyframes moving {
    0% {padding-top: 8%;}
	50% {padding-top: 3%;}
    100% {padding-top: 0%;}
}

@keyframes mar {
	0% {margin-bottom: 10%;}
	100% {margin-bottom: 0%;}
}

h4 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 23px;
	text-shadow: 3px #46a28b;
	letter-spacing: 0px;
	text-transform: uppercase;
	color:rgb(255, 242, 220);
	margin-bottom: 14px;
}


#InputNum {
	text-align: center;
	color: rgb(255, 255, 255);
	font-size: 23px;
	margin-left: auto;
    margin-right: auto;
	display: flex;
	align-items: center;
	height: 40px;
	min-width: 40%;
	border-style: solid;
	border-radius: 15px;
	border-width: 3px;
	border-color: linear-gradient(21deg, #10abff, #1beabd);
	appearance: none;
	-moz-appearance: textfield;
	background-color: rgba(255, 255, 255, 0.186);
	margin-bottom: 3%;
}

#InputNum:hover {
	height: 43px;
	width: 43%;
	background-color: #ffffff6c;
}

#mt {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	border-collapse: collapse;
	border-radius: 3px;
	width: 100%;
	justify-content: center;
	margin-left: auto;
    margin-right: auto;
}



td, th {
	font-size: 20px;
	border: 2px solid rgb(148, 144, 144);
	width: 50px;
	height: 40px;
}
tr:nth-child(3n){background-color: #f2ffdc;}
tr:nth-child(3n+1){background-color: #e2dcff;}
tr:nth-child(3n+2){background-color: #bad6e8;}


tr:nth-child(3n) td:nth-child(2n){background-color: #f3ecd1;}
tr:nth-child(3n+1) td:nth-child(2n){background-color: #d2adcd;}
tr:nth-child(3n+2) td:nth-child(2n){background-color: #a4cbb8;}
td:hover {background-color: #7b7975 !important;color: #efebff;}


@media only screen and (max-width: 1023px) {
	[class*="Topic"] {
	  font-weight: 750;
	  letter-spacing: -2px;
	  font-size: 6vw;
	}
}

@media only screen and (max-width: 500px) {
	[class*="Topic"] {
		font-weight: 600;
		letter-spacing: 0px;
		font-size: 10vw;
	}
}

@media only screen and (min-width: 2000px) {
	[class*="theh4"] {
		font-size: 2.5vw;
	}
	[class*="theinput"] {
		height: 300px !important;
		width: 1500px;
	}
}