body{background-color:midnightblue;}
table{border:2px solid white;background-image:linear-gradient(90deg, forestgreen,darkgreen);width:auto;color:white;height:190px;min-width:760px;margin-left:10%;font-size:1.8em;padding:5px;}
th,td{text-align:center;width:60px;height:40px;}
canvas{}
.active{background-image:url(BaseballGame.png);background-repeat:no-repeat;background-size: cover;}
.name{display:inline-block;margin-left:150px;background-image:linear-gradient(90deg, forestgreen,darkgreen);text-align:center;width:200px;
  height:AUTO;line-height:120px;vertical-align:top;min-width:250px;display:none;font-size:2em;color:white;border:2px solid white;}
.infoRow{width:100%;line-height:38px;box-sizing:border-box;font-size:.8em;border-left:2px solid white;border-bottom:2px solid white;}

.gameInfo{display:inline;width:23%;text-align:center;}
.questionWrapper{position:absolute;bottom:10px;width:70%;left:15%;display:none;background-color:rgba(34,139,34,.9);border:10px double white;padding:15px;}
.question{width:80%;height:60px;margin-left:10%;font-size:2.2em;font-weight:900;line-height:30px;text-align:center;
  background-color:rgba(192,192,192,.75);margin-top:5px;padding:5px;}
.answers{width:80%;margin-left:10%;margin-top:5px;height:30px;line-height:30px;background-color:rgba(192,192,192,.75);
  border:1px solid black;text-align:center;cursor:pointer;font-size:1.7em}
.answers:active{width:72%;margin-left:15%;Margin-top:6px;height:36px;background-color:silver;}
.answerWrap{width:80%;min-height:155px;margin-left:10%;background-color:rgba(192,192,192,.75);padding:5px;}
.timer{margin-left:auto;margin-right:auto;width:600px;border:4px solid black;height:30px;background-color:white;}

.startWrap{position:absolute;top:50px;left:20%;width:60%;background-color:rgba(190,190,190,.5);height:800px;}
.startButton{margin-left:auto;margin-right:auto;width:150px;height:60px;margin-top:40px;border:1px solid black;
  line-height:60px;font-weight:900;font-size:1.4em;text-align:center;cursor:pointer;background-color:gray;box-shadow: inset 0 0 3px #000;}
.startButton:active{height:54px;font-size:1.35em;width:135px;background-color:dimgray}
.pitch{display:none;margin-left:45%;margin-top:0px;}
.modalTwo{position:absolute;width:40%;height:300px;background-color:rgba(190,190,190,.5);border:2px solid black;margin-left:30%;display:none;bottom:70px;}
.hit{height:200px;width:70%;margin:50px auto;box-sizing:border-box;border:8px double red;background-color:antiquewhite;
  line-height:200px;font-size:5em;color:red;display:none;text-align:center}
.closeButton{position:absolute;right:20px;top:20px;height:40px;width:40px;line-height:40px;box-sizing:border-box;border:1px solid black;
  color:white;background-color:gray;text-align:center;display:none;25}
.closeButton:active{height:36px;width:36px;top:22px;right:22px;line-height:36px;}

.LineUp{height:40px;width:100%;text-align:center;font-size:1.4em;color:white;border-bottom:4px solid white;line-height:40px;}
.lineUpWrap{position:absolute;top:265px;width:10%;margin-top:0px;border:4px solid white;background-image:linear-gradient(90deg, forestgreen,darkgreen);display:none;}
.right{right:0px;}
/* for the diamond in the corner */
.field{display:none;margin-top:20px;transform:rotate(45deg);border:3px solid white;margin-left:10%;width:150px;height:150px;
  vertical-align:top;overflow:hidden;background-image:linear-gradient(90deg, forestgreen,darkgreen);}
.runner{position:absolute;width:20px;height:20px;background-color:gold;top:130px;right:0px;}
.out{animation:out 2s;animation-fill-mode: forwards;}
.toFirst{animation:toFirst 2s; animation-fill-mode: forwards;}
.toSecond{animation:toSecond 2s ;animation-fill-mode:forwards;}
.toThird{animation:toThird 2s ;animation-fill-mode:forwards;}
.toHome{animation:toHome 2s ;animation-fill-mode:forwards;}
/* .toSecond{animation:toSecond 4s;animation-fill-mode:forwards;}
.firstToThird{animation:firstToThird 4s;animation-fill-mode:forwards;}
.secondToHome{animation:secondToHome 4s;animation-fill-mode:forwards;} */

@keyframes out{
  from {right:0px;top:130px;}
  to {top:130px;right:-50px;}
}

@keyframes toFirst{
  from {right:0px;top:130px;}
  to {top:0px;right:0px;}
}

@keyframes toSecond{
   from {right:0px;top:0px;}
   to {top:0px;right:130px;}
}

@keyframes toThird{
   from {right:130px;top:0px;}
   to {top:130px;right:130px}
}

@keyframes toHome{
   from {right:130px;top:130px;}
    85%  {right:0px;top:130px;}
    100% {right:-20px;top:130px;}
}

/* @keyframes toSecond{
  from{right:0px;top:130px}
  50%{right:0px;top:0px;}
  100%{right:130px;top:0px;}
} */

@keyframes firstToThird{
  from{right:0px;top:0px}
  50%{right:130px;top:0px}
  100%{right:130px;top:130px}
}

@keyframes secondToHome{
  from{right:130px;top:0px;}
  50%{right:130px;top:130px;}
  85%{right:0px;top:130px}
  100%{right:-20px;top:130px;}
}