body{
  background: #3A1C71;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #FFAF7B, #D76D77, #3A1C71);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #FFAF7B, #D76D77, #3A1C71); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  font-color:#FDFDFE;
  font-size:40px;
  font-family:'Source Code Pro'
}

td {
  background-color:white;
  border-radius:25%;
  opacity:.2;
  width:50px;
  height:50px;
  text-align:center;
  font-family: 'Roboto', sans-serif;
  color:white;
}

.text{
    color: white;
    opacity: 1;
    /* z-index: 2; */
    background-color: transparent;
    border: none; 
}

td:hover{
  opacity:0.4;
}

.content{
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:block;
}

table{
  width:300px;
  height:300px;
}

.table_overlay{
  position:absolute;
    top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

    width:300px;
  height:300px;
}

.modal {
    display:none;/* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
  
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 0px;
  border-radius:10px;
  width: 400px;
  height:200px;
  font-size:17px;
  text-align:center;
  font-family:'Montserrat', sans-serif;;
}

.modal-header {
  padding: 2px;
  border-radius:10px 10px 0 0;
}

.modal-body{
  top: -10px;
  position: relative;
}

btn{
  position: relative;
  top: 10px;
  border-radius:7px;
  padding:10px;
  margin-top:10px;
  color:white;
  background-color:#EF798A;
  cursor:pointer;
}

btn:hover{
  background-color:#CC4C5E;
}