
body {
    background-color: pink;
    background-image: none;
    /* color: rgb(0, 100, 17); */
    color:black;
    /* font-family: 'Times New Roman', Times, serif; */
}
table {
    border-collapse: collapse;
}

/* tr {
    height: 5em;
} */

td {
    /* border-bottom: lime 1px solid; */
    height: 5em;
    padding-left: 1em;
    padding-right: 1em;
}

th, table {
    
    border-bottom: purple 3px solid;
}

td object, td img {
    height: 5em;
}

tr:hover object, tr:hover img {
  animation: wobble, jump; 
  animation-iteration-count:  1;
  animation-duration: 1.66s, 0.3s;
  animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
  animation-delay: 0.0s, 0s;
  animation-composition: add;
}

@property --gradient-offset{
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

@property --gradient-increase{
    syntax: '<percentage>';
    inherits: false;
    initial-value: 1%;
}

tr td:nth-child(3){
    --gradient-offset: 100%;
    --gradient-increase: 1%;
    background-image: linear-gradient(to right, 
        black var(--gradient-offset),red, orange, yellow, green, blue, purple
        ,black var(--gradient-increase));
    color: transparent;
    background-clip: text;
}

tr:hover td:nth-child(3){
    --gradient-offset: 0%;
    animation: rainbow-sweep 1s 1 linear;
}

@keyframes wobble {
    0.00% {transform: rotate(0.21deg) ;}
    4.22% {transform: rotate(7.81deg) ;}
    13.79% {transform: rotate(-4.59deg) ;}
    23.37% {transform: rotate(2.70deg) ;}
    32.95% {transform: rotate(-1.59deg) ;}
    42.53% {transform: rotate(0.93deg) ;}
    52.11% {transform: rotate(-0.55deg) ;}
    61.69% {transform: rotate(0.32deg) ;}
    71.26% {transform: rotate(-0.19deg) ;}
    80.84% {transform: rotate(0.11deg) ;}
    90.42% {transform: rotate(-0.07deg) ;}
    100.00% {transform: rotate(0.04deg) ;}
  }

@keyframes jump {
    0.00% {transform: translateY(0) ;}
    50% {transform: translateY(-1em) ;}
    100.00% {transform: translateY(0) ;}
}

@keyframes rainbow-sweep {
    from {
        --gradient-offset: 100%;
        --gradient-increase: 100%;
    }
    50% {
        --gradient-offset: 0%;
        --gradient-increase: 100%;
    }

    to {
        --gradient-offset: -100%;
        --gradient-increase: 0%;
    }
}
