 *,
 *::before,
 *::after {
    box-sizing: border-box;
}
:root {
    --gradient-h1: linear-gradient(
        45deg,
        rgb(75, 12, 210),
        rgb(70, 7, 200),
        rgba(92, 255, 114, 0.5),
        rgba(0, 255, 34, 0.5)
    );
    --gradient-table: linear-gradient(
        45deg,
        rgb(179, 4, 248, 0.7),
        rgb(48, 12, 255, 0.7),
        rgb(9, 66, 250, 0.7),
        rgb(9, 250, 170, 0.7),
        rgb(255, 124, 1, 0.7)
    );
}
body {
    background-color: rgba(10, 25, 76, 0.282);
}

h1 {
    background-image: var(--gradient-h1);
    background-size: 150%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    font-size: 3rem;
    animation: h1-animation 4s infinite alternate;
}
@keyframes h1-animation {
    0% {
        background-position: left;
    }    
    100% {
        background-position: right;
    }
}
p.center_text {
    text-align: center;
    color: rgb(75, 12, 210);
}

/*just another way to setup gradients*/

/* .gradient {
    background-image: var(--gradient);
    background-size: 200%;
    background-position: left;
    transition: background-position 1.5s ease;
}
.gradient:hover,
.gradient:focus {
    background-position: right;

} */

table {
    background-image: var(--gradient-table);
    background-size: 200%;
    animation: h1-animation 4s infinite alternate;
    min-width: 50%;
    margin-left: auto;
    margin-right: auto;
    color: green;
    font-size: 1.25rem;
    border-collapse: collapse;
    box-shadow: 3px 5px 10px rgba(5, 22, 151, 0.3);
}
td {
    padding: 5px;
    border: 1px solid rgb(251, 2, 201)
}
td:nth-child(even) {
    background-color: rgba(75, 12, 210, 0.5);
    color: rgb(0, 255, 34);
}
td:nth-child(odd) {
    background-color: rgba(0, 255, 34, 0.5);
    color: rgb(75, 12, 210);
}
input {
    width: 60px;
    text-align: left;
}
div.centerinput {
    margin-bottom: 20px;
    text-align: center;
}
@media (max-width: 480px) {
    td {
        font-size: .9rem;
        padding-right: 10px;
    }
}
