@font-face {
  font-family: 'MR MONSTAR';
  src: url('../fonts/Mr. Monstar.ttf');
  src: url('../fonts/Mr. Monstar.eot') ;
  src: local('Mr. Monstar'),  url('../fonts/Mr. Monstar.woff') format('woff'), url('../fonts/Mr. Monstar.otf') format('opentype'); /* IE */

}
    body {
        background: black;
		background-image: url("../img/backnew.jpg"); 
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		text-align: center;
		color: #bfbfbf;
    }
	#wrapper{
		width: 81%;
		margin: auto;
		padding: 2%;
		}
	h3 {
		color: yellow;
		font-weight: bold;
	}
	table 
	{
		margin-left: auto;
		margin-right: auto;
	}
	td { 
		font-size: clamp(12px, 1,vw, 20px);
		border: 1px solid red;
		padding: 4px;
		margin-left: 8px;
	}
	td.empty {
		border: none;
	}
	.center{ 
		margin: auto;
		width: 100%;
		top: 20px;
		border: 1px #fff;		 
	}
	.container {		
		font-size: clamp(12px, 1,5vw, 20px);
		margin: auto;
		width: 100%;
		color: #bfbfbf;
		border-style: solid;
		border-color: red;
		border-width: 1px;
		text-align: justify, center; 
		text-justify: inter-word;
		overflow:auto;
		}	
	.container_inner {		
		width: 43%;
		color: #bfbfbf;
		border-style: solid;
		border-color: red;
		border-width: 1px;
		margin-left: 3%;
		margin-bottom: 5%;
		float: left;
		padding: 2%;
	}
		.container_inner_right {		
		font-size: clamp(12px, 1,5vw, 20px);
		margin-right: 3%;
		margin-bottom: 2% ;
		width: 40%;
		color: #bfbfbf;
		top: 25px;
		border-style: solid;
		border-color: red;
		border-width: 1px;
		text-align: justify, center; 
		text-justify: inter-word;
		float: right;
		padding: 1%;
		overflow-x: auto;
	}
	.container lu {
	display:table;
	width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	}
	.container li{
	font-weight: bold;
	width: 90%;
	}
	.tr {
	display: table-row;
}
	.td {
	width: 25% ;		
    float: none;
    width: 1%;
    padding: 4px 8px;
    display: table-cell;
}
    h1 {
      	text-align: center;
		font-family: 'MR MONSTAR';
		font-size: clamp(24px, 4.5vw, 72px);
		text-shadow: 6px 9px #0000ff55, 3px 4px #ffff00ff;
    }
	.remain { 
		background-image: url("../img/bg3.png");
		background-size: 14vw;
		background-repeat: repeat-x;
		display: table; 		
		width: 100%;
		animation: glow 12s infinite alternate;
		} 
    h1 span {
		color: red; 
		background-color: rgba(0, 0, 0, .2);		
        padding: 25px 2.5vw;
        display: table-cell;
        box-shadow: inset 0 0 5px
            rgba(0, 0, 0, 0.3),
                0 5px 0 #fa0;
        animation: animate 30s infinite;
		animation-fill-mode: both;
    }
    /* Specify the animation keyframes
        to be used to move the letters */
    @keyframes animate {
        0% {
            transform: translateX(3200px) ;
        }
		10% {
            transform: translateY(2px) 
			skewX(2deg);			
			opacity : 1;
        }
        26% {
            transform: translateX(9px)
			skewX(9deg);
		}
		28% {
			transform: translateY(12px)
			scaleY(-0.1)
			skewX(-4deg);
        }
        40% {
            transform: translateY(-8px);
        }
		50% {
            transform: translateY(-13px)
			skewX(11deg);
			opacity : 0.8;
        }
		51% {
            transform: translateY(-10px)
			scaleX(-0,8);
        }		
        60% {
            transform: translateX(-6px);
        } 
        70% {
            transform: translateY(0px);
			opacity : 0.1;
        }
		85% {
            transform: translateY(0px);
			opacity : 1;
        }
		100% {
            transform: translateY(-31000px);
			skewX(9deg);
			opacity : 0;			
        }
		
    }
	@keyframes glow {
		from {
			filter: contrast(1);
		}
		to {
			filter: contrast(1.7);
		}
	}
 
    /* Specify a slight delay for
        each of the letters */
    h1 span:nth-child(1) {
        animation-delay: 0.1s;
    }
 
    h1 span:nth-child(2) {
        animation-delay: 3s;
    }
 
    h1 span:nth-child(3) {
        animation-delay: 2s;
    }
 
    h1 span:nth-child(4) {
        animation-delay: 0.9s;
    }
 
    h1 span:nth-child(5) {
        animation-delay: 0.5s;
    }
 
    h1 span:nth-child(6) {
        animation-delay: 1.6s;
    }
 
    h1 span:nth-child(7) {
        animation-delay: 2.5s;
    }
 
    h1 span:nth-child(8) {
        animation-delay: 0.8s;
    }
 
    h1 span:nth-child(9) {
        animation-delay: 1s;
    }