* { outline: none; } /* visual only, doesn't block tab */
html, body, :root {
    overflow: hidden;
    height: 100vh;
    position: relative;
    margin: 0;
}
h1 {
    margin: 20px 0 0 20px;
    animation: shake 0.2s ease-in-out infinite alternate;
}
@keyframes shake {
    from { transform: translateX(-10px); }
    to   { transform: translateX(10px); }
}

#backgroundColors {
    position: absolute;
    width: 300vw;
    height: 300vh;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    background: 
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            #ff0000 0deg 13deg,
            #ff7700 13deg 26deg,
            #ffff00 26deg 39deg,
            #00cc00 39deg 52deg,
            #0000ff 52deg 65deg,
            #8b00ff 65deg 78deg
        );
    animation: rainbow-spin-see 1.5s linear infinite,
             rainbow-spin-hue 1.5s linear infinite;
    margin: 0;
    overflow: hidden;
}
@keyframes rainbow-spin-see {
    from {  transform: translate(-50%, -50%) rotate(0deg); }
    to {  transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rainbow-spin-hue {
    from { filter: hue-rotate(0deg); }
    to {  filter: hue-rotate(360deg); }
}


#vertical-bar {
    position: absolute;
    animation: slide-across 2s ease-in-out infinite;
    height: 100vh;
    width: 20px;
    background-color: black;
    top: 0;
    z-index: 10;
}
@keyframes slide-across {
  0%   { transform: translateX(-40px); }  /* hidden just off left edge */
  50%  { transform: translateX(100vw); }
  100% { transform: translateX(-40px); }
}

#horizontal-bar {
    position: absolute;
    animation: slide-vertically 3s ease-in-out infinite;
    height: 20px;
    width: 100vw;
    background-color: white;
    left: 0;
    z-index: 10;
}
@keyframes slide-vertically {
  0%   { transform: translateY(-40px); }  /* hidden just off left edge */
  50%  { transform: translateY(100vh); }
  100% { transform: translateY(-40px); }
}

.box-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.box {
    border: solid 1px black;
}


#nameInput {
    background: repeating-linear-gradient(
        180deg,
        #ff0000   0px,
        #ff7700  20px,
        #ffff00  40px,
        #00cc00  60px,
        #0000ff  80px,
        #8b00ff 100px,
        #ff0000 120px
    );
    background-size: 100% 240px;
    width: 300px;
    height: 100px;
    animation: rainbow-scroll2 0.8s linear infinite,
            wobble 1.3s ease-in-out infinite alternate
}
@keyframes rainbow-scroll2 {
    from { background-position: 0 0; }
    to   { background-position: 0 240px; }
}
@keyframes wobble {
    0%   { transform: translateX(0px)   translateY(0px); }
    25%  { transform: translateX(-30px) translateY(20px); }
    50%  { transform: translateX(15px)  translateY(-15px); }
    75%  { transform: translateX(-20px) translateY(10px); }
    100% { transform: translateX(20px)  translateY(-25px); }
}

#ageInput {
    background: repeating-linear-gradient(
        45deg,
        #ff0000   0px,
        #ff7700  20px,
        #ffff00  40px,
        #00cc00  60px,
        #0000ff  80px,
        #8b00ff 100px,
        #ff0000 120px
    );
    background-size: 240px 240px;
    width: 300px;
    height: 400px;
    animation: rainbow-scroll3 0.6s linear infinite,
            wobble2 1.3s ease-in-out infinite alternate
}
@keyframes rainbow-scroll3 {
    from { background-position: 0 0; }
    to   { background-position: 240px 240px; }
}
@keyframes wobble2 {
    0%   { transform: translateX(0px)   translateY(0px); }
    20%  { transform: translateX(40px)  translateY(-10px); }
    40%  { transform: translateX(-15px) translateY(35px); }
    60%  { transform: translateX(25px)  translateY(-30px); }
    80%  { transform: translateX(-35px) translateY(15px); }
    100% { transform: translateX(10px)  translateY(-20px); }
}


#VolumeSetter {
    background: repeating-linear-gradient(
        225deg,
        #ff0000   0px,
        #ff7700  20px,
        #ffff00  40px,
        #00cc00  60px,
        #0000ff  80px,
        #8b00ff 100px,
        #ff0000 120px
    );
    width: 300px;
    height: 200px;
    animation: rainbow-scroll3 0.6s linear infinite;
}
#VolumeSetter input {
    width: 100%;
}

#challange1 {
    background: repeating-linear-gradient(
        225deg,
        #005c97 0px,
        #363795 40px,
        #1a1a2e 80px,
        #005c97 120px
    );
    background-size: 120px 120px;
    animation: rainbow-scroll4 0.8s linear infinite;
    width: max-content;
    height: 450px;
}
@keyframes rainbow-scroll4 {
    from { background-position: 0 0; }
    to   { background-position: 120px 120px; }
}

#finished {
    animation: win-spin 4s linear infinite;
}
@keyframes win-spin {
    from {  transform: rotate(0deg); }
    to {  transform: rotate(360deg); }
}