/* colors by catppuccin
   https://github.com/catppuccin/catppuccin */

:root {
	--base: #1e1e2e;
	--text: #cdd6f4;
	--surface0: #313244;
	--surface1: #45475a;
	--subtext0: #a6adc8;
	--subtext1: #bac2de;
	--pink: #f5c2e7;
	--rosewater: #f5e0dc;
	--blue: #89b4fa;
	--mauve: #cba6f7;
}

@media (prefers-color-scheme: light) {
	:root {
		--base: #eff1f5;
		--text: #4c4f69;
		--surface0: #ccd0da;
		--surface1: #bcc0cc;
		--subtext0: #6c6f85;
		--subtext1: #5c5f77;
		--pink: #ea76cb;
		--rosewater: #dc8a78;
		--blue: #1e66f5;
		--mauve: #8839ef;
	}
}

body {
	font-family: "Hack", "Hack Nerd Font", "JetBrains Mono",
		"JetBrainsMono Nerd Font", monospace, sans-serif;

	background-color: var(--base);
	color: var(--text);
}

main {
	border-color: var(--text);
}

hr {
	color: var(--text);
}

code {
	line-height: 2em;
	padding: 0.25em 0.5em;

	background-color: var(--surface0);
	color: var(--subtext1);
}

#output {
	padding: 0.5em 1em;
	display: block;

	color: var(--subtext0);
}

a {
	color: var(--pink);
}

a:hover {
	color: var(--rosewater);
}

a:active {
	color: var(--blue);
}

a:visited {
	color: var(--mauve);
}

label.upload {
	display: block;

	& > input[type="file"] {
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	& > .button {
		font-size: x-large;
		font-weight: bold;
	}
}

progress {
	width: 100%;
	border: 2px solid;

	border-color: var(--text);
	background-color: var(--base);
	color: var(--pink);
}

::-moz-progress-bar,
::-webkit-progress-bar {
	background-color: var(--pink);
}

#max-upload-size,
#files-stored,
#storage-used {
	font-weight: bold;
}

button,
.button {
	padding: 0.25em 0.5em;
	font-weight: bold;
	background-color: var(--surface0);
	color: var(--subtext0);
	user-select: none;
	border-radius: 0;
	border: 2px solid var(--pink);

	&:hover {
		border-color: var(--rosewater);
	}
	&:active {
		border-color: var(--blue);
		background-color: var(--surface1);
		color: var(--subtext1);
	}
}

@media (min-width: 992px) {
	main {
		margin: auto;
		padding: 1em;
		display: block;
		border: 2px solid;
		width: 75%;
	}
}

progress {
	width: 50%;
	display: inline;
}

.progress-text {
	float: right;
	margin-left: 0.5em;
}