:root {
    --header-height: 3.5rem;

    /* Colors */
    --title-color: hsl(0,0%,95%);
    --text-color: hsl(0,0%,70%);
    --text-color-light: hsl(0,0%,60%);
    --body-color: hsl(0,0%,0%);
    --body-color2: hsla(210, 100%, 30%, 0.5);
    --container-color: hsl(0,0%,8%);
    --container-color2: hsl(0, 0%, 20%);

    /* Font */
    --body-font: "Poppins", sans-serif;
    --second-font: "Montserrat", sans-serif;
    --bigest-font-size: 2.75rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .9rem;
    --small-font-size: .8rem;
    --smaller-font-size: .75rem;

    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;

    /* z-index */
    --z-tooltip: 10;
    --z-fixed: 100;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  /* background-color: var(--text-color-light); */
  background-color: var(--body-color2);
  color: var(--title-color);
  cursor: pointer;
  margin: 5px 0;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 5px;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  /* background-color: lightblue; */
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 1rem 2rem;
  /* background-color: white; */
  display: none;
  overflow: hidden;
}

.acc-title {
  color: white;
}