@import url("https://fonts.googleapis.com/css2?family=Road+Rage&family=Unkempt:wght@400;700&display=swap");
*, *:before, *:after {
  box-sizing: border-box;
  touch-action: pan-x pan-y;
  user-select: none; }

html, body {
  background-color: steelblue;
  font-family: Unkempt, sans-serif; }

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(20px);
  opacity: 0.75; }

.intro {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  text-align: center;
  overflow: scroll; }
  .intro.hide {
    display: none; }
  .intro__content {
    margin: auto;
    width: 600px;
    max-width: 90%;
    padding: 30px; }
  .intro .ohno {
    width: 120px;
    margin-bottom: 10px; }
  .intro p {
    font-size: 1.2rem; }
  .intro #get-started {
    background-color: green;
    color: #fff;
    font-family: 'Road Rage', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    margin-top: 20px; }
  @media (min-width: 768px) {
    .intro .ohno {
      width: 200px; }
    .intro p {
      font-size: 2rem; }
    .intro #get-started {
      font-size: 3rem;
      padding: 10px 40px; } }

.completed {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
  .completed.show {
    opacity: 1;
    transform: scale(1); }
  .completed .merry-christmas {
    width: 764px;
    height: 400px;
    top: 100px;
    left: 578px;
    right: auto;
    bottom: auto; }

.snow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  display: none; }
  .snow.show {
    display: block; }

/* FIXING */
.fixed {
  position: absolute;
  pointer-events: none;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
  .fixed--item {
    z-index: 1; }
  .fixed--bow {
    width: 79px;
    height: 79px;
    left: 47px;
    top: 1030px; }
  .fixed--candle1 {
    width: 12px;
    height: 27px;
    left: 837px;
    top: 939px; }
  .fixed--candle2 {
    width: 12px;
    height: 28px;
    left: 881px;
    top: 939px; }
  .fixed--candle3 {
    width: 11px;
    height: 27px;
    left: 930px;
    top: 939px; }
  .fixed--candle4 {
    width: 12px;
    height: 29px;
    left: 1310px;
    top: 939px; }
  .fixed--candle5 {
    width: 11px;
    height: 26px;
    left: 1528px;
    top: 939px; }
  .fixed--candle6 {
    width: 12px;
    height: 26px;
    left: 1636px;
    top: 939px; }
  .fixed--garland1 {
    width: 29px;
    height: 161px;
    left: 1031px;
    top: 849px; }
  .fixed--garland2 {
    width: 28px;
    height: 162px;
    left: 1221px;
    top: 848px; }
  .fixed--ladder {
    width: 1px;
    height: 1px;
    left: 0px;
    top: 0px; }
  .fixed--poinsettia1 {
    width: 75px;
    height: 74px;
    left: 963px;
    top: 943px; }
  .fixed--poinsettia2 {
    width: 73px;
    height: 75px;
    left: 1248px;
    top: 943px; }
  .fixed--ribbon1 {
    width: 14px;
    height: 127px;
    left: 1038px;
    top: 868px; }
  .fixed--ribbon2 {
    width: 14px;
    height: 127px;
    left: 1228px;
    top: 864px; }
  .fixed--santa {
    width: 212px;
    height: 343px;
    left: 1625px;
    top: 682px; }
  .fixed--sleigh {
    width: 693px;
    height: 129px;
    left: 359px;
    top: 526px; }
  .fixed--wreath {
    width: 116px;
    height: 121px;
    left: 1079px;
    top: 739px; }
  .fixed--star {
    width: 121px;
    height: 121px;
    left: 88px;
    top: 805px; }
  .fixed--boris {
    width: 1px;
    height: 1px;
    left: 0px;
    top: 0px; }
  .fixed--lights1_off {
    width: 510px;
    height: 338px;
    left: 797px;
    top: 685px; }
  .fixed--lights2_off {
    width: 1680px;
    height: 361px;
    left: 124px;
    top: 626px; }
  .fixed--lights3_off {
    width: 328px;
    height: 61px;
    left: 1371px;
    top: 954px; }
  .fixed--lights4_off {
    width: 538px;
    height: 71px;
    left: 318px;
    top: 952px; }
  .fixed--lights5_off {
    width: 127px;
    height: 141px;
    left: 82px;
    top: 890px; }
  .fixed--lights1_on {
    width: 527px;
    height: 340px;
    left: 785px;
    top: 684px; }
  .fixed--lights2_on {
    width: 1688px;
    height: 371px;
    left: 124px;
    top: 618px; }
  .fixed--lights3_on {
    width: 342px;
    height: 77px;
    left: 1367px;
    top: 948px; }
  .fixed--lights4_on {
    width: 538px;
    height: 88px;
    left: 317px;
    top: 945px; }
  .fixed--lights5_on {
    width: 135px;
    height: 156px;
    left: 79px;
    top: 885px; }
  .fixed--light_on {
    opacity: 0;
    mix-blend-mode: screen; }
    .fixed--light_on.blink {
      animation: blink 1s ease-in-out infinite; }
  .fixed.found {
    transform: scale(1); }
    .fixed.found:not(.fixed--light_on) {
      opacity: 1; }

@keyframes blink {
  0%, 100% {
    opacity: 0; }
  50% {
    opacity: 1; } }
.broken {
  position: absolute;
  border-radius: 10px;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
  .broken--item {
    z-index: 1; }
  .broken--bow {
    width: 101px;
    height: 39px;
    left: 1006px;
    top: 1037px;
    z-index: 2; }
  .broken--candle1 {
    width: 30px;
    height: 90px;
    left: 826px;
    top: 889px; }
  .broken--candle2 {
    width: 30px;
    height: 90px;
    left: 871px;
    top: 889px; }
  .broken--candle3 {
    width: 30px;
    height: 90px;
    left: 921px;
    top: 889px; }
  .broken--candle4 {
    width: 30px;
    height: 90px;
    left: 1301px;
    top: 889px;
    z-index: 11; }
  .broken--candle5 {
    width: 30px;
    height: 90px;
    left: 1518px;
    top: 889px; }
  .broken--candle6 {
    width: 30px;
    height: 90px;
    left: 1626px;
    top: 889px;
    z-index: 11; }
  .broken--garland1 {
    width: 180px;
    height: 115px;
    left: 977px;
    top: 909px; }
  .broken--garland2 {
    width: 809px;
    height: 231px;
    left: 816px;
    top: 1063px; }
  .broken--ladder {
    width: 485px;
    height: 175px;
    left: 96px;
    top: 1052px;
    z-index: 3; }
  .broken--poinsettia1 {
    width: 89px;
    height: 69px;
    left: 383px;
    top: 966px;
    z-index: 2; }
  .broken--poinsettia2 {
    width: 83px;
    height: 74px;
    left: 1313px;
    top: 958px; }
  .broken--ribbon1 {
    width: 190px;
    height: 81px;
    left: 699px;
    top: 1121px;
    z-index: 2; }
  .broken--ribbon2 {
    width: 190px;
    height: 40px;
    left: 1305px;
    top: 1017px; }
  .broken--santa {
    width: 199px;
    height: 80px;
    left: 1663px;
    top: 961px;
    z-index: 11; }
  .broken--sleigh {
    width: 544px;
    height: 407px;
    left: 181px;
    top: 567px; }
  .broken--wreath {
    width: 122px;
    height: 57px;
    left: 640px;
    top: 906px; }
  .broken--star {
    width: 140px;
    height: 95px;
    left: 456px;
    top: 1219px;
    z-index: 3; }
  .broken--boris {
    width: 559px;
    height: 554px;
    left: 1235px;
    top: 836px;
    z-index: 10; }
  .broken--lights1 {
    width: 37px;
    height: 159px;
    left: 1260px;
    top: 855px;
    z-index: 11; }
  .broken--lights2 {
    width: 221px;
    height: 131px;
    left: 1499px;
    top: 1055px;
    z-index: 1; }
  .broken--lights3 {
    width: 286px;
    height: 135px;
    left: 540px;
    top: 1014px;
    z-index: 1; }
  .broken--lights4 {
    width: 148px;
    height: 114px;
    left: 1287px;
    top: 717px; }
  .broken--lights5 {
    width: 206px;
    height: 78px;
    left: 677px;
    top: 648px;
    z-index: 1; }
  .broken.found {
    transform: scale(1.2);
    opacity: 0;
    pointer-events: none; }
  .broken.hint {
    animation: hint 1s ease-out;
    animation-fill-mode: forwards; }

@keyframes hint {
  0% {
    transform: scale(1);
    background-color: transparent; }
  50% {
    transform: scale(1.5); }
  100% {
    transform: scale(1);
    background-color: rgba(255, 0, 0, 0.5); } }
.shifter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden; }

/* STAGE */
.stage-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: scroll; }
.stage-sizer, .stage-content {
  width: 1920px;
  height: 1390px; }
