:root {
	/* --our-color: #2ea44f; */
	--our-color: #b60024;

	--hover-effect: rgba(0, 0, 0, 0.08);

	--page-background: rgb(250, 255, 245);
	--page-background: #fff;

	--layout-border: 1px solid rgba(225, 225, 225);
	--element-border: 1px solid rgba(195, 195, 195);

	--logo-color: black;

	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-moz-tap-highlight-color: rgba(255, 255, 255, 0);
}

.hovered {
	background-color: var(--hover-effect);
}
.hoverable:hover {
	background-color: var(--hover-effect) !important;
}

::-webkit-scrollbar {
	width: 9px;
}

::-webkit-scrollbar-track {
	background-color: var(--page-background);
}

::-webkit-scrollbar-thumb {
	background-color: var(--our-color);
	border-radius: 2px;
}

body {
	background-color: var(--page-background);
	font-weight: 500;
	margin: 0;
	padding: 0;
	width: 375px;
	user-select: none;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
}

body {
	direction: __MSG_@@bidi_dir__;
}

.pagebody {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 600px;
}

a {
	text-decoration: none;
	display: inline-flex;
}

input {
    border: var(--element-border);
    border-radius: 5px;
    height: 40px;
    padding: 0 13px;
    transition: 0.15s ease-out;
    background: transparent;
    background-color: var(--page-background);
	font: normal 18px sans-serif;
}


textarea, input {
    color: inherit;
}

textarea {
	font: normal 26px sans-serif;
}

input:focus {
    border-color: #2ea44f;
    /* box-shadow: rgba(var(--our-color-prim),0.2) 0px 0px 5px; */
}


input:focus-visible {
    outline: none;
}


input[type="number"] {
    width: 70px;
    font-family: inherit;
    text-align: center;
    padding: 4px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page-background: rgb(10,10,10);

		--element-border: 1px solid rgba(70, 70, 70);
		--layout-border: 1px solid rgba(50, 50, 50);

		--logo-color: rgb(243, 252, 233);

		--hover-effect: rgba(255,255,255,0.08);

		/* --our-color: #2ea44f; */

		color: rgb(243, 252, 233);
	}

	::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, 0.3);
		&:hover {
			background-color: rgba(255, 255, 255, 0.5);
		}
	}
}