.teksti {
        background-color: aqua;
        font-size: 24;
        font-family: cursive;
        text-align: center;
    }
/*Ylempi on Teksti Tyyliin, Lamlpi On lukkariin */
.tab {
    border: 10px solid black;
    table-layout: fixed;
    border-radius: 10px;
}
.tab th {
    border: 3px solid black;
    border-radius: 10px;
    text-align: center;
    background-color: darkred;
}
.tab td {
    empty-cells:hide
    border: 3px solid red;
    background-color: blueviolet;
    border-radius: 100%;
    text-align: center;
}
.tab td:hover {
    border: 3px solid red;
    border-radius: 100%;
    background-color: aqua;
}
.tab td:active {
    animation: Drop 1s;
    animation-timing-function: linear;
}
@keyframes Drop {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    10% { transform: translate(0px, -10px) rotate(-1deg); }
    20% { transform: translate(-10px, -20px) rotate(1deg); }
    30% { transform: translate(-11px, -30px) rotate(0deg); }
    100% { transform: translate(-11px, 500px) rotate(-1deg); opacity: 0%; }
  }
/*Asetelma13*/
.dan {
    background-color: aqua;
    width: 200px;
    border: 5px;
    float: left;
    z-index: 2;
}
.stuff {
  float: left;
  width: 25%;
  padding:4px;
  z-index: -1;
  opacity: 50%;
}
.stuff:hover {
    z-index: 1;
    opacity: 100%;
}
.stuff:active {
    animation: stuffed 1s;
    animation-timing-function: linear;
    opacity: 100%;
}
button {
    background-color: black;
    color: aqua;
}
@keyframes stuffed {
  0%   {scale: 100%; transform: translate(0px, 0px)}
  50%   {scale: 50%; transform: translate(1000px, 0px)}
  100%   {scale: 100%; transform: translate(0px, 0px)}
}