html, body {
	--padding-space: .5rem;
	--image-radius: .5rem;
	--rounding: 1rem;

	font-family: sans-serif;

	margin: 0px;

	background-color: var(--theme-color-background);
	color: var(--theme-color-font);

	height: 100%;
}

* {
	transition: color .5s;
	transition: background-color .5s;
}

h5, a, p, span {
	font-family: sans-serif;
}

.hover-rotate:hover {
	filter: hue-rotate(30deg);
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.w-wide {
	width: 90%;
	max-width: 400px;
}

.button:not(.w-wide) {
	padding-left: 5px;
	padding-right: 5px;
}

.button span {
	width: 100%;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
}

input {	
	border-color: var(--theme-color-accent-mid);
	border-style: solid;

	box-shadow: 0px 4px 4px var(--theme-color-accent-mid);

	font-size: medium;

	height: 1rem;
	padding: .6rem;
	border-radius: 0.375rem;
}

textarea {
	border-radius: 6px;
	border-color: var(--theme-color-accent-mid);
	border-style: solid;

	box-shadow: 0px 4px 4px var(--theme-color-accent-mid);

	font-size: medium;

	padding: 6px;
}

.gray {
	color: var(--theme-font-gray);
}

.center-control {
	display: flex;
	flex-direction: column;
	align-items: center;

	max-width: 400px;
	width: 100%;
	height: 100%;

	bottom: 0px;

	position: absolute;

	justify-content: center;
}



.bi-chevron-left {
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 5px;
	height: 30px;
	width: 30px;
}

.bi {
	--icon-size: 20px;
	min-width: var(--icon-size);
	min-height: var(--icon-size);
}

.feed-item {
	display: flex;
	flex-direction: column;

	width: 88%;
	max-height: 85vh;
	max-width: 700px;
	
	border: 1px solid var(--theme-color-outline);
	border-radius: 6px;

	margin-bottom: 30px;

	box-shadow: 0 4px 4px var(--theme-color-accent-mid);
	overflow: hidden;

	--padding: 8px;
	padding-left: var(--padding);
	padding-right: var(--padding);
	padding-bottom: var(--padding);
}