@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    font-family: "Roboto";
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(100,100,200,1) 98%);
    /* background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%); */
    /* animation: gradient 30s ease infinite; */
    background-size: 400% 400%;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    /* animation: wave 10s -3s linear infinite; */
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    /* animation: wave 18s linear reverse infinite; */
    opacity: 0.8;
    transform: translateX(-25%);
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    /* animation: wave 20s -1s reverse infinite; */
    opacity: 0.9;
    transform: translateX(-50%);
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}



#myCanvas {
  width: 300px;
  height: 500px;
  border: 2px solid blue;
  margin-left: auto;
  margin-right: auto;
  display: block;
  touch-action: none;
  background-color: white;
}

.guess {
  position: absolute;
  /* top: 50px;
  left: 50px; */
  margin: auto;
  visibility: hidden;
  /* font-size: 30px; */
  /* color: rgba(235, 0, 0, 0.5); */
 /* transform: rotate(-30deg); */
  z-index: 99;
}

span {
  font-size: 50px;
  color: blue;
  /* transform: rotate(30deg); */
}

.guessright {
  animation: myani2 4s linear;
}
.guesswrong {
  animation: myani 2s linear;
}

@keyframes myani {
    0% {
      visibility: visible;
      font-size: 0px;
      color: rgba(0, 0, 235, 1);
      transform: rotate(0deg);
    }
    50% {
      font-size: 100px;
      color: rgba(235, 0, 0, 1);
      transform: rotate(15deg);
    }
    100% {
      font-size: 200px;
      color: rgba(235, 0, 0, 0);
      transform: rotate(-15deg);
    }
}

    @keyframes myani2 {
        0% {
          visibility: visible;
          font-size: 00px;
          color: rgba(0, 0, 235, 1);
          transform: rotate(0deg);
        }
        50% {
          font-size: 200px;
        color: rgba(0, 235, 00, 1);
        transform: rotate(-15deg);
      }

        100% {
          font-size: 200px;
          color: rgba(0, 235, 00, 0);
          transform: rotate(15deg);
        }

}

        input {
          background-color: rgba(255,255,255,0.3);
          border: 0px groove;
          border-top: 0px;
          border-bottom: 2px groove;
          border-left: 0px;
          border-right: 0px;
          border-color: #5882FA;
          width: 340px;
          margin-bottom: 20px;
          /* margin-top: 20px; */
          /* margin-left: auto;
          margin-right: auto; */
          font-size: 30px;
          /* text-align: center; */
          padding-left: 10px;

        }

        .button {
          text-decoration: none;
          color:white;
          font-weight: bold;
          padding: 6px;
          /* font-size: 14px; */
          border-radius: 3px;
          background-color: #5882FA;
          text-align: center;
          cursor: pointer;
          margin-bottom: 5px;
        }

        .label {
          /* background-color: rgba(255,255,255,0.3);
          border: 0px groove;
          border-top: 0px;
          border-bottom: 2px groove;
          border-left: 0px;
          border-right: 0px; */
          /* border-color: #5882FA; */
          /* padding-top: 20px; */
          width: 350px;
          /* margin: 20px; */
          color: white;
          font-weight: 400;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 20px;
          font-size: 30px;
          text-align: center;
        }
    .headlb {
      color: white;
      font-size: 20px;
      font-weight: 600px;
      padding: 5px;
    }

    #table {
      position: absolute;
      color: white;
      font-size: 30px;
      margin: 20px;
      /* border: 1px solid #ddd; */
      border-spacing: 10px;
      /* max-width: 300px; */

    }

/* tr:nth-child(even){background-color: #f2f2f2;} */

/* tr {border: 1px solid #ddd;} */
td {
  border: 1px solid #ddd;
  padding: 8px;
  margin-right: 50px;
  }