.col-container {
    display: flex;       /* Activates the flex layout */
    flex-direction: column;
    gap: 2px;           /* Adds space between your columns */
}

.row-container {
    display: flex;       /* Activates the flex layout */
    flex-direction: row;
    justify-content: center; 
    gap: 2px;           /* Adds space between your columns */
}

.rowcol {
    flex: 1;             /* Forces all columns to take up equal width */
    padding: 15px;       /* Adds spacing inside each column */
}

/* Container styling */
.slider-container {
    max-width: 300px;
    margin: 50px auto;
    text-align: center;
}

/* The Slider track styling */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    outline: none;
    border-radius: 4px;
}

/* The Slider thumb styling */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00aaaa;
    cursor: pointer;
    border-radius: 50%;
}

/* Text readout styling */
.readout {
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #bb007f;
}

.gradient-text {
  font-size: 44pt; /* Adjust as needed */
  font-weight: bold;
  
  /* Apply the gradient background */
  background-image: linear-gradient(to bottom right, #ff007f, #00eedd);
  
  /* Clip the background to the text characters */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Make the actual text invisible so the gradient shows through */
  -webkit-text-fill-color: transparent;
  color: transparent;
}