/* colours -----------------------------------------------*/
:root {
	--my-bright-brown: #411e03;
	--my-plain-brown: #846851;
	--my-plain-olive: #b8b671;
	--my-pale-orange: #dcc7ae;
	--my-light-peach: #d6b38d;
}

body {
	background-color: var(--my-light-peach);
}

header #header-title,
.inline-error {
	color: var(--my-bright-brown);
}

#component-comment-section,
#homepage-content,
#gallery-content {
	background-color: var(--my-plain-brown);
}

#container-image-meta-actions,
#comment-posting-card,
#comment-viewing-page-container,
#comment-viewing-card,
#add-image-card,
#gallery-nav-header,
#gallery-list-card,
.overlay-card {
	background-color: var(--my-plain-olive);
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="submit"],
textarea,
button,
.gallery-entry-card,
.comment-card {
	background-color: var(--my-pale-orange);
}

input[type="submit"]:hover,
button:hover {
	background-color: burlywood;
}

/* general -----------------------------------------------*/
body {
	font-size: 18px;
	font-family: Arial;
	
	display: flex;
	flex-direction: column;
	align-items: center;
}

.card {
	margin: 10px;

	border: 2px solid black;
	border-radius: 15px;
}

button {
	padding: 5px;
	font-weight: 500;
	border: 2px solid black;
	border-radius: 15px;
	cursor: pointer;
}

input[type="text"],
input[type="password"],
input[type="url"],
textarea {
	padding: 5px;
	border-radius: 15px;
}

input[type="submit"] {
	padding: 5px;
	font-weight: 500;
	border: 2px solid black;
	border-radius: 15px;
	cursor: pointer;
}

.input-field {
	display: flex;
	justify-content: space-evenly;

	width: 80%;
	align-self: center;
}

.input-field > label {
	flex: 1;
	margin: 0 0 0 10%;
	align-self: center;
}

.input-field > input {
	flex: 3;
	margin: 0 10% 0 0;
	align-self: center;
}

.dnd-zone {
	display: flex;

	width: 65%;
	height: 35%;
	align-self: center;
}

.dnd-zone > label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	align-self: center;

	width: 100%;
	height: 100%;
	border: 2px dashed black;
	border-radius: 15px;
	color: slategray;
	cursor: pointer;
}

.dnd-zone > label > input {
	display: none;
}

#content-area {
	display: flex;
	flex-direction: column;

	min-width: 580px;
	width: 65%;
}

#homepage-content {
	width: 75%;
	align-self: center;
}

button:disabled {
	color: transparent !important;
	background-color: transparent !important;
	border: none !important;
	cursor: default !important;
}

.informative-prompt {
	font-weight: 100;
	font-style: italic;
}

.inline-error {
	display: flex;
	justify-content: center;

	font-size: 2em;
}

/* header stuff ------------------------------------------*/
header{
	margin-bottom: 0.5em;

	display: flex;
	justify-content: center;
}

header #header-title {
	text-decoration: none;
	font-weight: bold;
	font-size: 2.5em;
}

#auth-action-area {
	display: flex;

	position: absolute;
	align-self: center;
	right: 18%;
}

#user-auth-state {
	align-self: center;
	margin-right: 10px;
}

#button-explore-galleries {
	position: absolute;
	align-self: center;
	left: 18%;
}

/* overlay stuff -----------------------------------------*/

.overlay,
.error-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	z-index: 200;

	background-color: rgb(0 0 0 / 0.75);
}

.error-overlay {
	z-index: 300;
}

.overlay-card {
	width: 60%;
	height: 55%;
	margin: auto;
	padding: 10px;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.overlay-card > * {
	margin: 10px;
}

.overlay-card > h2,
.informative-prompt {
	align-self: center;
}

.error-overlay-card {
	width: 40%;
	height: 25%
}

/* auth overlay  -----------------------------------------*/

#auth-card {
	height: 30%;
	max-width: 650px;
}

#button-submit-auth-credentials-wrapper {
	display: flex;
	justify-content: center
}

