button.accordion {
    background-color: var(--buttons_color);
    color: var(--button_text_color);
    font-family: 'Ariel', sans-serif;
	position: relative;
	left: 25px;
    cursor: pointer;
    padding: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 12px 0 rgba(0, 0, 0, 0.2);
    width: 95%;
    border: none;
    outline: none;
    direction: ltr;
    text-align: left;
    font-size: 180%;
    transition: background-color var(--fade_time);
}

button.accordion:hover {
    background-color: var(--buttons_color_hover);
	color: var(--button_text_color_hover);
}

body{
counter-reset: line_number;
}

button.accordion:before{
	counter-increment: line_number;
    content: counter(line_number) ". ";
}

button.accordion:after {
    content: '\002B';
    color: var(--button_text_color);
    font-weight: bold;
    float: right;
    margin-right: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
	position: relative;
	left: 25px;
	width: 95%;
	color: var(--main_text_color);
    max-height: 0;
    font-family: 'Ariel', sans-serif;
    font-size: 180%;
    direction: ltr;
    text-align: left;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}