.tabgroup {
	width: 40%;
}

.tabgroup .tablist {
	display: flex;
	border-block-end: 1px solid whitesmoke;
	/*underlines each tab name*/

}

.tabgroup .tab {

	padding: 0.5em 1em;
	flex: 1 1 auto;
	position: relative;
}

.tabgroup .tab:hover {
	background-color: #9e3d23;
}

/* creates the line under each time name to let you know which one is selected*/
.tabgroup .tab.active::after{
	content: '';
	background-color: #3d4234;
	width: 100%;
	position: absolute;
	bottom:0;
	left: 0;
	height: 1px;
}

/*lets content take up the entire tab group space when displayed*/
.tabgroup .contentlist {
	width: 100%;
	height: 15em;
	position: relative;
}



.tabgroup .content {

	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;


	opacity: 0;
	pointer-events: none;
}

.tabgroup .content.active {
	opacity: 1;
	pointer-events: initial;
}

.tabgroup .content p {
	width: 100%;
}