:root {

  --base-color: #eef2f1;

  --card-base-color: #ffffff96;

  --text-color: #000000;

  --secondary-text: #b7b8bb;

  --primary-color: #3a435d;

  --accent-color: #000000;

  /* nav */

  --base-nav: #e1e1e1;

  --line-nav: #42434a;

  --hover-nav: #ffffff;

  --text-nav: #000000;

  --accent-nav: #b7b8bb;

  --secondary-text-nav: #b0b3c1;

  --base-nav-links: rgb(255 255 255, .95);



}



.darkmode {

  --base-color: #3d7b00;

  --card-base-color: #336600;

  --text-color: #ffffff;

  --secondary-text: #c9c9ce;

  --primary-color: #3a435d;

  --accent-color: #eef2f1;

  /* nav */

  --base-nav: rgb(51 55 54, 1);

  --line-nav: #42434a;

  --hover-nav: #222533;

  --text-nav: #e6e6ef;

  --accent-nav: #5e63ff;

  --secondary-text-nav: #b0b3c1;

  --base-nav-links: rgb(51 55 54, .80);



}



* {

  margin: 0;

  padding: 0;

}



body {

  background-color: var(--base-color);

  color: var(--text-color);

  min-height: 100vh;

  min-height: 100dvh;

  display: grid;

  grid-template-columns: auto 1fr;

}



html {

  font-family: 'poppins', Tahoma, Geneva, Verdana, sans-serif;

  font-size: 16px;

}



h1 {

  margin: 30px 0;

}



h2,

h3,

h4,

h5 {

  line-height: 2rem;

  color: var(--secondary-text);

  font-family: "Poppins", sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 1.8rem;

  margin: 0;

}



h3 {

  font-size: 1.1rem;

}



h4 {

  font-size: 1rem;

}



p {

  margin-bottom: .75rem;

  font-family: "Poppins", sans-serif;

  font-weight: 200;

  font-style: normal;

}



a {

  text-decoration: none;

}



a:not([href]):not([class]),

a:not([href]):not([class]):hover {

  color: inherit;

  text-decoration: none;

}



/*Dividers*/

.divider {

  height: 1px;

  display: block;

  background-color: rgba(0, 0, 0, 0.1);

  margin: 1rem 0;

}



.darkmode .divider {

  background-color: rgba(255, 255, 255, 0.2);

}



.nav-divider {

  margin: 0 1rem;

  border-top: 2px solid rgba(0, 0, 0, 0.1);

  width: 100%;

}



.darkmode .nav-divider {

  background-color: rgba(255, 255, 255, 0.2);

}



main {

  margin-top: 70px;

  margin-bottom: 70px;

}



.grid-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  gap: 1rem;

  margin-bottom: 2rem;

}



.card-outer {

  align-self: flex-start;

}



.card {

  padding: 1em;

  margin-bottom: 1rem;

}



.card-with-sub-grid {

  display: grid;

  grid-template-rows: subgrid;

  grid-row: span 3;

}





.card-style {

  padding: 1em;

  margin-bottom: 2rem;

  background-color: var(--card-base-color);

  text-align: left;

}



.card-border {

  border: 1px solid var(--accent-nav);

}



.card-title,

.card-sub-sub-title {

  display: flex;

  justify-content: flex-start;

  align-items: center;

}



.card-title img {

  width: 60px;

  margin-right: 2rem;

}



.card-sub-sub-title img {

  width: 30px;

  margin-right: 1rem;

}



.card-sub-title img {

  width: 30px;

  margin-right: 1rem;

  margin-top: .5rem;

  float: left;

}



.sub-title-bg {

  background-color: var(--base-color);

  padding: 1rem;

  border: 1px solid var(--secondary-text);

}



.card-title img.small-title-img {

  width: 45px;

}



.card-title img.small-small-title-img {

  width: 36px;

}



.the-clue-text {

  border: 1px solid var(--secondary-text);

  padding: .5rem;

  background-color: var(--base-color);

}



.btn-full-width {

  width: 100%;

  font-size: 1rem;

  line-height: 2rem;

}



.br-10 {

  border-radius: 10px;

}



.br-6 {

  border-radius: 6px;

}

.mt-a {

  margin-top: auto;

}



.mt-1 {

  margin-top: 1rem;

}







.accent-color {

  color: var(--accent-color);

}



.gradient-highlight {

  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC) !important;

}



.pointer {

  cursor: pointer;

}





.close-menu,

.theme-switch,

.page-style-switch,

