body{
	background-color:white;
	color:black;
	margin:0;
	font-family:Arial;
	font-weight:bold;
}
table {
	margin:auto;
	border-collapse: collapse;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
table, td {
	border:5px solid transparent;
}
td	{
	width:100px;
	height:105px;
	padding:0;
	font-size:90px;
	text-align:center;
	font-family:Arial;
	font-weight:bold;
}
input[type=submit] {
    width:100px;
	height:105px;
    margin:0;
	padding:0;
    display: block;
	border:none;
	font-size:30px;
	border-bottom:5px solid #fc4a1a;
	background-color:#fc6942;
	color:white;
	font-family:Arial;
	font-weight:bold;
}
input[type=submit]:hover {
	border-bottom:none;
	border-top:5px solid #ea3404;
	background-color:#fc4a1a;
}
.disablebutton{
	border-bottom:5px solid #fc4a1a;
	background-color:#fc6942;
	width:100px;
	height:100px;
	margin:0;
	padding:0;
}
.numcase>div{
	background-color:#43b9a7;
	width:205px;
	height:210px;
	border-bottom:5px solid #389c8c;
	line-height: 210px;
	vertical-align: middle;
	color:white;
}
#reset {
	background-image:url("/res/reset.png");
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
#ai {
	background-image:url("/res/ia.png");
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
.arrow_top {
	background-image:url("/res/arrow_top.png");
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
#arrow_left {
	background-image:url("/res/arrow_left.png");
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
#arrow_right {
	background-image:url("/res/arrow_right.png");
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
#full {
	font-size:30px;
	text-align:center;
	font-family:Arial;
	font-weight:bold;
}
.animated-number{
	display:inline-block;
}
.animated-number span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    animation: animateNum 18s linear infinite 0s;
}
.animated-number span:nth-child(2) {  
    animation-delay: 3s; 
}
@keyframes animateNum {
    0% { opacity: 0; }
	50% { opacity: 1;}
    100% { opacity: 0; }
}

#end{
	height:250px;
	width:600px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	border:5px solid #fc4a1a;
}
#end>p {
	font-size:30px;
	text-align:center;
	color:#fc4a1a;
}



@media screen and (max-width: 720px) {
	table{
		width:100%;
	}
	td{
		width:calc((100vw - 30px)/5);
		position: relative;
		height:calc((100vw - 30px)/5);
	}
	input[type=submit] {
		width:calc((100vw - 30px)/5);
		height:calc((100vw - 30px)/5 + 5px);
	}
	.disablebutton{
		width:calc((100vw - 30px)/5);
		height:calc((100vw - 30px)/5);
	}
	.numcase>div{
		width:calc((100vw - 30px)/5 *2 + 5px);
		height:calc((100vw - 30px)/5 * 2 + 10px);
		line-height: calc((100vw - 30px)/5 * 2 + 10px);
	}

}
@media screen and (max-width: 480px),screen and (max-height: 480px) and (orientation:landscape), screen and (device-aspect-ratio: 1/1) and (max-height: 720px) {
	input[type=submit] {
		font-size:25px;
	}
}
@media screen and (max-width: 360px),screen and (max-height: 360px) and (orientation:landscape), screen and (device-aspect-ratio: 1/1) and (max-height: 720px) {
	.numcase>div{
		font-size:70px;
	}
	input[type=submit] {
		font-size:20px;
	}
}
@media screen and (max-height: 720px) and (orientation:landscape), screen and (device-aspect-ratio: 1/1) and (max-height: 720px){
	table{
	height:calc(100vh - 30px);
	width:calc(100vh - 30px);
	position: relative;
    top: 0;
    left: 0;
    transform: translate(0,0);
	}
	td{
		width:calc((100vh - 30px)/5 - 5px);
		height:calc((100vh - 30px)/5 - 5px);
	}
	input[type=submit] {
		width:calc((100vh - 30px)/5 - 5px);
		height:calc((100vh - 30px)/5);
	}
	.disablebutton{
		width:calc((100vh - 30px)/5 - 5px);
		height:calc((100vh - 30px)/5 - 5px);
	}
	.numcase>div{
		width:calc((100vh - 30px)/5 *2 - 5px);
		height:calc((100vh - 30px)/5 * 2);
		line-height: calc((100vh - 30px)/5 * 2);
	}

}

#end>form>input[type=submit]{
	height:105px;
	width:100px;
	position:relative;
	left:250px;
	
}