body {
    background-color: #222;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
}

#wrapper {
    width: 100%; /* CHANGED: Was 420px, now full width */
    margin: 50px 0;   /* CHANGED: Removed side margins */
}

#theMarquee {
    height: 55px;
    background: linear-gradient(0deg, #111, #222);
    box-shadow: 0px 0px 2px 0px #aaa inset,
    0px -1px 2px 0px #aaa inset,
    2px -5px 5px 0px #111 inset,
    0px -5px 5px 0px #111 inset,
    2px 5px 5px 0px #111;
    border-radius: 5px;
    /* Added to handle dynamic lights */
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    box-sizing: border-box;
}

#theInput {
    display: none; /* Make it a block element for easier centering */
    margin: 25px auto; /* Auto side margins will center it */
    width: 300px;
    text-align: center;
}

.light {
    width: 5px;
    height: 5px;
    margin: 1px;
    text-align: center;
    font-size: 15px;
    /* float: left; -- Replaced by flexbox in #theMarquee */
    border-radius: 60%;
    flex-shrink: 0;
}

.off {
    background-color: #121212;
}

.on {
    background-color: #0ff;
    box-shadow: 0px 0px 5px #0ff;
}