main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family:'Lexend Deca', sans-serif;
	font-weight: 300;
}

main h2 {
	font-size: 4rem;
	margin: 10px;
	font-family: "Lexend Deca", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 450;
  	font-style: normal;
}

main h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600;
}

section {
	display: flex;
	align-items: center;
	flex-direction: column;
}

div.section-bar {
	width: 100%;
	padding: 5px 10px;
	cursor: pointer
}

#timeline{
	background-color: #2b3a70;
}

div.section-bar *{
	pointer-events: none;
	user-select: none;
}

div.section-bar .btn-colapsar,
div.section-bar .btn-colapsar *,
div.section-bar .carousel,
div.section-bar .carousel * {
    pointer-events: all;
}

/*.collapse div:not(.collapsible-bar) {
	display: none;
}*/

.collapse .carousel {
	display: none;
}

div.carousel {
	width: 100%;
	display: flex;
	align-items: center;
}

div.carousel .carousel-btn {
	margin: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
	text-align: center;
	flex: 0 0 auto;
	font-size: 1.6rem;
	user-select: none;
}

ul.itens {
	display: flex;
	list-style: none;
	width: 100%;
	padding: 20px;
	gap: 20px;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

ul.itens li {
	display: flex;
	flex-direction: column; 
	align-items: center; 
	text-align: center; 
	gap: 10px; 
	
	scroll-snap-align: center;
	font-size: 2 rem;
	list-style-type: none;
	padding: 20px;
	box-sizing: content-box;
	flex: 0 0 auto;
}

/*ul.itens li:nth-child(even) {
	background-color: teal;
}*/


ul.itens img {
	width: 150px;
	height: 150px;
	border-radius: 100%;
	object-fit: cover;
	object-position: center;
}

#section-title{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 20px;
}

#section-title img{
	display: block;
}

#borda-top {
	width: 180px;
	height: 30px;
	transform: scaleY(-1);
	z-index: -1;
}

#borda-top-coord {
	width:200px;
	height: 30px;
	transform: scaleY(-1);
	z-index: -1;
}

#borda-top-equipe {
	width:140px;
	height: 30px;
	transform: scaleY(-1);
	z-index: -1;
}

#section-title h3{
	font-size: 2rem;
	top: 50px;
	left: 10px;
	z-index: 1;
	position: relative;
}

#borda-bottom {
	width: 150px;
	height: 30px;
	transform: rotate(180deg);
	transform: scaleX(-1);
	z-index: 0;
	align-items: center;
}

main h3{
	margin: 10px;
}

.current{
	position: relative;
	justify-content: center;
	align-items: center;
	display: flex;
	margin-bottom: 20px;
}

.membro-atual{
	width: 160px;
	height: 160px;
	border-radius: 100%;
	object-fit: cover;
	z-index: 0;
	position: absolute;
}

.membro-borda{
	width: 220px;
	height: 220px;
	z-index: -1;
	align-items: center;
}

#eletborder1 {
	transform: rotate(-180deg);
}

#eletborder2 {
	transform: rotate(0deg);
}

#mecbordaborder{
	transform: rotate(20deg);
	transform: scale(1.3);
}

#mecmeioborder{
	transform: rotate(-20deg);
	transform: scale(1.3);
}

.side-by-side {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
    text-align: center;
}

.atual{
	display: flex;
	flex-direction: row;
	padding: 40px;
}

.atual h3 {
	transform: translate(-200%, 150%);
	background-color: #2b3a70;
	padding: 10px;
	border-radius: 10px;
	height: fit-content;
}

#eletrônica{
	background-color: #3283ef;
	margin-top: 20px;
	margin-bottom: 20px;
}

#computacao{
	background-color: #9340ff;
	margin-top: 20px;
	margin-bottom: 20px;
}

#mecanica{
	background-color: #fd178c;
	margin-top: 20px;
	margin-bottom: 20px;
}

#comunicacao{
	background-color: #e47eb2;
	margin-top: 20px;
	margin-bottom: 20px;
}

#equipe_atual h3{
	background-color: #2b3a70;
	padding: 10px;
	border-radius: 10px;
	width: fit-content;
}

#caps{
	display: flex;
	flex-direction: column;
	padding: 40px;
}

#caps h3 {
	background-color: #10172846;
	padding: 10px;
	border-radius: 10px;
}

#caps-side-by-side{
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.btn-colapsar {
    display: flex;
	flex-direction: row;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
	pointer-events: all;
}

/* seta para baixo (estado aberto) */
.btn-colapsar svg {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* seta para cima (estado fechado) */
.collapse .btn-colapsar svg {
    transform: rotate(-90deg);
}

#collapse-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 5px 10px;
	cursor: pointer
}