/* Reset default margin and padding */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif; /* Use a clean font */
  background-color: #fff; /* Ensure background is white */
 overflow: auto; /* Enable scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* Apply box-sizing to avoid padding/border issues */
    * {
      box-sizing: border-box;
    }

    /* Main container to control width */
    .container {
      width: 100%;
      max-width: 520px;  /* Ensure the max-width is the same for both the banner and       collapsible content */
      margin: 0 auto;
      padding: 10px;
    }

    /* Banner styling */
    .banner {
      width: 100%;
      background-color: white;
      padding: 10px 15px;
      color: black;
      text-align: center;
      border-radius: 3px;
      font-family: roboto, sans-serif;
      font-size: 22px;
      margin-top: 5px;
      border: 1px solid #e0e0e0;
    }

    /* Collapsible list styling */
    .collapsible-list {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .collapsible-item {
      margin: 10px 0;
      padding: 1px;
      background-color: none;
      border: none;
      border-radius: 5px;
      border: 1px solid lightgrey;
    }

    .collapsible-header {
      font-family: Roboto;
      font-size: 16px;
      cursor: pointer;
      padding: 2px 10px;
      background-color: #F0F0F0;
      color: black;
      border-radius: 5px;
      margin: 0;
      display: flex;
      align-items: center;
      text-align: left;
      letter-spacing: 1px;
      justify-content: space-between;
      transition: background-color 0.3s ease;
    }

    .collapsible-header .check-ikon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      cursor: pointer;
	  
    }

    .collapsible-header .check-ikon i {
      font-size: 20px;
      color: lightgray;
      transition: color 0.1s ease;
	 
    }

    .collapsible-header .check-ikon.checked i {
      color: blue;
	 
    }

    .collapsible-header::after {
      content: "▼";
      font-size: 10px;
      margin-left: 10px;
      transition: transform 0.3s ease-in-out;
      color: grey;
    }

    .collapsible-header.expanded::after {
      transform: rotate(180deg);
    }

.collapsible-content {
      padding: 10px;
      background-color: white;
      display: none;
      border-top: 1px solid #ddd;
      margin-top: 5px;
      max-width: 620px;
      width: 100%;
      margin: 0 auto;
      padding: 16px;
      
     }


/* Style the single row */
.row {
  display: flex;
  justify-content: space-between; /* Space out levels evenly */
  gap: 10px; /* Space between levels */
}

/* Style each level */
.level {
  flex: 1; /* Ensure levels take equal space */
  text-align: center; /* Center text horizontally */
  padding: 15px; /* Add padding for better spacing */
  border: 1px solid #ccc; /* Add a border for visibility */
  border-radius: 8px; /* Rounded corners */
  background-color: white; /* White background for levels */
}
 
/* Style the level title (e.g., LEVEL 1) */
.level-title {
  font-weight: bold; /* Make the title bold */
  font-size: 16px; /* Adjust font size as needed */
  margin-bottom: 8px; /* Space between title and description */
}
 
/* Style the level description (e.g., Beginners) */
.level-description {
  font-size: 16px; /* Adjust font size as needed */
  color: #555; /* Optional: Use a slightly muted color */
}


    .button {
      padding: 5px 15px;
      margin: 5px;
      background-color: white;
      color: black;
      border: 1px solid blue;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      text-align: center;
      width: 120px;
    }

    .button:hover {
      background-color: none;
    }

  

    .button-text {
      margin-right: 10px;
      font-size: 14px;
      color: black;
    }

    @media (max-width: 600px) {
      .button {
        font-size: 13px;
        padding: 5px 12px;
        min-width: 100px;
      }
      .audio-controls {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
      }
      .button-text {
        font-size: 13px;
        color: blue;
      }
    }

    @media (min-width: 601px) {
      .audio-controls {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
      .banner {
        font-size: 22px;
      }
    }

    .banner {
      font-size: 22px;
      padding: 10px 15px;
    }

    /* Image size adjusted */
    .button img {
      max-width: 20px;
      max-height: 20px;
    }
	
	a {
	color: blue;
	font-family: Roboto;
	font-size: 1rem;
	word-spacing: 1px;
	}

  


.button_layout {
  display: flex;
  justify-content: center; /* Center the buttons horizontally */
  gap: 20px; /* Optional: space between the buttons */
}

.buttonPiano {
  padding: 10px 20px; /* Adjust the padding for button size */
  background-color: #007bff; /* Button color (adjust as needed) */
  color: white; /* Text color */
  border: none;
  border-radius: 5px; /* Optional: rounded corners */
  width: 150px; /* Set a fixed width for the buttons */
  text-align: center; /* Ensure text is centered inside the button */
}

.buttonPiano a {
  color: white; /* Ensure the text inside the link is white */
  text-decoration: none; /* Remove underline from link */
}