body, .collapsible {
  background-color: white;
  color: #c2327f;
  font-family: "pixel", sans-serif;
}

b, h1 {
  font-weight: bold;
}

@font-face {
    font-family: "pixel"; 
    src: url("font/dogicapixel.ttf") format("truetype");
}

@font-face {
    font-family: "pixel"; 
    src: url("font/dogicapixelbold.ttf") format("truetype");
    font-weight: bold;
}



.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-image: url('images/BSD kinnie quiz _3.jpeg');
  background-size: contain;
  background-repeat: repeat;
  background-position: center;
  z-index: -1;
  background-attachment: fixed;
}

.homebox {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-image: url('images/download (5).jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  
}

.white-container {
  background-color: transparent;

  width: 470px;
  height: 210px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  text-align: left;

  position: fixed;
  top: 55%; 
  left: 50%;
  transform: translate(-55%, -60%);
}




ul {
  list-style: none;
}

li {
  margin-bottom: 10px;
  color: #6e1243;
}

li a {
  color: #6e1243;
  text-decoration: none;
}


.box {
  background-color: #ffadd6;
border-width: 3px;
border-style: solid;
border-color: #ff8fb8;
  width: 500px;
  height: 500px;
  border-radius: 5px;
  display: block;
   margin: auto;
}


::-webkit-scrollbar {
  width: 10px;
}


::-webkit-scrollbar-track {
  background: #ffa6d7;

}
 

::-webkit-scrollbar-thumb {
  background: #ff61b8;
   border-radius: 20px; 
}


::-webkit-scrollbar-thumb:hover {
  background: #de479a;
   border-radius: 20px; 
}


.collapsible {
  background-color: #ffadd6;
  cursor: pointer;
  
  border: 3px solid #ff8fb8;
  border-bottom: none;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  user-select: none;

  width: 500px;  /* keep width to keep alignment */
  height: auto;  /* remove fixed height */
}

.collapsible:hover {
  background-color: #ffc3e2;
}

.content {
  background-color: #fff0fa;
  border: 3px solid #ff8fb8;
  border-top: none;
  border-radius: 0 0 5px 5px;

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  box-sizing: border-box;

  width: 500px;  /* match button width */
}