.text-size-increase,

.text-size-decrease,

.text-size-default,

.highlights-default,

.highlight-picker-container>div,

.getclue {

  cursor: pointer;

}



.page-style-highlight {

    border: 3px solid #fed94e;

    border-radius: 10px;

  }

.highlight-picker-container {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: space-around;

  align-items: stretch;

}



.highlight-picker-container>div {

  margin: 1px;

  width: 10%;

  height: 40px;

}



.code-input-container {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

  gap: 10px;

}



.code-input-container input {

  font-size: 18px;

  width: 100%;

}



.code-input-container .title {

  font-size: 18px;

}



.code-input-container img {

  width: 36px;

}

/* modal pop up */



.menu {

  position: fixed;

  -webkit-backdrop-filter: saturate(180%) blur(20px);

  backdrop-filter: saturate(180%) blur(20px);

  background-color: var(--card-base-color);

  z-index: 101;

  overflow: scroll;

  transition: all 300ms ease;

  -webkit-overflow-scrolling: touch;

}



.menu-hider {

  position: fixed;

  top: -100px;

  bottom: -100px;

  left: 0px;

  right: 0px;

  background-color: rgba(0, 0, 0, 0.35);

  z-index: 100;

  pointer-events: none;

  opacity: 0;

  transition: all 300ms ease;

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);

}





.menu-hider-noclick.menu-active {

  transition: all 300ms ease;

  opacity: 1;

}





.menu-box-modal {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -40%);

  opacity: 0;

  pointer-events: none;

  transition: all 0ms ease;

}



.menu-box-modal.menu-active {

  transition: all 1000ms ease;

  pointer-events: all !important;

  opacity: 1 !important;

  transform: translate(-50%, -50%) !important;

}



.menu-active {

  opacity: 1 !important;

}



#menu-install-pwa-ios,

#menu-install-pwa-android,

#QRCode-reader,

#continue-active-trail,

#completed-trail {

  overflow: visible !important;

  width: 80%;

  max-width: 348px;

  border: 1px solid var(--accent-color);

  -webkit-box-shadow: 6px 10px 34px 0px rgba(0, 0, 0, 0.36);

  -moz-box-shadow: 6px 10px 34px 0px rgba(0, 0, 0, 0.36);

  box-shadow: 6px 10px 34px 0px rgba(0, 0, 0, 0.36);

}



.menu-box {

  position: fixed;

  background-color: var(--card-base-color);

  z-index: 101;

  overflow: scroll;

  transition: all 1000ms ease;

  -webkit-overflow-scrolling: touch;

  opacity: 0;

}



.menu-box-bottom {

  overflow: visible !important;

  bottom: -500px;

  opacity: 0;

  background: transparent;

  width: 100%;

  /*

  left: 50%;

  transform: translate(-50%) !important;

  */

}



.menu-box-bottom .card-outer {

  margin-bottom: 0px;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  background: var(--base-color);

}



.menu-box-bottom.menu-active {

  bottom: 61px;

}









/*Hide Show Based on Color Scheme*/

.darkmode .show-on-theme-dark {

  display: block;

}



.darkmode .show-on-theme-light {

  display: none;

}



.lightmode .show-on-theme-light {

  display: block;

}



.lightmode .show-on-theme-dark {

  display: none;

}



#noqrcodereader {

  display: none;

}



#shortcode,

.taskcode {

  text-transform: uppercase;

  text-align: center;

}



.btn {

  padding: .5rem !important;

}



.auto-m-right {

  margin-right: auto;

}



.alt-bg {

  background: var(--base-color);

}



.alt-btn,

.alt-bg {

  padding: .5rem;

}



.alt-btn h4 {

  color: #ffffff;

  font-size: 1.1rem;

}



.alt-btn img {

  margin-right: 1rem;

}



.gradient-continue {

  background-image: linear-gradient(to bottom, rgb(81, 197, 23), rgb(97, 227, 32)) !important;

}



/*---- nav ----*/

nav {

  height: 60px;

  background-color: var(--base-color);

  display: flex;

  justify-content: flex-end;

  align-items: center;

  position: fixed;

  width: 100%;

  border-bottom: 1px solid var(--secondary-text);

}



.footer-nav {

  background-color: var(--base-color);

  display: flex;

  justify-content: flex-end;

  align-items: center;

  position: fixed;

  width: 100%;

  border-top: 1px solid var(--secondary-text);

  bottom: 0px;

  padding: 10px 10px 30px 10px;

}



