website/test.css

div#progressChart {
    min-width: 310px;
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}



/* Zelda Accordion styles */
.content-container {
    /* border-radius: 8px; */
    /* overflow: hidden; */ /* Masks with the glowing if enabled */
    /* box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5); */
  }

details {
    z-index: 1;
    margin: 0;
    padding: 0;
    /* transition: all 1s ease; */
}

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
  }

/* Size glow to File button size (a less hacky way probably exists) */

summary .glow {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--zelda-file-button-width);
  height: calc(47px*var(--scaling-factor));
  border-radius: calc(4px*var(--scaling-factor));
  display: none;
}

summary:hover .glow {
  display: block;
  transition:all 0.2s ease;
  background: rgba(200, 200, 200, 0.5);
  box-shadow: 0 0 20px rgba(200, 200, 200, .7);
}

details:not([open]) hr {
    opacity: 0;
}

summary .zelda-file-box-filename {
    /* border-bottom-width: 0px; */
    border-bottom-style: solid;
}

details[open] .zelda-file-box-filename {
    border-bottom-style: hidden;
}

details[open] summary ~ * {
  animation: fade-in .5s ease-in-out;
}

@keyframes fade-in {
  0%    {opacity: 0 }
  100%  {opacity: 1 }
}