:root {
	--bg: #333;
	--bg2: #444;
	--fg: #eee;
	--acc: #c55;
	--acc2: rgb(112, 44, 44);
}

html,
body {
	background: var(--bg);
	color: var(--fg);
	font-family: monospace;
	box-sizing: border-box;
}

.menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
/* 
.menu > .button {
	position: fixed;
	bottom: 0.1cm;
	left: 0.1cm;
	width: 1cm;
	height: 1cm;
	background: var(--acc);
	border-radius: 0.5cm;
} */

.menu > .button {
	position: fixed;
	bottom: 0cm;
	left: 0cm;
	width: 1.5cm;
	height: 1.5cm;
	background: var(--acc);
	border-top-right-radius: 0.5cm;
}

.menu > .button::before {
	content: '';
	position: fixed;
	bottom: 0.65cm;
	left: 0.45cm; /* 0.1cm + 0.2cm off each side */
	width: 0.6cm;
	height: 0.2cm;
	background: var(--fg);
}

.content {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow-y: scroll;

	padding: 0.5cm;
}

.content > .spacer {
	height: 100vh;
}

.content > .item {
	/* padding: 0.5cm; */
	border-radius: 0.5cm;
	background: var(--bg2);
	width: calc(100vw - 1cm);
	margin-bottom: 0.5cm;
	overflow: hidden;
}

.content > .item.liked {
	border-bottom: 0.2cm solid #5c5;
}

.content > .item.disliked {
	border-bottom: 0.2cm solid var(--acc);
}

.content > .item > img {
	display: block;
	width: 100%;
	height: auto;
}

.content > .item > .tagsList {
	padding: 0.5cm;
}

.content > .item > .tagsList > span,
.tag {
	display: inline-block;

	background: var(--acc2);
	padding: 0.3em;
	border-radius: 0.3em;

	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

.content > .item > .tagsList > span.selected {
	background: var(--acc);
}

.currentTags {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100vw;
	height: auto;
}

.currentTags > span {
	display: inline-block;

	background: var(--acc2);
	padding: 0.3em;
	border-radius: 0.3em;

	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

.selected,
.tag.selected {
	background: var(--acc);
}

.container {
	background: #00000040;
	padding: 0.5cm;
	border-radius: 0.5cm;
	margin-bottom: 0.5cm;
}

h2 {
	color: var(--acc);
}