@font-face {
	font-family: "Cascadia Code";
	src: url("/fonts/CascadiaCode.woff2");
}

:root {
	--main-color: #f99eb7;
	--main-bg-color: #1a1c20;
	--main-bg-secondary-color: #313b53;
	--main-bg-lighter-color: #393d46;
	--item-bg-color: #1b202d;
	--item-bg-lighter-color: #393d46;
	--success-color: #3b5c3d;
	--failure-color: #5c3d3b;
}

body {
	background-color: var(--main-bg-color);
	color: var(--main-color);

	font-size: 12pt;

	font-family: "Cascadia Code", monospace;

	display: grid;
	grid-template-rows: auto minmax(300px, auto);
	grid-template-columns: 1fr;
	grid-row-gap: 1em;

	margin: 0 auto;
}

.hidden {
	display: none;
}

#greeting {
	grid-row: 1;
	background-color: var(--main-bg-secondary-color);

	margin-right: 2em;
}

nav {
	grid-row: 1;
	/*grid-column: 2;*/

	display: flex;
	gap: 0.75em;

	align-items: center;
	justify-content: center;

	background-color: var(--main-bg-secondary-color);
	padding: 0.5em;
}

#userInfo {
	margin-left: 2em;
}

.menuLink {
	border: 2px #101010 solid;
	border-radius: 5px;
	padding: 0.5em 1em 0.5em 1em;
	background-color: var(--item-bg-color);
	color: var(--main-color);

	text-decoration: none;
}

.menuLink:hover {
	cursor: pointer;
	background-color: var(--main-bg-secondary-color);
}

.menuLink:visited {
	color: var(--main-color);
	text-decoration: none;
	text-decoration-color: forestgreen;
}

input[type=text],input[type=password],input[type=submit],input[type=button],button,textarea {
	color: var(--main-color);
	background-color: var(--main-bg-secondary-color);
	border: 1px solid var(--main-bg-color);
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 5px;

	font-family: "Cascadia Code", monospace;
	font-size: 12pt;
}

input[type=submit] {
	cursor: pointer;
}

input[type=text]:hover,input[type=password]:hover,input[type=submit]:hover,input[type=button]:hover,button:hover {
	background-color: var(--item-bg-color);
	cursor: pointer;
}

input[type=file] {
	display: none;
}

select {
	color: var(--main-color);
	background-color: var(--main-bg-secondary-color);
	border: 1px solid var(--main-bg-color);
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 5px;

	font-family: "Cascadia Code", monospace;
	font-size: 12pt;
}

fieldset {
	border-color: var(--main-bg-secondary-color);
}

main {
	grid-column: 1/3;

	display: inline-grid;
	justify-items: center;
	align-items: center;
}

dialog {
	background-color: var(--main-bg-secondary-color);
	color: var(--main-color);
}

/* ===================== Login ===================== */

#loginForm {
	display: inline-grid;
	grid-row-gap: 0.5em;
}

/* ===================== InfoMsgBox ===================== */

.infoMsgBox {
	padding: 0.5em;
	margin: 0.5em;

	border: 1px solid var(--main-bg-secondary-color);
	border-radius: 5px;
}

.infoMsgSuccess {
	background-color: var(--success-color);
}

.infoMsgFailure {
	background-color: var(--failure-color);
}

/* ===================== Upload ===================== */

#uploadForm, #textUploadForm {
	display: grid;
	grid-row-gap: 0.5em;
	grid-template-columns: 1fr;
}

.uploadFormSection {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.uploadFormSection select:hover {
	background-color: var(--item-bg-color);
}

.uploadFormSection label {
	padding-right: 1em;
}

.uploadFormSection input[type=submit] {
	flex-grow: 1;
}

#fileUploadContainer {
	flex-grow: 2;
}

.fileUploadBox { 
	cursor: pointer;

	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;

	text-align: center;

	color: var(--main-color);
	background-color: var(--main-bg-secondary-color);
	border: 1px solid var(--main-bg-color);
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 5px;

	font-family: "Cascadia Code", monospace;
	font-size: 12pt;
}

.fileUploadBox:hover {
	background-color: var(--item-bg-color);
}

#text-box {
	width: 50em;
	height: 20em;
	margin-top: 0.5em;
}

@media screen and (max-width: 55em) {
	#text-box {
		width: 90svw;
	}
}

/* ===================== Files ===================== */

#fileEntries {
	display: grid;
}

.fileEntry {
	padding: 0.25em;
}

.fileEntry:hover {
	background-color: var(--item-bg-lighter-color);
	border-radius: 5px;
	cursor: pointer;
}

.fileEntry a {
	color: var(--main-color);
	text-decoration: none;

	display: grid;
	grid: "filename deleteButton" auto
		  "rest rest" 1fr
		/ 1fr 4em;
}

.fileEntryStats {
	grid-area: rest;
	padding-bottom: 0.5em;
}

.fileEntryFilename {
	font-size: 16pt;
	color: var(--main-color);
	font-weight: bold;

	align-self: center;
}

.fileEntry div {
	margin-left: 0.5em;
}

a:visited {
	text-decoration: none;
}

.fileEntryPrivate {
	border: 2px solid gold;
}

.deleteButton {
	margin-left: 0.5em;
}

/* ===================== Account ===================== */

#generateRegistrationLinkForm {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
}

#generateRegistrationLinkForm > fieldset {
	display: grid;
	grid-template-columns: auto auto;
	justify-items: start;
	justify-content: start;
	grid-row-gap: 0.5em;
}

/* ===================== TabsView ===================== */
tabs-view {
	display: grid;
}

.tabsview-ribbon {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-bottom: 0.5em;
}

.tabsview-button {
}

.tabsview-button-active {
	border: 1px var(--main-color) solid;
}

/* ===================== Mobile version ===================== */

@media screen and (max-width: 570px) {
	body {
		grid-template-rows: auto minmax(1fr, 570px);
		grid-template-columns: auto;
		grid-gap: 0;
	}

	.fileEntry {
		overflow: scroll;
		word-wrap: break-word;
		white-space: initial;
	}

	nav {
		flex-direction: column;
		align-items: normal;
		justify-items: stretch;

		grid-gap: 0.2em;

		padding-left: 0;
		padding-right: 0;
	}

	#greeting {
		text-align: center;
	}

	#userInfo {
		margin-left: 0;
		text-align: center;
	}

	.menuLink {
		border: 2px solid var(--item-bg-color);
		border-radius: 0;
	}

	main {
		margin-top: 1em;
		grid-column: 1;
	}
}