/* Стиль кнопок, которые используются для открытия и закрытия панели аккордеона */
.accordion {
  color: rgb(255, 255, 255);
  font-size: 40px;
	margin: 0 auto;
	margin-top: 20px;
	text-align: center;
	box-shadow: 0px 5px rgba(0,0,0,0.6);
	border-radius: 10px;
	background: #663366;
	width: 50%;
	font-family: Regular, fantasy;
  border: none;
  outline: none;
  transition: 0.4s;
  cursor: pointer;

  display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /* Добавить цвет фона для кнопки, если она нажата,
  (добавить .активный класс с JS), 
  а при наведении на него курсора мыши (наведите курсор) */
  .active, .accordion:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
  }
  
  /* Стиль аккордеон панели. Примечание: скрыто по умолчанию */
  .panel {
  display: flex;
	justify-content: center;
	align-items: center;

	margin: 0 auto;
	margin-top: 10px;
	text-align: center;
	box-shadow: 0px 5px rgba(0,0,0,0.6);
	border-radius: 10px;
	background: #3b3b3b;
	width: 50%;
	font-family: Regular, fantasy;
	padding: 10 0 10 0;
    
    background-color: 3b3b3b;
    /*display: none;*/
    overflow: hidden;
  }
  
  @media (max-width: 500px){
        .accordion{margin-top: 0px; border-radius: 0; width: 100%; margin-top: 5px; font-size: 25px;}
        .panel{width: 100%; border-radius: 0px;}
    }