/* Style the buttons that are used to open and close the accordion panel */
.accordion 					{	background-color: 	white;
  								color: 				var(--ohng-dark-gray);
  								cursor: 			pointer;
  								padding: 			18px;
  								width: 				100%;
  								text-align: 		left;
  								border: 			none;
  								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: 	VAR(--ohng-light-gray);
  							}

/* Style the accordion panel. Note: hidden by default */
.panel 						{	padding: 			0 18px;
  								background-color: 	white;
  								display: 			none;
  								overflow: 			hidden;
  							}

/*  ACCORDION-TUNA
https://codepen.io/Tuna_/pen/KKzXEVO

*/
*,
*::before,
*::after{
  margin:0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-family: 'Arial', sans-serif;
  font-size: 10px;
  box-sizing: border-box;
}

.black-accordion-item{
  background-color: #000000;
  border-radius: .4rem;
}

.black-accordion-item hr{
  border: 1px solid var(--ohng-gold);
}

.black-accordion-link{
  font-size: 1.6rem;
  color: white;
  text-decoration: none;
  background-color: black;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.black-accordion-link h3{
  font-weight:500;
  font-size: 20px;
}

.black-accordion-link i{
  color: white;
  padding: .5rem;
  
}

.black-accordion-link ul{
  display:flex;
  align-items: flex-end;
  list-style-type: none;
  margin-left: 25px;
}

.black-accordion-link li{
  font-size: 10px;
  color: var(--ohng-light-gray);
  padding: 0 0 1px 5px;
}

.black-accordion-link div{
  display: flex;
}

.black-accordion-link .ion-md-arrow-down{
  display: none;
}

.black-answer{
  max-height: 0;
  overflow: hidden;
  position: relative;
  background-color: black;
  transition: max-height 650ms;
}



.black-answer p{
  color: white;
  font-size: 15px;
  padding: 2rem;
  
}

.black-accordion-item:target .answer{
  max-height: 20rem;
}

.black-accordion-item:target .black-accordion-link .ion-md-arrow-forward{
  display: none
}

.black-accordion-item:target .black-accordion-link .ion-md-arrow-down{
  display: block;
}