*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body{
  font-family: "Comic Sans MS", cursive;
}

.cover{
  color: white;
  position: absolute;
  width: 100vw;
  height:100vh;
  z-index:2;
  display: grid;
  place-items: center;
  background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(./Cover.jpg);
  opacity:1;
  transition: opacity 0.5s;
}

.cover h1, .choose{
  font-size: 55px;
}

.cover .choose{
  display: flex;
  margin-top: 50px;
  justify-content: center;
  font-size: 60px;
}

.cover .option{
  padding: 0 50px;
  cursor: pointer;
  transition: transform 0.5s;
}

.cover .option:hover{
  transform: scale(1.5);
}

.hide{
  z-index: -1;
  opacity:0;
}

h1{
  display: flex;
  justify-content: space-around;
  padding-top: 100px;
  font-size: 35px;
}

td {
  border: 2px solid #333;
  height: 100px;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  
  font-size: 70px;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  position: absolute;
  left: 50%;
  margin-left: -155px;
  top: 200px;
}

table tr:first-child td {
  border-top: 0;
}

table tr:last-child td {
  border-bottom: 0;
}

table tr td:first-child {
  border-left: 0;
}

table tr td:last-child {
  border-right: 0;
}

.endgame {
  display: none;
  width: 200px;
  top: 280px;
  background-color: rgba(24,21,21,0.8);
  position: absolute;
  left: 50%;
  margin-left: -100px;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-size: 2em;
}

button {
 font-size: 20px;
 width : 100px;
 height: 35px;
 border: 2px solid #333;
 border-radius: 5px;
 cursor: pointer;
 position: absolute;
 top : 550px;
 left:50%;
 margin-left: -50px;
 background: transparent;
}

button:active{
 background-color: rgb(207, 207, 207);
}