body {
    background: rgb(10, 173, 105);
    display: flex;
    height: 100vh;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  h1, h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    color: white;
    text-shadow: 0px 0px 20pt #000000, 0px 0px 10pt #000000;
  }

  h1 {
    font-size: 20pt;
  }

  h1 a {
    text-decoration: none;
    color: #f1c40f;
  }

  h2 {
    font-size: 50pt;
  }
  
  h2 img {
    filter: drop-shadow(0px 0px 20pt #000000);
    filter: drop-shadow(0px 0px 10pt #000000);
  }

  #bingotable {
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
    width: 400px;
    height: 400px;
    border-collapse: collapse;
    background: white;
    box-shadow: 0px 0px 20px #000000;
  }
  
  th, td {
    font-family: Helvetica;
    font-family: 'Comic Sans MS', sans-serif; font-size: 11pt;
    margin: 0 auto;
    text-align: center;
    border: 3px solid black;
    width: 20%;
    height: 20%;
  }

  .undone {
    
    background: white;
  }

  .done {
      
    background: #09ad09;
  }



  section {
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

  }
  span {
    position: absolute;
    pointer-events: none;
    background: #fff;
    animation: animate 5s linear infinite;
  }
  section img {
    position: absolute;
    pointer-events: none;
    background: none;
    animation: animate 5s linear infinite;
  }
  @keyframes animate {
      0%
      {
          transform: scale(0) translateY(0) rotate(0deg);
          opacity: 0;
      }
      10% 
      {
          opacity: 1;
      }
      90%
      {
          opacity: 1;
      }
      100%
      {
          transform: scale(1) translateY(-500%) rotate(360deg);
          opacity: 0;
      }
  }