/* global standards */
:root {
	--button-bg: rgb(30 30 30);
	--button-border: rgb(60 60 60);
	--button-border-hover: rgb(70 70 70);
	--border-color-50: rgb(50 50 50);

	--error: rgb(255 100 100);
	
	/* archive picker row specs */
	--picker-row-height: 34px;
	--visible-rows: 7;
	
	--site-bg: rgb(16 16 16);
	--bg-dark: #161616;
	--bg-medium: #181818;
	--bg-hover: #333333;
	--text-dark: rgb(60 60 60);
	--text-meddark: rgb(110 110 110);
	--text-med: rgb(170 170 170);
	--text-medlight: rgb(200 200 200);
	--text-light: rgb(230 230 230);
	--border-color: rgb(68 68 68);

	/* font colors */
	--gray: rgb(200 200 200);
	--red: rgb(255 41 117);
	--orange: rgb(255 145 27);
	--yellow: rgb(255, 198, 66);
	--lite-yellow: rgb(255 234 66); 
	--green: rgb(0 255 173);
	--blue: rgb(0 195 255);
	--pink: rgb(255 110 204);
	--pinkle: rgb(193, 0, 177);
	--purple-old: rgb(190, 40, 255);
	--purple: rgb(180 94 255);

	/* key border colors */
	--red-key: rgb(255, 159, 193);
	--orange-key: rgb(255, 196, 133);
	--yellow-key: rgb(255, 225, 155);
	--lite-yellow-key: rgb(255, 243, 155); 
	--green-key: rgb(142, 255, 219);
	--blue-key: rgb(148, 230, 255);
	--pink-key: rgb(255, 190, 232);
	--purple-key: rgb(229, 169, 255);

	/* key background colors */
	--red-shade: rgb(44, 6, 19);
	--orange-shade: rgb(38, 21, 3);
	--yellow-shade: rgb(40, 29, 2);
	--lite-yellow-shade: rgb(39, 35, 5); 
	--green-shade: rgb(3, 25, 18);
	--blue-shade: rgb(2, 14, 18);
	--pink-shade: rgb(28, 1, 19);
	--purple-shade: rgb(17, 3, 24);

	/* key background hover colors */
	--white-key-bg-hover: rgb(255 255 255 / 20%);
	--red-key-bg-hover:rgb(255 0 106 / 20%);
	--blue-key-bg-hover: rgb(0 190 255 / 20%);
	--yellow-key-bg-hover: rgb(255 255 0 / 15%);
	--green-key-bg-hover: rgb(0 255 47 / 15%);
	--pink-key-bg-hover: rgb(255 0 230 / 18%);

	--camo-key-bg-hover:rgb(0 0 0 / 40%);
	--camo-key-preview:rgb(50 50 50 / 90%);

	--dim: rgb(160 160 160);
	--bright: rgb(240 240 240);
	--pure-white:rgb(255 255 255);

	--safe-top: 20px;
}

@media (min-width: 580px) {
	:root {
		--visible-rows: 9; /* Taller picker for desktop */
	}
} 

/* body {
  touch-action: pan-x pan-y;
} */

*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* For older Android/iOS versions */
    outline: none; /* Optional: removes the focus outline, use with caution for accessibility */
}

html,
body {
	font-family: Arial, Helvetica, sans-serif;
	border: none;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	height:100%;
	width:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	
	display:flex;
	justify-content:center;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; /* The Firefox equivalent for Mac */
	font-size:1rem;
}

html,
.maintainer {
	background: var(--site-bg);
}

.maintainer {
	outline: 1px solid var(--site-bg);
}

body {
	font-size: 1.2rem;
}

.centext {
	text-align:center;
}

.error {
	color:var(--error);
}

.pure.white,
white.pure {
	color:var(--pure-white);
}

white,
.white {
	color:var(--text-light);
}

gray,
.gray {
	color: var(--gray);
}

red,
.red {
	color: var(--red);
}

orange,
.orange {
	color: var(--orange);
}

yellow,
.yellow {
	color: var(--yellow);
}

green,
.green {
	color: var(--green);
}

blue,
.blue {
	color: var(--blue);
}

pink,
.pink {
	color: var(--pink);
}

.pinkle,
pinkle {
	color: var(--pinkle);
}

purple,
.purple {
	color: var(--purple);
}

.temp {
	color: rgb(150 150 150);
}

dim {
	color: var(--dim);
	font-weight:bold;
}

bright {
	color: var(--bright);
	font-weight:bold;
}

.h1 {
	font-size:2em;
	font-weight:700;
}

smaller,
.smaller {
	font-size:smaller;
}

tiny,
.tiny {
	font-size:x-small;
}

div.rel {
	position:relative;
}

* {
	box-sizing: border-box;
}

.grid {
	display:grid;
}

.flex {
	display:flex;
}

.flex .f0 {
	flex:0;
}

.flex .f1 {
	flex:1;
}

.flex .f2 {
	flex:2;
}

.flex .f3 {
	flex:3;
}

.flex .f4 {
	flex:4;
}

.flex .f5 {
	flex:5;
}

.flex .f6 {
	flex:6;
}

