style.css

/*UI for TritonClock*/
.container {
    width: 500px;
    margin: 20px auto;
    text-align: center;
}

#timer {
    font-size: 2em;
}

.neon-button {
    border: none;
    background-color: #747678;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 
          0 0 10px #00C6D7, 
          0 0 20px #00C6D7, 
          inset 0 0 10px #00C6D7;  
}

.neon-box {
    background-color: #222; /* rgba(#222, 0.7); Dark background enhances the glow */
    color: #fff;          /* White text for contrast */
    border: none;          /* Remove default border */
    padding: 10px; 
    border-radius: 5px;   /* Slightly rounded corners */
    box-shadow:  
        0 0 5px #00C6D7,  /* Blue neon glow */
        0 0 15px #00C6D7, 
        0 0 30px #00C6D7; 
}

/* Add a subtle hover effect */
.neon-textarea:hover {
   box-shadow: 
        0 0 8px #00C6D7,   
        0 0 20px #00C6D7, 
        0 0 40px #00C6D7; 
}

  
.ucsd-blue-background {
    background-color: #182B49; /* ucsd navy blue color */
}

.image-background {
    background-image: url('forest.jpg'); 
    background-size: cover; /* Make the image cover the whole area */
}