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

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


section{
	width: 100%;
	height: 100vh;
	background-color: #121212;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container{
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.accordion-item{
	background-color: #283042;
	border-radius: .4rem;
	margin-bottom: 1rem;
	padding: 1rem;
	box-shadow: .5rem 2px .5rem rgba(0, 0, 0, .1);
}

.accordion-link{
	font-size: 1.6rem;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	background-color: #283042;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
}

.accordion-link i{
	color: #e7cd5ff;
	padding: .5rem;
}

.accordion-link .ion-md-remove{
	display: none;
}

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

.answer::before{
	content: "";
	position: absolute;
	width: .6rem;
	height: 90%;
	background-color: #8fc460;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.answer p{
	color: rgba(255, 255, 255, .6);
	font-size: 1.4rem;
	padding: 2rem;
}

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

.accordion-item:target .accordion-link .ion-md-add{
	display: none;
}

accordion-item:target .accordion-link .ion-md-remove{
	display: block;