#demo{
  font-size: 1.5rem;
}
.header {
  background-color: #ffe600;

  text-align: center;
}

#navbar {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: #33333300;
}

#navbar a {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ffffff;
  color: black;
}

#navbar a.active {
  
    border-bottom-right-radius: 16px;
  background-color: #0000003d;
  color: rgb(154 118 23);
}

.content {
  padding: 16px;
}
    


.expletus-sans-normal {
  font-family: "Roboto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.es-header-btn{
  font-family: "Roboto Sans", sans-serif;
}

p, h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Sans", sans-serif; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif Sans, sans-serif;
      color: rgb(255, 255, 255);
    }

    .header {
        text-align: center;
      display: block;
      justify-content: space-between;
      align-items: center;
      padding: 15px 30px;
      background:rgb(240 212 0);
    }

    .header img {
      height: 50px;
    }

    .content-section {
      border-radius: 25px;
  position: relative;
  background: url('ossie.webp') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  overflow: auto;
}

/* Overlay image layer */
.content-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('color.jpg') repeat; 
  background-size: cover; 
  opacity: 0.7; 
  z-index: 1;
}


.content-section > * {
  position: relative;
  z-index: 2;
}
    .sticky-logo {
      position: sticky;
      top: 0;
      display: flex;
      justify-content: center;
      background: rgba(0, 0, 0, 0);
      padding: 10px;
      z-index: 10;
    }

    .sticky-logo img {
      height: 80px;
    }

    .accordion {
      
    width: 100%;
    max-width: 80%;
    margin: 16px auto;
    }

    .accordion button {
        border-radius: 11px;
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 15px;
      border: none;
      outline: none;
      text-align: left;
      cursor: pointer;
      font-size: 26px;
      transition: background 0.3s;
    }

    /* For devices with a minimum width of 768px (Medium) */
@media screen and (min-width: 100px) {
  .accordion button {
     border-radius: 11px;
      width: 100%;
      text-align: center;
       font-size: 13px;
    }

  .accordion h1{

    font-size: 1.6rem;
  }

  .accordion button{
    font-weight: 600;
  }

  .header {
   
        text-align: center;
        display: block;
        justify-content: space-between;
        align-items: center;
        padding: 1px 0px;
        background: rgb(0 0 0);
}
.header h2{
        
  font-size: 1.2rem;
}
}

    .accordion button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.5);
      padding: 0 15px;
      transition: max-height 0.3s ease-out;
    }

    .accordion-content p {
      margin: 15px 0;
    }

    .spotify {
      display: flex;
      justify-content: center;
      margin: 30px auto;
    }