.flex .f7 {
	flex:7;
}

.flex .f8 {
	flex:8;
}

.flad {
	min-width:0;
	min-height:1rem;
}

.flad.fg1 {
	flex-grow:1;
}

.flad.fg2 {
	flex-grow:2;
}

.flad.fg3 {
	flex-grow:3;
}

.flad.fg4 {
	flex-grow:4;
}

.flad.fg5 {
	flex-grow:5;
}

.flex.row {
	flex-direction:row;
	align-items:center;
}

.flex.col {
	flex-direction:column;
}

.flex.gap.rem05 {
	gap:0.5rem;
}
.flex.gap.rem1 {
	gap:1rem;
}
.flex.gap.rem2 {
	gap:2rem;
}
.flex.gap.rem3 {
	gap:3rem;
}
.flex.gap.rem4 {
	gap:4rem;
}
.flex.gap.rem5 {
	gap:5rem;
}
.flex.gap.rem6 {
	gap:6rem;
}
.flex.gap.rem7 {
	gap:7rem;
}
.flex.gap.rem8 {
	gap:8rem;
}

.flex.justify.center {
	justify-content:center;
}

.flex.align.center {
	align-items:center;
}

.flex.justify.between {
	justify-content: space-between;
}

.flex.align.start {
	align-items:flex-start;
}

.flex.align.end {
	align-items:flex-end;
}

.flex.justify.start {
	justify-content:flex-start;
}

.flex.justify.end {
	justify-content:flex-end;
}

.flex.justify.around {
	justify-content:space-around;
}

.animate__animated.animate__fadeInDown {
	--animate-duration: 0.3s;
}

.z10 {
	z-index:10;
}

.hide {
	display: none !important;
}

.invis {
	opacity: 0 !important;
	color: transparent !important;
}

.hand,
.button {
	cursor: pointer;
}

.ph-light,
.ph-thin {
	vertical-align: middle;
}

mark {
	background-color: transparent;
}
/* 
mark.add {
	color: rgb(0, 194, 255);
}

mark.remove {
	color: rgb(255, 110, 204);
}

mark.change {
	color: rgb(255, 198, 66);
} */

.divbot {
	border-bottom: 1px solid var(--border-color-50);
}

.divtop {
	border-top: 1px solid var(--border-color-50);
}

.divleft {
	border-left: 1px solid var(--border-color-50);
}

.divrite {
	border-right: 1px solid var(--border-color-50);
}

/* .report {
	position: absolute;
	top:10px;
	left:10px;
	height:40px;
	width:200px;
	z-index:9000;
	background-color:yellow;
	color:rgb(181, 60, 3);
	display: flex;
	align-items: center;
	justify-content:center;
	font-size:1.3em;
} */

input {
	border: 1px solid var(--button-border);
	background-color: rgb(255 255 255 / 5%);
	color: rgb(255 255 255 / 78%);
	font-size: 1.3rem;
	font-weight: 300;
	text-align:center;
	outline:none;
	transition: border 0.2s;
}

input.problem {
	background-color: rgb(47 17 17) !important;
    border: 1px solid rgb(85 31 31) !important;
}

input:focus {
	border:1px solid rgb(90 90 90);
}

.btn {
	border: 1px solid var(--button-border);
	background-color: rgb(255 255 255 / 5%);
	color: rgb(255 255 255 / 78%);
	font-size: 1.2rem;
	font-weight: 300;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, border 0.2s, background-color 0.2s;
}

.rect {
	border-radius:0.5rem;
	padding:0.25rem 1rem;
}

.btn.rect {
	height:3rem;
}

.btn.round {
	border-radius: 100%;
	width: 2.4rem;
	height: 2.4rem;
	z-index: 2;
}

.btn.round.close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index:unset;
}

.btn.round.close img {
	width: 50%;
	height: 50%;
	opacity: 0.8;
}
/* 
.btn:not(.disabled):hover {
	border: 1px solid rgb(70 70 70);
}

.btn.rect:not(.disabled):hover {
	background-color:rgb(255 255 255 / 8%);
} */

/* .btn.round:not(.disabled):hover {
	transform: scale(1.15);
} */

@media (hover: hover) {
	.btn:not(.disabled):hover {
		border: 1px solid rgb(70 70 70);
	}
	.btn.rect:not(.disabled):hover {
		background-color:rgb(255 255 255 / 8%);
	}
    .btn.round:not(.disabled):hover {
        transform: scale(1.15);
    }
}

.btn:active {
    transform: scale(0.8);
}

.btn.round.mini {
	width: 1.4rem;
    height: 1.4rem;
    font-size: small;
    /* line-height: 5.9rem; */
    position: absolute;
}

.btn.round.mini.why {
	display: inline-flex;
}

.outLeft {
	animation: outLeft 0.4s;
}

@keyframes outLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.inFromRight {
	animation: inFromRight 0.4s;
}

@keyframes inFromRight {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}

.pushLeft {
	animation: pushLeft 0.4s;
}

@keyframes pushLeft {
	0% {
		transform: translateX(0);
	}

	5% {
		transform: translateX(5%);
	}

	100% {
		transform: translateX(-100%);
	}
}