body,
html {
 background-color: black;
 color: white;
 margin: 0;
 padding: 0;
 height: 100vh;
font-family: 'Patrick Hand', cursive;
}

.main-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 140px;
}

.section-container {
 width: 400px;
 background-color: #333 !important;
 border: 1px solid #555;
 border-radius: 5px;
 margin: 20px;
 padding: 20px;
 overflow-y: auto;
 height: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
}

select,
input,
button {
 box-sizing: border-box;
 font-size: 16px;
 width: calc(100% - 20px);
 margin: 10px 0;
 height: 40px;
 background-color: black;
 color: white;
 text-align: center;
 border: 1px solid #555;
}

input[type="text"],
input[type="password"],
input[type="file"] {
 text-align: left;
 padding-left: 20px;
 padding-right: 20px;
}

button {
 background-color: #007bff;
 color: white;
 border: none;
 cursor: pointer;
 font-size: 20px;
 fott-weight: bold;
 border: 1px solid #555;
 border-radius: 5px;
}

button:hover {
 cursor: pointer;
 background-color: purple;
}

.close-icon {
 position: absolute;
 right: 5%;
 top: 5%;
 font-size: 24px;
 cursor: pointer;
 color: white;
}

.close-icon:hover {
 color: blue;
}

/* Switch Positioning */
.switch {
 position: absolute;
 left: 5%;
 top: 5%;
 width: 60px;
 height: 34px;
}

/* Switch Styling */
.switch input {
 display: none; /* Hide default checkbox */
}

.slider {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 transition: 0.4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 transition: 0.4s;
}

input:checked + .slider {
 background-color: #2196f3;
}

input:checked + .slider:before {
 transform: translateX(26px);
}

.slider.round {
 border-radius: 34px;
}

.slider.round:before {
 border-radius: 50%;
}

#userDetailsContainer {
 width: 95%;
 background-color: #333 !important;
 border: 1px solid #555;
 border-radius: 5px;
 margin: 20px;
 padding: 20px;
 overflow-y: auto;
 height: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
}

#userDetailsContainer strong {
 color: lime;
 text-align: left;
}
#span {
 color: white;
}

#apiKeyInput {
 text-align: center;
}

#selectedVoiceName {
 color: lime;
 font-size: 24px;
}

#voiceIdTitle {
 color: lime;
 font-size: 20px;
}

#voiceId {
 color: white;
 font-size: 20px;
}