body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: right;
        }

        #menu-icon {
            display: none;
            cursor: pointer;
        }

        nav {
            display: flex;
            justify-content: flex-end;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav li {
            margin: 0 15px;
        }

        .content {
            padding-bottom: 50px; /* Adjust the value based on the height of your mobile ad */
        }

        .mobile-ad {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }

        @media only screen and (max-width: 768px) {
            #menu-icon {
                display: block;
            }

            nav {
                display: none;
                flex-direction: column;
                text-align: left;
                position: fixed;
                padding-left: 10px;
                padding-right: 10px;
                top: 40px;
                right: 0;
                background-color: #333;
                z-index: 1000; /* Adjust the z-index value as needed */
            }

            nav.show {
                display: flex;
            }

            nav ul {
                flex-direction: column;
            }

            nav li {
                margin: 10px 0;
            }
        }






 #audio-container {
      border: 3px solid rgb(65, 65, 66);
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      max-width: 800px;
      background-color: rgba(168, 168, 168, 0.664);
      border-radius: 10px; /* Adjust the value as needed for the desired roundness */

    }

    .volume-audio {
      width: 30%;
    }
    
    .audio-wrapper {
      width: 25%;
    }

    .description-wrapper4,
    .description-wrapper3,
    .description-wrapper2,
    .description-wrapper1 {
    border: 1px solid rgb(103, 103, 104);
  width: 75%;
  padding-left: 20px;
  box-sizing: border-box;
  transition: background-color 0.5s; /* Add a smooth transition effect */
  border-radius: 10px; /* Adjust the value as needed for the desired roundness */
  background-color: rgba(129, 129, 129, 0.664);
}
   
    
    
    .controls-container {
      display: flex;
      align-items: center;
    }
    
    .play-stop {
      margin-right: 10px;
    }
    
    .status-container {
      display: flex;
      align-items: center;
    }
    
    .status {
      font-weight: bold;
      color: red; /* Default color */
    }
    
    /* Updated style for ON state */
    .status.ON {
      color: green;
    }



  body {
  background: rgb(250, 248, 248);
  }
    .volume-container {
      display: flex;
      align-items: center;
      padding-top: 10px;
    }
    
    h1 {
      display: block;
      font-size: 2em;
      margin-block-start: 0.0em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
    }
    
    .content {
    max-width: 800px;
    margin: auto;
    }

  .refresh-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px; /* Adjust the height as needed */
    background: #4fc1e9;
    border: none;
    border-radius: 30px; /* Set to half of the height for rounded ends */
    cursor: pointer;
    text-align: center;
    transition: background 0.3s ease-in-out;
  }

  .refresh-button:active {
    background: linear-gradient(to bottom, #e66e39, #d9630f); /* Darker orange gradient on press */
  }

  .refreshButton {
    width: 33%;
    margin: auto;
    }


.refresh-label {
    color: white;
    font-size: 15px;
  }