.stage-sizer {
  position: absolute;
  overflow: hidden;
  box-sizing: content-box;
  top: 0;
  left: 0; }
  .stage-sizer > * {
    box-sizing: border-box; }
.stage-content {
  position: relative;
  transform-origin: top left; }
  .stage-content img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; }

.scale-placeholder {
  position: absolute; }

#stage, #stage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; }

.stats__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 98;
  text-align: left;
  margin: 5px; }
  .stats__wrapper .button {
    position: absolute;
    top: 0;
    right: 0; }
.stats__container {
  position: absolute;
  top: 0;
  left: 0; }
  .stats__container .fb-share-button {
    margin: 5px; }
.stats__number {
  font-family: 'Road Rage';
  font-size: 2em;
  line-height: 1rem;
  display: inline-block;
  transform: translateY(0.12em); }
.stats__fixed {
  color: crimson; }
.stats__total {
  color: green; }
.stats__box {
  max-width: 75vw;
  font-size: 1.2rem;
  line-height: 1;
  margin: 5px;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25); }
@media (min-width: 768px) {
  .stats__box {
    font-size: 2rem;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 15px; } }

.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 65px;
  height: 65px;
  margin: 5px;
  border-radius: 10px;
  border: none;
  background-color: rgba(255, 255, 255, 0.6);
  color: #000;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
  transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; }
  .button:hover, .button:focus {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25); }
  .button .icon {
    width: 20px;
    height: 20px;
    margin: auto auto 2px; }
  .button__text {
    display: block;
    font-size: 0.5rem;
    margin: 2px auto auto; }
  @media (min-width: 768px) {
    .button {
      width: 120px;
      height: 65px;
      border-radius: 15px; }
      .button .icon {
        width: 20px;
        height: 20px;
        margin: auto auto 0; }
      .button__text {
        font-size: 1rem;
        margin: 0 auto auto; } }
  .button.disabled {
    opacity: 0.2;
    pointer-events: none; }
  .button.hide {
    display: none; }

.zoom__nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  z-index: 98;
  text-align: right; }
  @media (min-width: 768px) {
    .zoom__nav {
      top: auto;
      left: auto;
      right: 0;
      bottom: 0; } }
  @media (min-height: 400px) and (min-width: 768px) {
    .zoom__nav {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; } }

#playagain {
  display: none; }
  #playagain.show {
    display: flex; }