body{
 	background: pink;
}
*{
	margin: 0;
	padding: 0;
}

body{
	font-family: sans-serif;

	/*	define a CSS variable */
	--accent-color: rgb(0,0,255);
} 

.container{
 	width: 500px;
	margin: auto;
}

.item{
	border-top: 2px solid var(--accent-color);
	padding: 2rem 0;
}

h1{
	text-align: center;
	margin: 1rem auto;
}

h3{
	margin: .5rem 0 .5rem 30px;
}

a{
	color: green;
}
a:hover{
	color: red;
}

.item { 
	cursor: pointer;
}

.heading h2::before{
	content: '+';
	display: inline-block;
	width: 30px;
}

.details{
	line-height: 1.3;
	color: var(--accent-color);
	display: none;
/*	height: 0;
	overflow: hidden;
	transition: height 400ms ease-in-out;*/
}

.active .heading h2::before{
	content: '-';
}
.active .details{
	display: block;
/*	height: 300px;*/
}



button{
	font-size: 1rem;
	font-weight: bold;
	border: 2px solid var(--accent-color);
	background: transparent;
	padding: 0.5rem;
	margin-bottom: 1rem;
	border-radius: 5px;
}

button:hover{
	background: rgb(200 200 200);
	cursor: pointer;
}


/*	DARK MODE STYLES GO HERE */

body.darkmode {
	background: purple;
	color: white;

	/*	redefine a CSS variable */
	--accent-color: rgb(0,255,0);
}

body.darkmode button{
	color: white;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}


.row: after {
  content: "";
  clear: both;
  display: table;
}
.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}