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

html{
	font-family: 'Roboto' , sans-serif;
	font-size: 10px;
	box-sizing: border-box;
}
h1 {
	background-color: #3c4053;
	color: rgba(255,255,255,.8);
	text-align: center;
	font-size: 7vw;
	padding: 2rem;
	transition-duration: .5s;
}
/* Section used for centering */
section {
	width: 100%;
	height: 100vh;
	background-color: #3c4053;
	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: flex;
	align-content: center;
	justify-content: space-between;
	padding: 1rem 0;
}

.accordion-link ion-icon {
	color: #e7d5ff;
	padding: .5rem;

}

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

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

.answer::before{
	content: "";
	position: absolute;
	width: .6rem;
	height: 100%;
	background-color: #8fc460;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.answer p {
	color: rgba(255,255,255,.8);
	font-size: 1.4rem;
	padding: 2rem;
}

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

}

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

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