style.css

:root {
    --g1: rgb(98, 0, 234);
    --g2: rgb(236, 64, 122);
    --accent: rgb(136, 0, 255);
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes background-pan {
    from {
        background-position: 0% center;
    }

    to {
        background-position: -200% center;
    }
}

#canvas {
    position: fixed;
    z-index: -10;
    width: 95vmin;
    height: 95vmin;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    animation: background-pan 10s linear infinite;
    background: linear-gradient(
        to right,
        var(--g1),
        var(--g2),
        var(--g1)
    );
    background-size: 200%;
}

#input {
    margin-left: 10px;
    width: 15%;
    display: grid;
    height: 100vmin;
    align-items: center;
}

#input input {
    width: 50%;
    accent-color: var(--accent);
}

#input button {
    background-color: rgb(185, 185, 185);
    border: rgb(100, 100, 100) 2px solid;
    height: 30px;
}

#input button:hover {
    background-color: rgb(141, 181, 210);
}

#randomizeButton {
    width: 50%;
}

.inputGroup {
    width: 100%;
    height: 30px;
    display: inline-flex;
    margin: 10px;
}

.inputGroup input {
    margin-right: 0px;
    margin-left: auto;
}

.inputGroup span {
    align-self: center;
}