body {background-color: #ececec;}

@keyframes flyit {
  0%   {transform: perspective(1cm) rotateX(-30deg) rotateY(90deg);}
  10%  {transform: perspective(2cm) rotateX(-25deg) rotateY(90deg);}
  20%  {transform: perspective(3cm) rotateX(-20deg) rotateY(80deg);}
  30%  {transform: perspective(4cm) rotateX(-15deg) rotateY(70deg);}
  40%  {transform: perspective(5cm) rotateX(-13deg) rotateY(60deg);}
  50%  {transform: perspective(6cm) rotateX(-11deg) rotateY(50deg);}
  60%  {transform: perspective(7cm) rotateX(-9deg) rotateY(40deg);}
  70%  {transform: perspective(8cm) rotateX(-7deg) rotateY(30deg);}
  80%  {transform: perspective(9cm) rotateX(-5deg) rotateY(20deg);}
  90%  {transform: perspective(10cm) rotateX(-3deg) rotateY(10deg);}
  100% {transform: perspective(16cm) rotateX(-0deg) rotateY(0deg);}
}

@keyframes fadein {
	from {
        height:0%;width:0%;opacity:0;
    }
    to {
        height:80%;width:80%;opacity:1;
    }
}

@keyframes fadeout {
    from {
        height:80%;width:80%;opacity:1;
    }
    to {
        height:0%;width:0%;opacity:0;
    }
}

* {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

body, html {
    padding: 3px 3px 3px 3px;
    background-color: #ececec;
    font-family: Arial, sans-serif;
    font-size: 11pt;
    text-align: center;
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.fade-in {
	animation-name: fadein; 
	animation-duration: 1s; 
}

.flyimg {
	animation-name: flyit; 
	animation-duration: 1s;
	height:40%;
}

.helpdiv {
	z-index: 300;
	background-color:white;
	position:absolute;
	margin-top:5%;
	left:40px;
	border: 3px solid black;
	border-radius:20px;
	padding:30px;
	height:80%;
	width:80%;
	opacity:1;
	animation-name: fadein; 
	animation-duration: 1s;
}

.helphide {
	background-color:white;
	position:absolute;
	margin-top:5%;
	left:40px;
	border: 3px solid black;
	border-radius:20px;
	padding:30px;
	opacity:0;
	animation-name: fadeout; 
	animation-duration: 1s; 
}

.helptext {
	width:100%;
	height:100%;
	border:none;
	left:40px;
}

.score {
	width:80px;
	color:black;
	background-color:white;
	font-family:century;
	font-size:12pt;
	padding:2px;
	border-radius:8px;
	cursor:pointer;
}

.score_active {
	width:80px;
	color:black;
	background-color:yellow;
	font-family:century;
	font-size:12pt;
	padding:2px;
	border-radius:8px;
	cursor:pointer;
}

.score_error {
	width:80px;
	color:white;
	background-color:red;
	font-family:century;
	font-size:12pt;
	padding:2px;
	border-radius:8px;
	cursor:pointer;
}

.score_grey {
	width:80px;
	color:black;
	background-color:lightgrey;
	font-family:century;
	font-size:12pt;
	padding:2px;
	border-radius:8px;
}

.tcell {
	width: 180px;
	text-align:center;
	cursor:pointer;
}

.sbutton {
	width:250px;
	background-color:white;
	font-family:century;
	font-size:11pt;
	padding:1px;
	border-radius:10px;
	cursor:pointer;
}

.clickable {
	cursor:pointer;
}

.acell {
	text-align:center;
	font-family:century;
	font-size:24pt;
}
	
.rowlabel {
	font-family:century;
	font-size:9pt;
	height:30; 
	width:20%; 
	text-align:center;
	vertical-align:middle;
}

th, td {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 3px;
	padding-right: 3px;
}

.startbutton {
	font-family:century;
	font-size:18pt;
	height:120px;
	width:400px;
	background-color:white;
	padding:5px;
	border-radius:10px;
}

.name {
	font-size: 18pt;
	font-face: century;
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: 2px solid black;
	border-radius: 10px;
}
	
.pressbutton {
  background-color: #4682B4;
  border: 0;
  border-radius: 56px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width:30%;
}

.pressbutton:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.pressbutton:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .pressbutton {
    padding: 16px 48px;
  }
}