html {
	overflow-y: hidden;
}

body {
	height: 100%;
	background-color: var(--grey);
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
}

/* entry */

div.header {
	margin: var(--margin);
	position: sticky;
	top: var(--margin);
	z-index: 1002;
	display: flex;
}

div.entry-body {
	margin: 0 auto;
	margin-bottom: var(--margin);
	padding: 0 var(--margin);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	max-width: 800px;
	width: 100%;
	gap: var(--margin);
}

div.entry-body>section {
	width: 100%;
}

/* entry - img */

div#img-format-info {
	position: absolute;
	margin: var(--margin);
	top: 50%;
	transform: translate(0, calc(-50% - var(--margin) / 2));
}

span#img-format-add-hint {
	text-transform: uppercase;
}

div#img-format-info span {
	font-weight: bold;
}

section#img-section {
	max-width: 400px;
	margin: 0 auto;
	width: 100%;
	position: relative;
	padding-bottom: 0;
	margin-bottom: 0;
	background-image: url("../src/graphics/background_red_opacity.svg");
	background-repeat: repeat;
	background-size: 50%;
}

img#entry-img-display {
	width: 100%;
	border-radius: calc(var(--radius) / 2);
	aspect-ratio: 1/1;
	border: none;
	outline: none;
	object-fit: contain;
	opacity: 0;
}

img#entry-img-display[src*="http"] {
	opacity: 1;
}

input#entry-fileInput {
	display: none;
}

label#entry-fileInput-label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: var(--black);
	background-color: var(--white);
	border-radius: var(--radius);
	padding: calc(var(--margin) / 2) var(--margin);
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	opacity: 0;
}

/* entry - visible */
section#entry-visible p {
	margin-bottom: calc(var(--margin) / 2);
}

section#entry-visible div {
	display: flex;
}

section#entry-visible div button:first-child {
	border-right: none;
}

section#entry-visible div button {
	display: flex;
	flex-grow: 1;
	align-items: center;
	cursor: pointer;
	background-color: unset;
	justify-content: center;
	border: 2px solid var(--white);
	padding: var(--margin) 0;
	text-transform: uppercase;
	font-weight: bold;
}

section#entry-visible div button img {
	margin-right: calc(var(--margin) / 2);
}

/* entry - discovered */

section#entry-date>p {
	margin-bottom: calc(var(--margin) / 2);
}

input#entry-date-input {
	background-color: unset;
	outline: none;
	border: 2px solid var(--white);
	padding: var(--margin);
	width: 100%;
	font-weight: bold;
}

/* entry - description */
section#entry-description p {
	margin-bottom: calc(var(--margin) / 2);
}

/* entry - color */

section#entry-color-wrapper p {
	margin-bottom: calc(var(--margin) / 2);
}

button.entry-color {
	all: unset;
	padding: calc(var(--margin) / 4);
	border-radius: 0;
	border: 2px solid rgba(255, 255, 255, 0.1);
}

button.entry-color.active {
	border-color: var(--white);
}

button.entry-color div {
	width: calc(var(--margin) * 1.5);
	height: calc(var(--margin) * 1.5);
	border-radius: 0;
	pointer-events: none;
}