:root{
  --bg:#0a0a0b;
  --panel:#0f0f12;
  --card:#121216;
  --muted:#a1a1aa;
  --text:#ffffff;
  --radius:18px;




    --primary-background: #0A0A0C;
    --secondary-background: #16161B;
    --accent-1: #C8325A;
    --accent-2: #7D4AFF;
    --text-primary: #F5F5F5;
    --text-secondary: #B8B8B8;
    --border:rgba(255,255,255,.14);

}



.collapsibles-menu {

display: flex;
justify-content: center;

}
.collapsibles-menu h2 {
	font-size: 18px;
	line-height: 34px;
	font-weight: 500;
	letter-spacing: 1px;
	display: block;
	margin: 0;
    cursor: pointer;
    color: var(--text-primary);
}
.collapsibles-menu p {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 26px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	max-height: 800px;
	opacity: 1;
	transform: translate(0, 0);
	margin-top: 14px;
	z-index: 2;
}
.collapsibles-menu ul {
border: 1px solid var(--border);
	width: 60%;
	list-style: none;
	perspective: 900;
	padding: 0 20px 10px;
    margin: 0;
    background-color: var(--panel);
	border-radius: 5px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
}
.collapsibles-menu ul li {
	position: relative;
	padding: 0;
	margin: 0;
	padding-bottom: 4px;
	padding-top: 18px;
    border-top: 1px dotted var(--primary-background);
}

.collapsibles-menu ul li p {
	padding-left: 20px;
}

.collapsibles-menu ul li:nth-child(1){ border:none; }
.collapsibles-menu ul li:nth-of-type(1) { animation-delay: 0.5s; }
.collapsibles-menu ul li:nth-of-type(2) { animation-delay: 0.75s; }
.collapsibles-menu ul li:nth-of-type(3) { animation-delay: 1.0s; }
.collapsibles-menu ul li:nth-of-type(4) { animation-delay: 1.25s; }
.collapsibles-menu ul li:nth-of-type(5) { animation-delay: 1.50s; }
.collapsibles-menu ul li:last-of-type { padding-bottom: 0; }

.collapsibles-menu ul li .arrow {
	position: absolute;
	transform: translate(-6px, 0);
	margin-top: 16px;
	right: 0;
}
.collapsibles-menu ul li .fas{
	color:#f6483b;
	font-size: 15px;
	margin-right: 10px;
}
.collapsibles-menu ul li .arrow:before, ul li .arrow:after {
	content: "";
	position: absolute;
	background-color: var(--accent-2);
	width: 3px;
	height: 9px;
}
.collapsibles-menu ul li .arrow:before {
	transform: translate(-2px, 0) rotate(45deg);
}
.collapsibles-menu ul li .arrow:after {
	transform: translate(2px, 0) rotate(-45deg);
}
.collapsibles-menu ul li input[type=checkbox] {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
    z-index: 1;    
    opacity: 0;
	transform: scale(1.1, 1.1);
	transition: all .4s;
}
.collapsibles-menu ul li input[type=checkbox]:checked ~ p {
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translate(0, 50%);
}
.collapsibles-menu ul li input[type=checkbox]:checked ~ .arrow:before {
	transform: translate(2px, 0) rotate(45deg);
}
.collapsibles-menu ul li input[type=checkbox]:checked ~ .arrow:after {
	transform: translate(-2px, 0) rotate(-45deg);
}
.collapsibles-menu .transition, p, ul li .arrow:before, ul li .arrow:after {
	transition: all 0.25s ease-in-out;
}

.collapsibles-menu .flipIn, h1, ul li {
	animation: flipdown 0.5s ease both;
}
.collapsibles-menu .no-select, h2 {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
}