/* Font Family */
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap");
:host, :root {
  --brand-font: "Hind Siliguri", sans-serif;
  --brand-primary: #00BCD4;
  --brand-generic-red: #FF5722;
  --brand-generic-green: #4CAF50;
  --brand-generic-yellow: #FFC107;
  --brand-generic-white: #EEEEEE;
  --brand-font-c900: #101010;
  --brand-font-c600: #7b7b7b;
  --brand-font-alt-c900: #EEEEEE;
  --brand-font-alt-c600: #868f9f;
  --brand-fg-primary: #7B7B7B;
  --brand-bg-primary: #F2F3F4;
  --brand-bg-secondary: #FDFDFD;
  --brand-bg-tertiary: #E2E2E2;
}

:host-context(.dark), :root.dark {
  --brand-font-c900: #EEEEEE;
  --brand-font-c600: #868f9f;
  --brand-font-alt-c900: #101010;
  --brand-font-alt-c600: #7b7b7b;
  --brand-bg-primary: #0D0F11;
  --brand-bg-secondary: #191D23;
  --brand-bg-tertiary: #262C36;
  --brand-fg-primary: #868F9F;
}

/* Works on Chrome/Edge/Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--brand-bg-primary);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--brand-bg-tertiary);
  border: 2px solid var(--brand-bg-primary);
}

::-webkit-scrollbar-corner {
  background: var(--brand-bg-primary);
}

/* Generic Viewport Width for Grouping - v1.0.0 */
.vw-100, .vw-50, .vw-33 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.vw-100.center, .vw-50.center, .vw-33.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.vw-100.right, .vw-50.right, .vw-33.right {
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

.vw-100.left, .vw-50.left, .vw-33.left {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.vw-100 {
  width: 100%;
}

.vw-50 {
  width: 50%;
}

.vw-33 {
  width: 33.333%;
}

@media (max-width: 768px) {
  .vw-50 {
    width: 100%;
  }
  .vw-33 {
    width: 50%;
  }
}
@media (max-width: 576px) {
  .vw-33 {
    width: 100%;
  }
}
#legend {
  inset: 0;
  width: 100%;
  margin: auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
}
#legend img {
  margin: auto;
  width: 480px;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#legend h1 {
  margin: 0;
  cursor: default;
  font-size: 36px;
  line-height: 40px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  font-family: serif;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--brand-font-c900);
}
#legend a {
  width: 36px;
  height: 36px;
  margin: auto;
  display: block;
  cursor: pointer;
  margin-top: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../icon/arrow.svg");
}