@charset "UTF-8";

.accordion {
  background-color: var(--bgblue);
  color: var(--fg);
  cursor: pointer;
  padding: 10px;
  width: 95%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Add a background color to the button if it is clicked on */
.active, .accordion:hover {
  background-color: var(--blue);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: var(--blueltlt);
  overflow: hidden;
	max-height: 0;
  width: 95%;
	transition: max-height 0.2s ease-out;
}

.accordion:after {
	content: '\0001F'; /*unicode*/
	font-size: 25px;
	color: var(--goldlt);
	float: right;
	margin-right: .5em;
}
.active:after {
	content: '\0001D';
}

/* WRITING */
#writing > .accordion:after {
	content: '\0270F'; /*unicode*/
	font-size: 25px;
	color: var(--goldlt);
	float: right;
	margin-right: .5em;
}
#writing > .active:after {
	content: '\0270D';
}

/* DESIGN */
#design > .accordion:after {
	content: '⏣'; 
	font-size: 25px;
	color: var(--goldlt);
	float: right;
	margin-right: .5em;
}
#design > .active:after {
	content: '📐';
}

/* MEDIA */
#media > .accordion:after {
	content: '🎬'; 
	font-size: 25px;
	color: var(--goldlt);
	float: right;
	margin-right: .5em;
}
#media > .active:after {
	content: '🎹';
}

/* MEDIA COLORS */
#media .accordion {
  background-color: var(--rust);
  color: var(--fg);
  cursor: pointer;
  padding: 10px;
  width: 95%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Add a background color to the button if it is clicked on */
#media .active, #media .accordion:hover {
  background-color: var(--rustdk);
}

/* Style the accordion panel. Note: hidden by default */
#media .panel {
  padding: 0 18px;
  background-color: var(--rustlt);
  overflow: hidden;
	max-height: 0;
  width: 95%;
	transition: max-height 0.2s ease-out;
}