.nav-home {

  margin-right: auto;

  display: none !important;

}



.nav-home a {

  padding: 0 1rem;

}



.links-container {

  height: 100%;

  width: 100%;

  display: flex;

  flex-direction: row;

  align-items: center;

}



.nav-links {

  display: flex;

  justify-content: flex-start;

  align-items: center;

}



.nav-links img {

  height: 40px;

  margin-right: .5rem;

}



.footer-nav .nav-links img {

  height: 30px;

}



nav a,

.footer-nav a {

  height: 100%;

  padding: 0 20px;

  display: flex;

  align-items: center;

  text-decoration: none;

  color: var(--text-color);

  line-height: 1.5em;

}



nav a:hover {

  color: inherit;

}



nav .home-link {

  margin-right: auto;

}



nav svg {

  fill: #c01f31;

}



.hide-clues {

  display: none;

}



#sidebar-active {

  display: none;

}



.open-sidebar-button,

.close-sidebar-button {

  display: none;

}



.rotate-message {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0px;

  right: 0px;

  background-color: var(--base-color);

  z-index: 500;

  pointer-events: none;

  opacity: 0;

}



.rotate-message h2 {

  position: fixed;

  bottom: 50px;

  left: 50%;

  transform: translate(-50%);

  font-size: 1.5rem;

  text-align: center;

}



.rotate-message-svg svg {

  fill: var(--card-base-color);

}



.rotate-message-svg {

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  max-height: 80%;



}



.statstable {

  display: flex;

  flex-flow: column nowrap;

  background-color: var(--base-color);

  border: 2px solid var(--secondary-text);

  border-radius: 10px;

}



.statsrow {

  display: flex;

  border-bottom: 1px solid var(--secondary-text);

}



.statsrow:last-child {

  border-bottom: none;

}



.statsheading {

  font-weight: bold;

}



.statscell {

  display: flex;

  flex: 1;

  justify-content: center;

  align-items: center;

  padding: .5rem 0;

}



@media only screen and (orientation: landscape) {

  .rotate-message {

    opacity: 1;

  }

}



@media(max-width: 1000px) {



  /* 600px */

  .links-container {

    flex-direction: column;

    align-items: flex-start;

    position: fixed;

    top: 0;

    right: -100%;

    z-index: 10;

    width: 300px;

    background-color: var(--base-nav-links);

    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);

    transition: 0.75s ease-out;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    overflow: scroll;

  }



  nav a {

    box-sizing: border-box;

    height: auto;

    width: 100%;

    padding: 20px 30px;

    justify-content: flex-start;

  }



  .nav-home {

    display: block !important;

  }



  .open-sidebar-button,

  .close-sidebar-button {

    padding: 20px;

    display: block;

  }



  #sidebar-active:checked~.links-container {

    right: 0;

  }



  #sidebar-active:checked~#overlay {

    height: 100%;

    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9;

  }

}



/* ------------------------------- */

.poppins-thin {

  font-family: "Poppins", sans-serif;

  font-weight: 100;

  font-style: normal;

}



.poppins-extralight {

  font-family: "Poppins", sans-serif;

  font-weight: 200;

  font-style: normal;

}



.poppins-light {

  font-family: "Poppins", sans-serif;

  font-weight: 300;

  font-style: normal;

}



.poppins-regular {

  font-family: "Poppins", sans-serif;

  font-weight: 400;

  font-style: normal;

}



.poppins-medium {

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-style: normal;

}



.poppins-semibold {

  font-family: "Poppins", sans-serif;

  font-weight: 600;

  font-style: normal;

}



.poppins-bold {

  font-family: "Poppins", sans-serif;

  font-weight: 700;

  font-style: normal;

}



.poppins-extrabold {

  font-family: "Poppins", sans-serif;

  font-weight: 800;

  font-style: normal;

}



.poppins-black {

  font-family: "Poppins", sans-serif;

  font-weight: 900;

  font-style: normal;

}



.poppins-thin-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 100;

  font-style: italic;

}



.poppins-extralight-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 200;

  font-style: italic;

}



.poppins-light-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 300;

  font-style: italic;

}



.poppins-regular-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 400;

  font-style: italic;

}



.poppins-medium-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-style: italic;

}



.poppins-semibold-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 600;

  font-style: italic;

}



.poppins-bold-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 700;

  font-style: italic;

}



.poppins-extrabold-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 800;

  font-style: italic;

}



.poppins-black-italic {

  font-family: "Poppins", sans-serif;

  font-weight: 900;

  font-style: italic;

}