@font-face {
  font-family: "Unifont";
  src: url(unifont.woff2);
}

@font-face {
  font-family: "Unifont";
  src: url(unifont-upper.woff2);
}

* {
	box-sizing: border-box;
}

html {
	font-family: "Unifont";
	font-weight: normal;
	font-size:16px;
}

body {
	margin: 1rem auto;
	width: 336px;
}

p {
	margin: 0;
}

h1 {
	font-size: 1rem;
	text-align: right;
	margin: 0;
}

img {
	display: block;
	width: 100%;
	border: 1px solid black;
}

ul, #rootUL {
	list-style-type: none;
	padding-left: 0;
}

a {
	color: black;
}

#rootUL {
	border: 1px solid black;
  /* Remove margins and padding */
	margin: 0;
	padding: 0;
}

.category{
	list-style-type: none;
	border: 1px solid white;
	border-bottom: unset;
	background-color: black;
	color: white;
}

.category:last-child {	
	border-bottom: 1px solid white;
}

.item {
	border-bottom: 1px solid black;
	background-color: white;
	color: black;
}

/* Add padding to active item contents */
.item>.active>li{
	padding-left: 1rem;
	padding-right: 1rem;
}

.item:last-child {
	border-bottom: none;
}

.item:first-child {
	border-top: 1px solid white;
}

span.caret {
	display: block;
	padding-left: 1rem;
	padding-right: 1rem;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: " ↲"; 
}

span.caret-down {
	white-space: wrap; 
}

.space-between {
	display: flex;
	justify-content: space-between;
}

.caret {
	cursor: pointer;
	user-select: none;
	font-weight: bold;
}

/* Hide the .nested by default */
.nested {
	display: none;
}

/* Override nested behavior when activated */
.active {
	display: block;
}

#age-button {
  font-variant: all-small-caps;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: darkgray;
}