@import url("/css/fonts.css");

:root {
	color-scheme: light dark;
	--clr-bg: light-dark(#a2dfd0, #2a295c);
	--clr-fg: light-dark(#ddd, #222222);
	--clr-text: light-dark(#222, #ddd);
	--clr-text-light-gray: light-dark(#444, #bbb);
	--clr-text-red: light-dark(#924141, #e77979);
	--clr-text-green: light-dark(#4a9241, #79e782);
	--clr-text-cyan: light-dark(#25756d, #71e7db);
	--clr-text-blue: light-dark(#4872b5, #7da7eb);
	--clr-text-purple: light-dark(#a351bf, #ce7bea);
	--clr-rim: gray;

	&[data-scheme = "dark"] { color-scheme: dark; }
	&[data-scheme = "light"] { color-scheme: light; }
}

html {
	font-family: "IBM VGA 8x16";
	color: var(--clr-text);
	background-color: var(--clr-bg);
	/*transition: background-color .8s, border-color .8s, color .8s;*/
}

body {
	--body-padding: 1rem;
	margin: var(--body-padding);
	height: calc(100dvh - var(--body-padding) * 2);

	@media (width < 31.25rem) {
		--body-padding: 0.5rem;
	}
}

a {
	color: var(--clr-text-blue);

	&:visited {
		color: var(--clr-text-purple);
	}
}

main {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: var(--body-padding);

	p {
		margin: 0;
		min-height: 1rem;
	}

	& > #display {
		flex-grow: 2;
		padding: calc(var(--body-padding) * 0.5) calc(var(--body-padding) * 0.5 + 2ch);
		border: 2px solid var(--clr-rim);
		background-color: var(--clr-fg);
		overflow-y: scroll;

		scrollbar-color: var(--clr-rim) var(--clr-fg);
		outline: none;
		overflow-wrap: anywhere;

		white-space-collapse: preserve-spaces;
		/*transition: background-color .8s, border-color .8s, color .8s, scrollbar-color .8s;*/
	}

	& > .input {
		flex-shrink: 1;
		/*padding: 1rem;*/

		display: flex;
		flex-direction: row;
		gap: var(--body-padding);

		& > input {
			flex-grow: 1;

			color: inherit;
			font-family: inherit;
			font-size: inherit;

			background-color: var(--clr-fg);
			border: 2px solid var(--clr-rim);
			outline: none;
			
			/*transition: background-color .8s, border-color .8s, color .8s;*/
		}

		& > #input-button {
			background-color: var(--clr-fg);
			border: 2px solid var(--clr-rim);
			color: inherit;
			font-family: inherit;
			font-size: inherit;
			outline: none;
			flex-grow: 0;
			/*transition: background-color .8s, border-color .8s, color .8s;*/

			&:not([disabled]) {
				cursor: pointer;

				&:active {
					animation: .2s linear button-flash;
				}
			}

			&[disabled] {
				color: var(--clr-rim);
			}
		}
	}
}

@keyframes button-flash {
	0% { filter: brightness(1.8); }
	100% { filter: none; }
}

.light-gray { color: var(--clr-text-light-gray); }
.gray { color: var(--clr-text-gray); }
.red { color: var(--clr-text-red); }
.dark-red { color: var(--clr-text-dark-red); }
.green { color: var(--clr-text-green); }
.cyan { color: var(--clr-text-cyan); }
.white { color: var(--clr-text); }
.outdent {
	margin-left: -2ch;
	margin-top: .5rem;
	margin-bottom: .5rem;

	&:first-child { margin-top: 0; }
	&:last-child { margin-bottom: 0; }
}

p-t {
	opacity: 0.6;
	transition: opacity .2s;

	&:hover {
		opacity: 1;
	}
}