body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: #e20a0a;
}
.lightbox {
    /* Assuming the lightbox has a fixed width and is centered */
    width: 500px; /* adjust as needed */
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex; /* This is the key part */
    flex-direction: column; /* This ensures the sections stack vertically */
    align-items: flex-start; /* This aligns the sections to the top */
    gap: 20px; /* Spacing between sections */
}

#column1 {
    grid-column: 1; /* Place in first column */
    grid-row: 1;
}

#column2 {
    grid-column: 2; /* Place in second column */
    grid-row: 1;
}

#column3 {
    grid-column: 3; /* Place in third column */
    grid-row: 1;
}

#mainLogo {
    display: block;
    margin: 0 auto; /* Center the logo */
    width: 300px; /* Adjust based on your logo's dimensions */
    height: auto;
    margin-bottom: 20px; /* Add some space below the logo */
}

#controlDialog h1 {
    text-align: center; /* Center the VizKid title */
    font-size: 2em; /* Increase the font size for emphasis */
    margin-bottom: 20px; /* Add some space below the title */
}

#controlDialog label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#controlDialog input[type="file"],
#controlDialog input[type="text"],
#controlDialog select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* Ensure padding doesn't increase width */
    margin-bottom: 15px; /* Add some space below each input */
    border: 1px solid #ccc;
    border-radius: 4px;

}

#visualizerLogo {
    display: block;
    margin: 0 auto; /* Center the visualizer logo and add space around it */
    width: 200px; /* Adjust based on typical visualizer logo dimensions */
    height: auto;
    margin-bottom: 20px;

}

#controlDialog .section:last-child {
    border-bottom: none; /* Remove the border for the last section */
}

/* In style.css */
#readyText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    text-align: center;
}

/* The Modal (background) */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: block; /* Initially displayed, hidden when GO is clicked */
  }
  
  /* Modal Content */
  #controlDialog {
    position: fixed;
    background-color: white;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
    gap: 20px; /* Space between columns */
    flex-direction: column; /* This ensures the sections stack vertically */
    align-items: flex-start; /* This aligns the sections to the top */
  }
  
  /* Page Background Video Full Screen */
  #bgVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.section {
    border-bottom: 0px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.section h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}