:root {
  --main--color--1: rgb(37 70 97);
  --main--color--2: rgb(26, 76, 185);
  --main--color--3: rgb(58, 103, 199);
  --main--color--4: rgb(94, 131, 210);
  --main--color--5: rgb(149, 170, 216);
  --main--color--6: rgb(192, 201, 221);

  --mask--color--1: rgba(51, 24, 0, 91%);
  --mask--color--2: rgba(82, 39, 0, 0.7);

  --second--color--1: rgb(82, 39, 0);
  --second--color--2: rgb(82, 47, 14);
  --second--color--3: rgb(78, 51, 26);
  --second--color--4: rgb(80, 59, 40);
  --second--color--5: rgb(79, 65, 52);
  --second--color--6: rgb(79, 72, 65);
  --second--color--7: rgb(141, 131, 121);

  --noti--green--color--1: rgb(94, 151, 89);
  --noti--green--color--2: rgb(168 238 201);

  --noti--red--color--1: rgb(125, 16, 16);
  --noti--red--color--2: rgb(242 217 207);

  --font--family: "VT323", "Roboto", sans-serif;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: var(--font--family);
}

img {
  image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges; /* Firefox                        */
  image-rendering: -o-crisp-edges; /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated; /* Universal support since 2021   */
  image-rendering: optimize-contrast; /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor; /* IE8+                           */
}

.disableHighlight {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.enableHighlight {
  -webkit-touch-callout: text; /* iOS Safari */
  -webkit-user-select: text; /* Safari */
  -khtml-user-select: text; /* Konqueror HTML */
  -moz-user-select: text; /* Old versions of Firefox */
  -ms-user-select: text; /* Internet Explorer/Edge */
  user-select: text; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

::-webkit-input-placeholder {
  font-style: italic;
}
:-moz-placeholder {
  font-style: italic;
}
::-moz-placeholder {
  font-style: italic;
}
:-ms-input-placeholder {
  font-style: italic;
}

::-webkit-scrollbar {
  width: 0.7em;
}

::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: var(--main--color--6);
}

::-webkit-scrollbar-thumb {
  background-color: var(--main--color--1);
}

.markerTagImgRow::-webkit-scrollbar {
  height: 1em;
}

.font-xs {
  font-size: 0.8rem;
}
.font-s {
  font-size: 1rem;
}
.font-m {
  font-size: 1.2rem;
}
.font-l {
  font-size: 1.6rem;
}
.font-xl {
  font-size: 2.2rem;
}
.font-xxl {
  font-size: 2.6rem;
}

.fInput {
  font-size: 0.9rem;
  padding: 0.2em;

  /** input style **/
  background-color: #46ad72;
  border: none;
  color: white;
  border-radius: 3px;
  font-weight: 300;
  font-family: "roboto", sans-serif;
  letter-spacing: 1px;
}

.tinyInput {
  font-family: var(--font--family);
  width: clamp(2rem, calc(1rem + 10vw), 3rem);
}

.shortInput {
  font-family: var(--font--family);
  width: clamp(3rem, calc(2rem + 10vw), 5.5rem);
}

.stdInput {
  font-family: var(--font--family);
  padding: 0.2em 0.2em;
  width: clamp(8rem, calc(8rem + 10vw), 14rem);
  border: 3px solid #333;
  border-radius: 3px;
}
.longInput {
  font-family: var(--font--family);
  padding: 0.6em 0.6em;
  width: clamp(15rem, calc(12rem + 10vw), 18rem);
}

.fastTransition {
  transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
}

.stdTransition {
  transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
}

.slowTransition {
  transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}

.debugTransition {
  transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  -webkit-transition: all 2s ease-out;
}

.hide {
  visibility: hidden;
  opacity: 0%;
}

.show {
  visibility: visible;
  opacity: 100%;
}

.m-m {
  margin: 1rem;
}

.m-t-xs {
  margin-top: 0.3rem;
}

.m-t-s {
  margin-top: 0.7rem;
}

.m-t-m {
  margin-top: 1.1rem;
}

.m-t-l {
  margin-top: 1.6rem;
}

.m-l-s {
  margin-left: 0.7rem;
}
.m-l-m {
  margin-left: 1.1rem;
}
.m-l-l {
  margin-left: 1.6rem;
}
.m-l-xl {
  margin-left: 2rem;
}

.m-r-xs {
  margin-right: 0.3rem;
}

.m-r-s {
  margin-right: 0.7rem;
}

.m-r-m {
  margin-right: 1.1rem;
}

.m-r-l {
  margin-right: 1.6rem;
}

.m-r-xl {
  margin-right: 2rem;
}

.m-b-xs {
  margin-bottom: 0.3rem;
}
.m-b-s {
  margin-bottom: 0.7rem;
}

.m-b-m {
  margin-bottom: 1.1rem;
}

.m-b-l {
  margin-bottom: 1.6rem;
}

.m-b-xl {
  margin-bottom: 2rem;
}

ol {
  padding-inline-start: 1.5em;
}

.bold {
  font-weight: 600;
}

.light {
  font-weight: 300;
}

button {
  font-family: var(--font--family);
}

.button1 {
  padding: 0.6em 1.6em;
  border: 0.15em solid var(--main--color--3);
  background-color: var(--main--color--3);
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
.button1:hover {
  background-color: var(--main--color--2);
  color: white;
}

.button2 {
  padding: 0.6em 1.6em;
  border: 0.15em solid var(--main--color--3);
  background-color: white;
  color: var(--main--color--3);
  border-radius: 4px;
  cursor: pointer;
}
.button2:hover {
  background-color: var(--main--color--2);
  color: white;
}

.stdShadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.stdDropShadow {
  filter: drop-shadow(0 0.2rem 0.35rem rgba(0, 0, 0, 0.2));
}

.stdTextShadow {
  text-shadow: 0 0.2em 0.35em rgba(0, 0, 0, 0.2);
}

.centerText {
  text-align: center;
}

.versionTag {
  position: fixed;
  bottom: 12px;
  right: 12px;
  padding: 0.1em 0.4em;
  color: #333;
  z-index: 9999;
  pointer-events: none;
}