#button-submit-auth-credentials-wrapper > input {
	margin: 0 5%;
}

/* homepage stuff ----------------------------------------*/

#gallery-nav-header {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 5px;
}

#gallery-list-card {
	height: 65vh;
	overflow: scroll;
}

.gallery-entry-card {
	display: flex;
	justify-content: space-between;

	padding: 5px;
}

.gallery-entry-card > *,
.gallery-entry-meta > * {
	margin: 10px;
}

.gallery-entry-owner {
	font-weight: 500;
	font-size: 1.5em;
}

.gallery-last-updated {
	font-style: italic;
}

.button-gallery-goto {
	height: fit-content;
	align-self: center;
}

/* image display -----------------------------------------*/

#gallery-content {
	display: flex;
	flex-direction: column;

	min-height: 55vh;
}

#gallery-empty-message {
	display: flex;
	align-self: center;
	margin: auto;

	font-size: 1.5em;
}

#image-display-header {
	display: flex;
	justify-content: space-between;
}

#image-display-header > * {
	align-self: center;
	margin: 2% 10%;
}

#container-image-display {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;

	height: 55vh;

	background-color: black;
}

#current-image-display {
	height: 100%;
	width: 100%;

	margin: 0 min(-5vw, -100px);
	object-fit: contain;
	border-radius: 15px;
}

#container-image-display > button {
	flex: 1;
	max-width: min(5vw, 100px);
	z-index: 1;

	font-size: 52px;
	background-color: transparent;
	color: grey;
	border: none;
	
	cursor: pointer;
}

#container-image-display > button:hover {
	color: white;
	background-color: rgb(0 0 0 / 0.25);
}

#previous-image-display {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#next-image-display {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#container-image-meta-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#title-image-display,
#author-image-display,
#date-image-display {
	margin: 10px 25px;
}

#title-image-display {
	font-size: 1.5em;
}

#date-image-display {
	font-size: 0.75em;
	font-style: italic;
}

#delete-image-display {
	background-color: lightcoral;
	margin: 0 25px;
}

#delete-image-display:hover {
	background-color: tomato;
}

/* add image overlay -------------------------------------*/

#button-add-image-overlay-toggle {
	align-self: center;
}


#add-image-preview {
	width: 60%;
	height: 60%;
	object-fit: contain;
	align-self: center;

	border: 2px solid black;
	border-radius: 15px;
	color: white;
	background-color: black;
}

#confirm-button-add-image-wrapper {
	display: flex;
	justify-content: center;
}

/* comment section ---------------------------------------*/

#component-comment-section {
	display: flex;
}

#component-comment-section > div {
	flex: 1;
}

#comment-posting-form {
	display: flex;
	flex-direction: column;
}

#comment-posting-form > * {
	margin: 2% 5%;
}

#comment-posting-form .input-field {
	width: 100%;
}

#comment-posting-form .input-field > label {
	margin: 0 1% 0 5%;
	align-self: start;
}

#comment-posting-form .input-field > input {
	margin: 0 5% 0 1%;
}

#add-comment-content-field {
	flex: 3;
	margin: 0 5% 0 1%;
	resize: none;
}

#confirm-comment-button-wrapper {
	display: flex;
	justify-content: end;
}

#comment-viewing-page-container {
	display: flex;
	justify-content: space-around;
	align-items: center;

	padding: 5px;
}

#comment-viewing-card {
	height: 40vh;
	overflow: scroll;
}

.comment-card {
	padding: 5px;
}

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

.comment-author {
	font-weight: 600;
}

.comment-date {
	font-style: italic;
}

.comment-content {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 2px solid black;
}

.button-delete-comment-wrapper {
	display: flex;
	justify-content: flex-end;
}

.button-delete-comment {
	background-color: lightcoral;
	margin: 0 5px;
}

.button-delete-comment:hover {
	background-color: tomato;
}

/* animations --------------------------------------------*/

@keyframes fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#current-image-display {
	animation-name: fade-in;
	animation-duration: 1s;
}