/* Fade in, to reduce "jerkiness"
*/
@keyframes fadeIn {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
body, aside {
  opacity: 0.25;
  animation: fadeIn 0.4s ease-in-out forwards;
}

aside {
  animation-delay: 0.2s;
}

@keyframes flashBackgroundColor {
  from {
    background-color: inherit;
    outline: 0 solid transparent;
  }
  to {
    background-color: #E8E8E8;
    outline: 0.4em solid #E8E8E8;
  }
}
:target {
  animation: flashBackgroundColor 0.4s ease-in-out;
  background-color: #E8E8E8;
  outline: 0.4em solid #E8E8E8;
}

/*	BS-content-toggle
		1) Checkboxes: allows each element to be collapsed and restored separately
				<*>
					<input id="--x--" type="checkbox" class="BS-content-toggle" checked>
					<label for="--x--"><*>----Label for the toggle, shown next to the checkbox----</*></label>
					<*>----Content to be toggled on and off----</*>
				</*>
		2) Radio buttons: as one element is made visible, the others disappear
				<*>
					<input name = "--a--" id="--x--" type="radio" class="BS-content-toggle">
					<label for="--x--"><*>----Label for the toggle, shown next to the radio button----</*></label>
					<*>----Content to be toggled on and off----</*>
				</*>
				<*>
					<input name = "--a--" id="--y--" type="radio" class="BS-content-toggle">
					<label for="--y--"><*>----Label for the toggle, shown next to the radio button----</*></label>
					<*>----Content to be toggled on and off----</*>
				</*>
*/
.BS-content-toggle, .BS-content-toggle + label {
  cursor: pointer;
}

.BS-content-toggle + label {
  display: inline;
}

.BS-content-toggle + label + * {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}

.BS-content-toggle:checked + label + * {
  display: inherit;
}