html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

input {
  display: block;
  margin: 10px;
}

main {
  display: flex;
}

#heading {
  text-align: center; /* Center alignment */
  padding: 10px; /* Padding around the text */
  font-family: Arial, sans-serif; /* Custom typeface */
}
#sidebar {
  padding: 20px; /* Add padding to the entire sidebar */
  
}

#reset-button{
  display: block; /* Ensure the button takes up the full width */
  margin: 0 auto; /* Center-align the button horizontally */
  margin-bottom: 20px;
}

#play-sound{
  display: block; /* Ensure the button takes up the full width */
  margin: 0 auto; /* Center-align the button horizontally */
  margin-bottom: 20px;
}

#text-label {
  font-family: "Josefin Sans", sans-serif; /* Change the font family as needed */
}

#input-label {
  font-family: "Josefin Sans", sans-serif; /* Change the font family as needed */
}

#circle-label {
  font-family: "Josefin Sans", sans-serif; /* Change the font family as needed */
}

#gravity-label {
  font-family: "Josefin Sans", sans-serif; /* Change the font family as needed */
}

.sidebar-section {
  margin-bottom: 0px; /* Add spacing between each section */
}

#text-input-container,
#text-control,
#circles {
    margin-bottom: 20px; /* Add spacing between each individual section */
}

.Heading {
  margin-top: 20px;
  text-align: center;
  padding-bottom: 10px; /* Add some space below the heading */
  font-family:  "Josefin Sans", sans-serif;
  font-weight: 400; /* Custom typeface for heading */
  font-size: 20px; /* Adjust the font size if needed */
  font-weight: bold; /* Make the heading bold */
}

.Description {
  text-align: center;
  font-family:  "Montserrat", sans-serif; /* Custom typeface for description */
  font-size: 13px; /* Adjust the font size if needed */
  margin-bottom: 16px;
  line-height: 1.5;
}

#sidebar {
  width: 220px; /* Adjust width as needed */
  background-color: #c1e3bb; /* Add background color */
}

#text-input {
  height:20px; /* Adjust the height as needed */
  width:160px;
  font-family: Arial, sans-serif; /* Custom typeface for description */

}


#canvas-parent {
  flex: 1; /* Fill remaining space */
}

#save-png {
  margin-top: 20px;
}

/* #sidebar {
  color: red;
}

#sidebar input,
#sidebar button {
  color: red;
} */

/* button {
  background-color: aquamarine;
  border: 3px solid black;
  padding: 10px;
  border-radius: 30px;
} */